I'm trying to upload a 3D model to my scene in three.js however I have trouble doing this. I decided to recreate an example to practice which is shown below but I still get error and it doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Website first attempt</title>
<script src="js/three.min.js"></script>
<script type = "module"src="js/OrbitControls.js"></script>
<script type = "module" src="js/GLTFLoader.js"></script>
<style>
body { margin: 0;}
canvas { display: block; }
</style>
</head>
<body>
<div class = "wave"></div>
<script type = "module">
var scene, camera, renderer, controls;
var hlight,directionalLight, light, light2, light3, light4;
function init () {
//scene
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xdddddd );
//camera
camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000);
camera.rotation.y = 45/180*Math.PI;
camera.position.x = 800;
camera.position.y = 100;
camera.position.z = 1000;
//render
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//controls
controls = new THREE.OrbitControls( camera, renderer.domElement );
hlight = new THREE.AmbientLight (0x404040,100);
scene.add(hlight);
directionalLight = new THREE.DirectionalLight(0xffffff,100);
directionalLight.position.set(0,1,0);
directionalLight.castShadow = true;
scene.add(directionalLight);
light = new THREE.PointLight(0xc4c4c4,10);
light.position.set(0,300,500);
scene.add(light);
light2 = new THREE.PointLight(0xc4c4c4,10);
light2.position.set(500,100,0);
scene.add(light2);
light3 = new THREE.PointLight(0xc4c4c4,10);
light3.position.set(0,100,-500);
scene.add(light3);
light4 = new THREE.PointLight(0xc4c4c4,10);
light4.position.set(-500,300,500);
scene.add(light4);
var loader = new THREE.GLTFLoader();
loader.load('scene.gltf', function(gltf){
car = gltf.scene.children[0];
car.scale.set(0.5,0.5,0.5);
scene.add(gltf.scene);
animate();
});
}
function onWindowResize () {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize, false);
function animate () {
requestAnimationFrame(animate);
controls.update();
render();
}
function render() {
renderer.render( scene, camera );
}
init ();
animate();
</script>
</body>
</html>
Comes with an error:
GET http://127.0.0.1:5500/build/three.module.js net::ERR_ABORTED 404 (Not Found) index4.html:78 Uncaught TypeError: THREE.GLTFLoader is not a constructor at init (index4.html:78) at index4.html:122
I'm trying to upload a 3D model to my scene in three.js however I have trouble doing this. I decided to recreate an example to practice which is shown below but I still get error and it doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Website first attempt</title>
<script src="js/three.min.js"></script>
<script type = "module"src="js/OrbitControls.js"></script>
<script type = "module" src="js/GLTFLoader.js"></script>
<style>
body { margin: 0;}
canvas { display: block; }
</style>
</head>
<body>
<div class = "wave"></div>
<script type = "module">
var scene, camera, renderer, controls;
var hlight,directionalLight, light, light2, light3, light4;
function init () {
//scene
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xdddddd );
//camera
camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000);
camera.rotation.y = 45/180*Math.PI;
camera.position.x = 800;
camera.position.y = 100;
camera.position.z = 1000;
//render
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//controls
controls = new THREE.OrbitControls( camera, renderer.domElement );
hlight = new THREE.AmbientLight (0x404040,100);
scene.add(hlight);
directionalLight = new THREE.DirectionalLight(0xffffff,100);
directionalLight.position.set(0,1,0);
directionalLight.castShadow = true;
scene.add(directionalLight);
light = new THREE.PointLight(0xc4c4c4,10);
light.position.set(0,300,500);
scene.add(light);
light2 = new THREE.PointLight(0xc4c4c4,10);
light2.position.set(500,100,0);
scene.add(light2);
light3 = new THREE.PointLight(0xc4c4c4,10);
light3.position.set(0,100,-500);
scene.add(light3);
light4 = new THREE.PointLight(0xc4c4c4,10);
light4.position.set(-500,300,500);
scene.add(light4);
var loader = new THREE.GLTFLoader();
loader.load('scene.gltf', function(gltf){
car = gltf.scene.children[0];
car.scale.set(0.5,0.5,0.5);
scene.add(gltf.scene);
animate();
});
}
function onWindowResize () {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize, false);
function animate () {
requestAnimationFrame(animate);
controls.update();
render();
}
function render() {
renderer.render( scene, camera );
}
init ();
animate();
</script>
</body>
</html>
Comes with an error:
Share Improve this question edited Feb 7, 2020 at 4:53 Simas Joneliunas 3,14620 gold badges31 silver badges39 bronze badges asked Feb 7, 2020 at 0:50 Sophia98Sophia98 3398 silver badges17 bronze badgesGET http://127.0.0.1:5500/build/three.module.js net::ERR_ABORTED 404 (Not Found) index4.html:78 Uncaught TypeError: THREE.GLTFLoader is not a constructor at init (index4.html:78) at index4.html:122
1 Answer
Reset to default 3I think easier to stick to the example's code style and organize your imports like so:
<script type = "module">
import * as THREE from '../build/three.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
var scene, camera, renderer, controls;
Meaning three.module.js, OrbitControls and GLTFLoader are ES6 modules. In this case, you can create an instance of GLTFLoader without the THREE namespace. Same for OrbitControls.
Notice that it's no good approach to mix ES6 modules with non-ES6 modules. If you do so, you will be inevitably faced with issues which are really hard to track down. E.g. libraries like three.js get included twice.