Hello everyone, I’m starting a THREE.js course. And the object does not appear in the browser. I inspected and says that, THREE.PrespectiveCamera is not a constructor.
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.js"></script>
<script>
//criar um senário
var scene=new THREE.Scene
// criar nova prespetiva de camara
var camera = new THREE.PrespectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000 )
camera.position.z = 25;
//criar full screen webgl renderer
var renderer = new THREE.WebGLRenderer({antialias: true, alpha:true})
renderer.setClearColor("#DDDDDD");
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
//make sure te project is responsive based on window resizin
window.addEventListener('resize', ()=>{
renderer.setSize(window.innerWidth,window.innerHeight);
camera.aspect=window.innerHeight/window.innerHeight;
camera.updateProjectionMatrix();
})
//adicionar luz
var light = new THREE.PointLight(0xFFFFFF, 1.4, 1000 )
light.position.set(0,15,15);
scene.add(light);
//definir variaveis para os objecto 3d
var ourObj1;
var ourObj2;
var ourObj3;
var ourObj4;
var ourObj5;
var ourObj6;
//criar um material
var mtlLoader = new THREE.MTLLoder();
mtlLoader.load('1.mtl', function(material){
material.preload();
//carrear o objecto
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.load('1.obj', function(object) {
scene.add(object);
object.position.z -=370;
object.rotation.x =250;
});
});
var render = function(){
requestAnimationFrame(render);
//rotate objects indefinitely
// ourObj1.rotation.z -= .01
// ourObj2.rotation.z += .03
renderer.render(scene, camera);
}
//call to render entire scene
render();
</script>