I made a little express setup with threejs installed. I installed ThreeJS with the command “npm install three”. I have a public folder with both a .html and a .js file, the page is displayed, I’m sure the .js file is linked properly because I put a console.log on it and I see the console log in the console of my browser. But the problem comes from threejs itself, the line “import * as THREE from ‘three’;” is the problem. I get the error:
“p://localhost:3000/three net::ERR_ABORTED 404 (Not Found)” due to the import.
Here’s my app.js (express and nodejs setup:
const express = require('express')
const app = express()
const port = 3000
app.use(express.static('public'));
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})
Here’s my HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="module" src="main.js"></script>
</head>
<body>
<h1>yo bro who gotchu smile like that</h1>
</body>
</html>
And the JS attached to the page:
import * as THREE from 'three';
// Create a scene
const scene = new THREE.Scene();
// Create a camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// Create a renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Create a cube
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
I don’t want to use a CDN, I want to develop with code that is on my machine, but it seems like the js code can’t access threejs’ module. Maybe someone already asked for this kind of problem but I didn’t find any answers online… Do you know what happens? Have a nice day.