Menu
Im learning Three.js and have set up an basic project running a node.js server and importing Three.js as a node moudule.
Actually my setup works but Im a little bit confused if this is a good setup?
The thing I am thinking about is basically the long path for my node_module. On some pages Three.js is getting imported just through:
import * as THREE from 'three';
but in my case I have to write the full path:
import * as THREE from './node_modules/three/build/three.module.js';
Is this correct implementation?
Here is my full code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background-color: #cce0ff;
color: #000;
}
a {
color: #080;
}
</style>
</head>
<body>
<script type="module" src="index.js"></script>
</body>
</html>
index.js
**import * as THREE from './node_modules/three/build/three.module.js';**
const scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
var animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
Do i need to use webpack to bundle. Can that solve that it cant find the path to my nodemodules?
259
My recommendation if you are new to bundlers would be to use parcel. Here is a starter project that can get you going. You need a bundler if you don't want to use the full path like that.
129
You don't really need to bring Webpack into the equation, unless you have several JS files that you want to bundle into one. A simple solution is to just point to the three.module.js build of Three.js, wherever it may be stored. In the example below, I'm importing it from a CDN but it could be from your node_modules folder as well, if you wish.
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background-color: #cce0ff;
color: #000;
}
a {
color: #080;
}
</style>
</head>
<body>
<script type="module">
import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.module.js';
const scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0xff9900 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
var animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>Keep in mind that using <script type="module"> is not supported in Edge and IE, so if you need to support those browsers, then you may want to use WebPack. That's a very broad topic, so you can follow the instructions in its documentation's Getting Started section.
4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
