Hello Guys, please, help me.
I am trying to create a garner with cilinder and a cone.
Well… no problems. It Works!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!--Inclusão de Scripts ThreeJs-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<script src="three js biblioteca/examples/jsm/controls/OrbitControls.js"></script>
<script src="three js biblioteca/build/three.js"></script>
<script src="three js biblioteca/build/three.min.js"></script>
<script src="three js biblioteca/build/three.module.js"></script>
<script>
initi();
function initi(){
//=======SCENE
var scene = new THREE.Scene();
//RENDER==============//
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setClearColor("#e5e5e5");
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
//CAMERA==============//
//Cria a instância câmera no método PerspectiveCamera na classe THREE
var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,10000);
camera.position.z=80;
//CONE==============//
var geometry = new THREE.ConeGeometry( 13, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0x483D8B} );
var cone = new THREE.Mesh( geometry, material );
cone.position.set(0,30,0);
scene.add( cone );
//CYLINDER==============//
var geometria = new THREE.CylinderGeometry(13,13, 40,32);
var material1 = new THREE.MeshBasicMaterial( {color: 0xffcc00} );
var cilindro = new THREE.Mesh( geometria, material1 );
cilindro.position.set(0,0,0);
scene.add( cilindro );
var controls = new THREE.OrbitControls( camera , renderer.domElement);
camera.position.set( 0, 0, 80 );
requestAnimationFrame( animate );
controls.update();
//===========EVENTO DE RECONFIGURAR O TAMANHO DO CANVAS====///
//window.addEventListener('resize', onWindowResize, false );
renderer.render( scene, camera ); // Renderiza a câmera e a cena
}
function onWindowResize(){
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth/window.innerHeight;
camera.updadeProjectionMatrix();
}
//=====CHAMA A FUNÇÃO ANIMATE====
function animate(){
requestAnimationFrame( animate );
controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true
render();
}
</script>
</body>
</html>
But, i want to add the OrbitControl for see the garner in diferent perspectives and, when i put the module orbitcontrol, results in this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!--Inclusão de Scripts ThreeJs-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<script src="three js biblioteca/examples/jsm/controls/OrbitControls.js"></script>
<script src="three js biblioteca/build/three.js"></script>
<script src="three js biblioteca/build/three.min.js"></script>
<script src="three js biblioteca/build/three.module.js"></script>
<script>
initi();
function initi(){
//=======SCENE
var scene = new THREE.Scene();
//RENDER==============//
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setClearColor("#e5e5e5");
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
//CAMERA==============//
//Cria a instância câmera no método PerspectiveCamera na classe THREE
var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,10000);
camera.position.z=80;
//CONE==============//
var geometry = new THREE.ConeGeometry( 13, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0x483D8B} );
var cone = new THREE.Mesh( geometry, material );
cone.position.set(0,30,0);
scene.add( cone );
//CYLINDER==============//
var geometria = new THREE.CylinderGeometry(13,13, 40,32);
var material1 = new THREE.MeshBasicMaterial( {color: 0xffcc00} );
var cilindro = new THREE.Mesh( geometria, material1 );
cilindro.position.set(0,0,0);
scene.add( cilindro );
var controls = new THREE.OrbitControls( camera , renderer.domElement);
camera.position.set( 0, 0, 80 );
requestAnimationFrame( animate );
controls.update();
//===========EVENTO DE RECONFIGURAR O TAMANHO DO CANVAS====///
//window.addEventListener('resize', onWindowResize, false );
renderer.render( scene, camera ); // Renderiza a câmera e a cena
}
function onWindowResize(){
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth/window.innerHeight;
camera.updadeProjectionMatrix();
}
//=====CHAMA A FUNÇÃO ANIMATE====
function animate(){
requestAnimationFrame( animate );
controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true
render();
}
</script>
</body>
</html>
That’s the code