{"id":1265,"date":"2025-12-04T20:57:49","date_gmt":"2025-12-04T23:57:49","guid":{"rendered":"https:\/\/urutaudev.com.br\/?p=1265"},"modified":"2025-12-04T21:48:46","modified_gmt":"2025-12-05T00:48:46","slug":"what-can-you-create-with-threejs","status":"publish","type":"post","link":"https:\/\/urutaudev.com.br\/index.php\/2025\/12\/04\/what-can-you-create-with-threejs\/","title":{"rendered":"What can you create with Three.js"},"content":{"rendered":"

What can you create with Three.js<\/h2>\n

 <\/p>\n

\"What
What can you create with Three.js<\/figcaption><\/figure>\n

 <\/p>\n

\n

Introdu\u00e7\u00e3o<\/span><\/h2>\n

Game com Three.js, explorando um pouco desta lib que ajuda na cria\u00e7\u00e3o de games e anima\u00e7\u00f5es usando o Javascript e que roda no navegador.<\/p>\n

Este post \u00e9 apenas um pequeno exemplo de um script de um game 3D usando apenas Javascript com o aucilixo da lib do Three.js!
\nCom a biblioteca Three.js podemos transformar o navegador em um verdadeiro palco para experi\u00eancias 3D incr\u00edveis.
\nUsar o Three.js para fazer Games \u00e9 s\u00f3 um exemplo divertido de como a web pode ganhar vida com luzes, sombras e efeitos interativos, tudo em tempo real.<\/p>\n<\/section>\n

 <\/p>\n

Voc\u00ea pode visualizar o jogo no link abaixo:<\/span><\/strong><\/span><\/p>\n

Game Exemplo com TreeJs<\/a>\u00a0<\/span><\/strong><\/p>\n

\n

Scripts utilizado (html):<\/span><\/h2>\n
\n
\n
\n
\n

<\/code><\/code><\/p>\n

\n
<!DOCTYPE html><\/code><\/div>\n
<html lang=\"pt-BR\"><\/code><\/div>\n
<head><\/code><\/div>\n
\u00a0 \u00a0 <meta charset=\"UTF-8\"><\/code><\/div>\n
\u00a0 \u00a0 <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/code><\/div>\n
\u00a0 \u00a0 <title>O que voc\u00ea pode criar com Three.js \u2014 Experi\u00eancias 3D interativas na Web<\/title> \u00a0<\/code><\/div>\n
\u00a0 \u00a0 <link rel=\"stylesheet\" href=\"css\/you-create-with-threejs.css\"><\/code><\/div>\n
<\/head><\/code><\/div>\n
<body><\/code><\/div>\n
\u00a0 \u00a0 <div id=\"canvas-container\"><\/div><\/code><\/div>\n
\u00a0 \u00a0 <div class=\"overlay\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <div class=\"header\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"logo\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span>Experience<\/span><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span>Thoughts<\/span><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span>Designs<\/span><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <div class=\"content\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <h1 class=\"title\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 What can you create with <strong>Three.js<\/strong>?<br><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Do <strong class=\"impossible\">the Impossible<\/strong>!<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/h1><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <p class=\"description\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 With Three.js , Turn ideas into interactive experiences, where imagination becomes code and code becomes<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 reality.<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <div class=\"tags\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <a class=\"tag\">Html<\/a><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <a class=\"tag\">Javascript<\/a><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <a class=\"tag\">Treejs<\/a><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 <\/div><\/code><\/div>\n
<\/body><\/code><\/div>\n
<\/html><\/code><\/div>\n<\/div>\n

<\/code><\/code><\/p>\n<\/div>\n<\/div>\n<\/div>\n

<\/pre>\n<\/div>\n<\/section>\n
 <\/p>\n
Scripts utilizado (Javascript):<\/span><\/h2>\n
\n
<\/code><\/pre>\n
\n
\n
\u00a0 \u00a0 <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script><\/code><\/div>\n
\u00a0 \u00a0 <script><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 let scene, camera, renderer, head, particles;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 let mouseX = 0, mouseY = 0;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 let targetRotationX = 0, targetRotationY = 0;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 let isDragging = false;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 let previousMouseX = 0;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 let previousMouseY = 0;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 let cameraRotationY = 0;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 let cameraRotationX = 0;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 function init() {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ Scene<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 scene = new THREE.Scene();<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ Camera<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 camera = new THREE.PerspectiveCamera(75, window.innerWidth \/ window.innerHeight, 0.1, 1000);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 camera.position.z = 5;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ Renderer<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 renderer.setSize(window.innerWidth, window.innerHeight);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 renderer.setClearColor(0x000000, 0);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 document.getElementById('canvas-container').appendChild(renderer.domElement);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ Lighting<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 scene.add(ambientLight);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const directionalLight1 = new THREE.DirectionalLight(0xff6b6b, 1);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 directionalLight1.position.set(5, 5, 5);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 scene.add(directionalLight1);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const directionalLight2 = new THREE.DirectionalLight(0x4ecdc4, 0.8);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 directionalLight2.position.set(-5, -5, 5);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 scene.add(directionalLight2);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const pointLight = new THREE.PointLight(0xffd700, 2, 50);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 pointLight.position.set(0, 3, 2);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 scene.add(pointLight);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 createHead();<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 createParticles();<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 document.addEventListener('mousemove', onMouseMove, false);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 document.addEventListener('mousedown', onMouseDown, false);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 document.addEventListener('mouseup', onMouseUp, false);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 window.addEventListener('resize', onWindowResize, false);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 animate();<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 function createHead() {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const geometry = new THREE.SphereGeometry(1.5, 64, 64);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const positions = geometry.attributes.position;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 for (let i = 0; i < positions.count; i++) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const x = positions.getX(i);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const y = positions.getY(i);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const z = positions.getZ(i);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 positions.setY(i, y * 1.1);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if (z < 0) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 positions.setZ(i, z * 0.8);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const material = new THREE.MeshPhysicalMaterial({<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 color: 0x88ccff,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 metalness: 0.3,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 roughness: 0.1,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 transparent: true,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 opacity: 0.7,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 transmission: 0.5,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 thickness: 0.5,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 clearcoat: 1.0,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 clearcoatRoughness: 0.1,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 head = new THREE.Mesh(geometry, material);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 head.position.set(0.5, 0, 0);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 scene.add(head);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const brainGeometry = new THREE.SphereGeometry(1.2, 32, 32);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const brainMaterial = new THREE.MeshBasicMaterial({<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 color: 0xff9933,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 transparent: true,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 opacity: 0.6,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const brain = new THREE.Mesh(brainGeometry, brainMaterial);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 head.add(brain);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ Add glow effect<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const glowGeometry = new THREE.SphereGeometry(1.6, 32, 32);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const glowMaterial = new THREE.MeshBasicMaterial({<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 color: 0xff6600,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 transparent: true,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 opacity: 0.2,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 side: THREE.BackSide,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const glow = new THREE.Mesh(glowGeometry, glowMaterial);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 head.add(glow);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 function createParticles() {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const geometry = new THREE.BufferGeometry();<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const particlesCount = 1000;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const positions = new Float32Array(particlesCount * 3);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 for (let i = 0; i < particlesCount * 3; i++) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 positions[i] = (Math.random() - 0.5) * 20;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const material = new THREE.PointsMaterial({<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 color: 0xffffff,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 size: 0.05,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 transparent: true,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 opacity: 0.6,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 blending: THREE.AdditiveBlending,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 particles = new THREE.Points(geometry, material);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 scene.add(particles);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 function onMouseMove(event) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if (isDragging) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ Calculate mouse movement delta<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const deltaX = event.clientX - previousMouseX;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const deltaY = event.clientY - previousMouseY;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ Update camera rotation based on drag<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 cameraRotationY += deltaX * 0.005;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 cameraRotationX += deltaY * 0.005;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ Limit vertical rotation<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 cameraRotationX = Math.max(-Math.PI \/ 4, Math.min(Math.PI \/ 4, cameraRotationX));<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 previousMouseX = event.clientX;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 previousMouseY = event.clientY;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 } else {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ Normal mouse follow behavior for head<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 mouseX = (event.clientX \/ window.innerWidth) * 2 - 1;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 mouseY = -(event.clientY \/ window.innerHeight) * 2 + 1;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 targetRotationY = mouseX * 0.5;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 targetRotationX = mouseY * 0.3;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 function onMouseDown(event) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 isDragging = true;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 previousMouseX = event.clientX;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 previousMouseY = event.clientY;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 document.body.style.cursor = 'grabbing';<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 function onMouseUp() {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 isDragging = false;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 document.body.style.cursor = 'default';<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 function onWindowResize() {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 camera.aspect = window.innerWidth \/ window.innerHeight;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 camera.updateProjectionMatrix();<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 renderer.setSize(window.innerWidth, window.innerHeight);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 function animate() {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 requestAnimationFrame(animate);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ Update camera position based on rotation<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const radius = 5;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 camera.position.x = radius * Math.sin(cameraRotationY) * Math.cos(cameraRotationX);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 camera.position.y = radius * Math.sin(cameraRotationX);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 camera.position.z = radius * Math.cos(cameraRotationY) * Math.cos(cameraRotationX);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 camera.lookAt(0.5, 0, 0);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ Smooth rotation following mouse when not dragging<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if (head && !isDragging) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 head.rotation.y += (targetRotationY - head.rotation.y) * 0.05;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 head.rotation.x += (targetRotationX - head.rotation.x) * 0.05;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ Subtle floating animation<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 head.position.y = Math.sin(Date.now() * 0.001) * 0.1;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ Rotate particles slowly<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if (particles) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 particles.rotation.y += 0.0005;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 particles.rotation.x += 0.0002;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 renderer.render(scene, camera);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 init();<\/code><\/div>\n
\u00a0 \u00a0 <\/script><\/code><\/div>\n<\/div>\n<\/div>\n
\r\n<\/code><\/pre>\n<\/div>\n
 <\/p>\n
Voc\u00ea pode visualizar o jogo no link abaixo:<\/span><\/strong><\/span><\/p>\n
Site TreeJs<\/a>\u00a0<\/span><\/strong><\/p>\n
 <\/p>\n
Deixo aqui um v\u00eddeo curto:<\/span><\/strong><\/span><\/p>\n
 <\/p>\n
 <\/p>\n