I seem to be to stupid to install three.js

Questions
,
1

Hello,

I followed the directions in the installation manual. Then I followed tutorials from other sides. All in hopes to get three.js properly up and running.

I am using Atom to code and the atom-live-server to host.

What worked:

  1. creating a folder for my project
  2. creating a “js” folder and putting the three.js file inside
  3. creating an “index.html” file with script tags to the three.js file and my scene.js file
  4. creating a scene.js file with the first example (solid rotating green cube) from the manual

What didn’t work:

  1. I installed three in my project folder via npm
  2. I deleted the script tag references to three.js
  3. I added type = “module” to the script tag referencing my scene.js
  4. I added “import * as THREE from ‘three’;” to my scene.js file
  5. the example-code does not work any more.

This is my code:
index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script type = "module" src="scene.js"></script>
	</body>
</html>

scene.js

import * as THREE from 'three';

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

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;

const animate = function () { requestAnimationFrame( animate );
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render( scene, camera );
};
  animate();

This is my folder structure:

project/
--node_modules/
----three/
----.package-lock.json
--index.html
--package-lock.json
--package.json
--scene.js

Can anyone help me?

2

module script tags and browser esm are highly volatile, unfinished specs, you will only burn time trying to make it work. if it runs today it’ll fail tomorrow when you add dependencies to it.

pick a bundler, vite for instance, type npm init vite follow instructions, npm install three and you’re set. as for atom, editors should not run or serve projects, just edit files — this is all taken care of by the bundler.

PS another super quick way to get started is codesandbox. Threejs basic example - CodeSandbox you can either develop there, or click the download button and you have a ready-made project that you can run locally.

3

The problem is with your folder structure. Right now you’re using import from "three", but since you’re not using a bundler, your server just looks for a file named “three” next to scene.js. Without a bundler, you’d need to use:
import THREE from "./node_modules/three/three.module.js".

If you’re going to use npm with node_modules you may want to use a bundler like Webpack as well, so it searches for modules for you. That way when you say ... from "THREE", it will automatically search in node_modules to find it. The problem is that Webpack takes a bit of setting up, and it’s a more advanced way of building websites.

4

As a beginner you sometimes have difficulties with software packages and their inner dependencies. This is normal.

An easy way is to use a local server and then drop the modules as you wish. In the beginning you need only very few of them.

Have a look at the instructions at the bottom of the Collection of examples from discourse.threejs.org page: * discourse.threejs.hofk.de
As editor you can use a simple text editor. Or something like Notepad++ portable.

Good luck :slightly_smiling_face: