Importing three.module.js as a module

Questions
1

I’m trying to import the ‘three.module.js’ in my code and I have no idea why im keeping getting GET http://127.0.0.1:3000/build/three.module.js net::ERR_ABORTED 404 (Not Found) !

this is my code…!

import * as THREE from ‘./build/three.module.js’;

import { Water } from ‘./objects/water.js’;

function main(){

const canvas = document.querySelector('#c');

const renderer = new THREE.WebGLRenderer({canvas});
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);

const fov = 55;
const aspect = 2;
const near = 0.1;
const far = 2000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
      camera.position.set( 30, 30, 100 );

const scene = new THREE.Scene();

const sun = new THREE.Vector3();

// //water

const waterGeometry = new THREE.PlaneBufferGeometry( 20, 20 );
const flowMap = new THREE.TextureLoader().load( 'textures/waternormals.png' );

water = new Water
( waterGeometry, {
				scale: 2,
				textureWidth: 1024,
				textureHeight: 1024,
				flowMap: flowMap
			} );

			water.position.y = 1;
			water.rotation.x = Math.PI * - 0.5;
			scene.add( water );
    water.rotation.x = - Math.PI / 2;

    scene.add( water );

//
}

main();

-----------------------------app.js---------------------------

const express = require(‘express’)
const app = express()
const path = require(‘path’)

app.use(express.static(__dirname + ‘/public’))
app.use(’/build/’, express.static(path.join(__dirname, ‘node_modules/three/build’)));
app.use(’/objects/’, express.static(path.join(__dirname, ‘node_modules/three/examples/jsm/objects’)));

app.listen(3000, () =>
console.log(‘Visit http://127.0.0.1:3000’)
);

-----------------------------html code-------------------------

    body {
     html, body {
        margin: 0;
        height: 100%; 
     }
     #c {
        width: 100%;
        height: 100%;
        display: block;
     } 
        }
    
    </style>
</head>
<body>
    
    <canvas id = "c"></canvas>

    <script type = "module" src = "client.js"></script>

</body>

Thanks!

2

Do you have a node_modules folder with three in it. I expect maybe you didn’t setup using npm. Or ran npm install from the wrong folder. Anyway, start from scratch in a new folder and compare the difference with this.

Create a new folder, open a command in it, and then type,

git clone https://github.com/Sean-Bradley/Threejs-Boilerplate.git
cd Threejs-Boilerplate
npm install
npm start

Now visit http://127.0.0.1:3000

2 Likes
3

hello!! Thank you so much to give me solution!! i fixed that part but now im having client.js:35 Uncaught ReferenceError: water is not defined
at main (client.js:35)
at client.js:54
this error… plz help!

4

I think you might have strict enabled somewhere

change it to

let water = new Water(...

or

const water = new Water(...
1 Like
5

omg, you saved my life!!! :heart:

1 Like