I’m new with three.js and I don’t know what’s the probleme is
<script type="node_modules" src="./node_modules/three/examples/jsm/loaders/GLTFLoader.js"></script>
<script type="node_modules" src="./node_modules/three/examples/jsm/controls/OrbitControls.js"></script>
<script>
let scene, camera, renderer;
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0xdddddd);
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;
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', renderer);
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);
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
let loader = new THREE.GLTFLoader();
loader.load('./test_3d/scene.gltf', function(gltf){
car = gltf.scene.children[0];
car.scale.set(0.5,0.5,0.5);
scene.add(gltf.scene);
animate();
});
}
function animate() {
renderer.render(scene,camera);
requestAnimationFrame(animate);
}
init();
and it return me this error:
Uncaught TypeError: Cannot read properties of undefined (reading ‘domElement’)
at init ((index):25:61)
which refers to this part of the code:
controls = new THREE.OrbitControls(camera, renderer.domElement);