var scene = new THREE.Scene()
var WIDTH = window.innerWidth
var HEIGHT = window.innerHeight;
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( WIDTH, HEIGHT);
document.body.appendChild( renderer.domElement );
// Objetos da cena
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
//criando textura de uma imagem
var material = new THREE.MeshBasicMaterial( {color: 0xfffff, wireframe: true} );
//criando luz ambiente
var ambientLight = new THREE.AmbientLight(0xFFFFFF);
//atribuindo o material ao objeto
var cylinder = new THREE.Mesh( geometry, material );
//adicionando o objeto na cena
scene.add( cylinder );
//adicionando luz ambiente na cena
scene.add(ambientLight);
// Posição da câmera
camera.position.x = 0;
camera.position.z = 20;
camera.position.y = 0;
window.addEventListener( "resize", function(){
//atualizando variáveis
WIDTH = window.innerWidth;
HEIGHT = window.innerHeight;
renderer.setSize( WIDTH, HEIGHT ); //atualizando dimesões do renderizador
//atualizando aspect ratio e matriz da câmera
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
});
function render(){
//definindo a cena e a câmera utilizada
renderer.render(scene, camera);
//alterando valores dos eixos para executar algum movimento
cylinder.rotation.z += 0.01;
cylinder.rotation.y += 0.01;
cylinder.rotation.x += 0.01;
//executando recursivamente
requestAnimationFrame(render);
}
//executando a função de renderizaçaõ
render();
*{
margin: 0;
padding: 0;
}
html, body{
overflow: hidden;
}
footer {
position: absolute;
bottom: 10px;
color: #fff;
left: 20px;
console