Three.js Tutorial

Baixar a biblioteca

Criando a cena

Criar arquivo Index.html

E criar arquivo Index.js

var scene = new THREE.Scene();
                        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
                        renderer.setSize( window.innerWidth, window.innerHeight );
                        document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
                        var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
                        var cube = new THREE.Mesh( geometry, material );
                        scene.add( cube );

camera.position.z = 5;

function animate() {
                            requestAnimationFrame( animate );

cube.rotation.x += 0.01;
                            cube.rotation.y += 0.01;

renderer.render( scene, camera );
                        };

animate();

Resultado

Adicionando luz e sombras

Adicionar o Shadow Map no render

Adicionar as luzes

Adicionar as sombras no cubo

Resultado

Intensidade da Hemisphere Light:
Intensidade da Point Light:

Adicionando controle da camera

Baixar a biblioteca OrbitControls

Adicionar a biblioteca no index.html

Adicionar o controle ao codigo

Adicionar no Animate

Resultado

Clique em cima do cubo e arraste para girar a camera

Adicionando um modelo 3D

OBJ/MTL loader

Baixar a biblioteca OBJLoader Baixar a biblioteca MTLLoader

Adicionar as bibliotecas no index.html

Adicionar o codigo ao index.js

var mtlLoader = new THREE.MTLLoader();
                        //Alterar o caminho para ser na mesma pasta
                        mtlLoader.setPath( 'obj/male02/' );
                        //nome do arquivo MTL
                        var url = "male02_dds.mtl";
                        mtlLoader.load( url, function( materials ) {
                        
                            materials.preload();
                        
                            var objLoader = new THREE.OBJLoader();
                            objLoader.setMaterials( materials );
                            //Alterar o caminho para ser na mesma pasta
                            objLoader.setPath( 'obj/male02/' );
                            //nome do arquivo OBJ
                            objLoader.load( 'male02.obj', function ( object ) {
                        
                                object.position.y = - 95;
                                scene.add( object );
                        
                            }, onProgress, onError );
                        
                        });

Resultado

Baixar a biblioteca OBJLoader Baixar a biblioteca MTLLoader Baixar a biblioteca modelLoader

Adicionar as bibliotecas no index.html

Adicionar os inputs e o botão ao index.html

Inicializar a biblioteca

Adicionar as seguintes funções

Resultado

Carregar modelo:
Carregar material: