CODEWITHSUNDEEP
javascriptnode.jsnpmwebpackthree.js
acroscene
acroscene

Reputation: 1067

Path for Three.js using node module

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?

Upvotes: 8

Views: 4784

Answers (3)

Andrea Carraro
Andrea Carraro

Reputation: 10419

You might consider importing three.js from a CDN relying on the UMD (Universal Module Definition) bundle exposed by the library.

<script src="https://unpkg.com/[email protected]/build/three.js"></script>
<script src="./path/to/your/index.js"></script>

This will fetch the library and expose THREE in your global object. That's the way web frontend worked 10 years ago and it's still supposed to work in any browser.

// index.js
const scene = new THREE.Scene();
...

That said, you're probably going to need a bundler soon in order to support the upcoming requirements of your project.

Upvotes: 1

M -
M -

Reputation: 28462

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.

Upvotes: 4

iicaptain
iicaptain

Reputation: 1195

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.

Upvotes: 4

Related Questions