Este artigo é a segunda parte do tutorial, recomendo que veja a primeira caso ainda não tenha visto - [Parte 1](https://dev.to/baltz/comecando-com-threejs-renderizando-3d-no-navegador-3d3o) Abaixo vou deixar um spoiler do que vamos desenvolver agora: {% codepen https://codepen.io/baltazarparra/pen/eYoGVdW %} Continuando do estado em que terminamos a primeira parte: index.html ```html Meu primeiro 3D

``` ```js import * as THREE from "three"; function main() { const canvas = document.querySelector("#c"); const renderer = new THREE.WebGLRenderer({ antialias: true, canvas }); const camera = new THREE.PerspectiveCamera(75, 2, 0.1, 5); camera.position.z = 2; const scene = new THREE.Scene(); const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshBasicMaterial({ color: 0x44aa88 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); renderer.render(scene, camera); } main(); ``` Já possuímos um modelo 3D renderizado no navegador. Agora, vamos adicionar uma camada de imersão para aprimorar nossa experiência. Ao final deste artigo, teremos um novo projeto 3D imersivo pronto para ser adicionado aos nossos destaques no GitHub. Para começar, vamos tornar nosso Canvas responsivo a qualquer tamanho de tela. Isto pode ser feito adicionando o seguinte estilo: index.html ```css ``` Vamos adicionar a propriedade "alpha" ao nosso Renderer e definir um tamanho ao Canvas usando o método setSize. Além disso, vamos ajustar a perspectiva da nossa câmera: main.js ```js const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true, canvas: canvas }); renderer.setSize(window.innerWidth, window.innerHeight); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); ``` Agora que temos um canvas responsivo que renderiza nosso modelo 3D corretamente em qualquer tamanho de tela, podemos começar a adicionar imersão à nossa experiência. Para isso, vamos começar a interagir com os movimentos do mouse: main.js ```js function render() { document.addEventListener("mousemove", (event) => { let mouseX = event.clientX; let mouseY = event.clientY; cube.rotation.x = mouseY * 0.008; cube.rotation.y = mouseX * 0.0036; }); renderer.render(scene, camera); requestAnimationFrame(render); } ``` Ótimo! Agora temos uma experiência imersiva com um modelo 3D. Conquistamos nossa pequena vitória do dia, e como bônus, vamos um pouco além (mas não fique mal acostumado). Vamos tornar nosso projeto mais atraente e digno de destaque no nosso GitHub, adicionando iluminação e explorando formas e materiais mais complexos. main.js ```js import * as THREE from "three"; function main() { const canvas = document.querySelector("#c"); const renderer = new THREE.WebGLRenderer({ antialias: true, canvas, alpha: true, }); renderer.setSize(window.innerWidth, window.innerHeight); const fov = 75; const near = 0.1; const far = 1000; const camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, near, far ); camera.position.z = 30; const scene = new THREE.Scene(); const geometry = new THREE.TorusKnotGeometry(10, 3, 100, 16); const material = new THREE.MeshPhysicalMaterial({ metalness: 0, // High metalness for ruby-like shine roughness: 0, // Low roughness for smooth, glossy surface clearcoat: 0, clearcoatRoughness: 1, transmission: 0, color: 0xaa1133, }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); renderer.render(scene, camera); function render() { document.addEventListener("mousemove", (event) => { let mouseX = event.clientX; let mouseY = event.clientY; cube.rotation.x = mouseY * 0.008; cube.rotation.y = mouseX * 0.0036; }); renderer.render(scene, camera); requestAnimationFrame(render); } requestAnimationFrame(render); const light = new THREE.SpotLight(0xff22aa, 300, 1000); light.position.set(1, 1, 10); light.angle = 0.1; light.penumbra = 10; scene.add(light); } main(); ``` e vamos aproveitar para atualizar nossa index.html ```html Meu primeiro 3D

Meu primeiro 3D

``` Espero que tenham gostado 🤙

imersive

Começando com Three.js, imersão com 3D no navegador

Join Our Newsletter. No Spam, Only the good stuff.