<!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="three js biblioteca/build/three.min.js"></script>
  <script src="three js biblioteca/examples/js/controls/OrbitControls.js"></script> <!-- from js folder, not jsm -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>

  <script>
  </script>

   

</body>
</html>
body {

    margin:0;

}

canvas{
    display:block;

}
 initi();

    animate();

    

function initi(){
//==============CONFIGURANDO O RENDER==============//

    //Declaramos a renderer como uma nova instância do método WebGLRFenderer do método THREE
    var renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setClearColor("#e5e5e5"); //Seta a cor para um... cinza
    renderer.setSize(window.innerWidth,window.innerHeight); //Configura o tamanho para o tamanho da janela

    document.body.appendChild(renderer.domElement); //Sincroniza com o body do documento html

//==============CONFIGURANDO A CENA==============//

    //Para toda camera, luz , objeto, renderizador, precisa de uma CENA(scene).
    var scene = new THREE.Scene();

    //==============CONFIGURANDO A CÂMERA==============//

    //Cria a instância câmera no método PerspectiveCamera na classe THREE
    var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
    //Comando que configura a posição da câmera no eixo(X,Y,Z)
    //camera.position.z=80;//Para vermos algum objeto, precisamos configurar a posição da câmera.

    //===========ORBITCONTROL==============//

    var controls = new THREE.OrbitControl(camera, renderer.domElement);
    
    camera.position.set(0,0,80);
    


//==============CRIANDO 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 );

//==============CRIANDO CILINDRO==============//

    //Essa instância cria na classe THREE e no método CylinderGeometry um novo cilindro
    //Documentação: https://threejs.org/docs/#api/en/geometries/CylinderGeometry
    var geometria = new THREE.CylinderGeometry(13, //Raio do cilindro no topo
        13, //Raio do cilindro embaixo
        40, //Comprimento da Altura
        32  //Número de faces segmantadas ao redor do cilindro
        ); 
    var material1 = new THREE.MeshBasicMaterial( {color: 0xffcc00} ); //Declara o material do cilindro e a sua cor.
    var cilindro = new THREE.Mesh( geometria, material1 ); //Cria no método Mesh(malha) com as informações 
    cilindro.position.set(0,0,0);
    scene.add( cilindro ); //Adiciona na cena o cilindro
    

    //===========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

        renderer.render( scene, camera ); // Renderiza a câmera e a cena

    }


//==============CONFIGURANDO O RENDER PARA A CENA E A CÂMERA==============//
        


Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.