{"id":1250,"date":"2025-11-13T00:17:49","date_gmt":"2025-11-13T03:17:49","guid":{"rendered":"https:\/\/urutaudev.com.br\/?p=1250"},"modified":"2025-11-13T21:27:50","modified_gmt":"2025-11-14T00:27:50","slug":"game-com-treejs","status":"publish","type":"post","link":"https:\/\/urutaudev.com.br\/index.php\/2025\/11\/13\/game-com-treejs\/","title":{"rendered":"Game Com TreeJs"},"content":{"rendered":"

Game Com TreeJs<\/h2>\n

 <\/p>\n

\"Game
Game Com TreeJs<\/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
<!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>Game Three Js - Testes<\/title><\/code><\/div>\n
\u00a0 \u00a0 <link rel=\"stylesheet\" href=\"\/css\/main.css\"><\/code><\/div>\n
<\/head><\/code><\/div>\n
<body><\/code><\/div>\n
\u00a0 \u00a0 <script type=\"module\" src=\"main.js\"><\/script><\/code><\/div>\n
<\/body><\/code><\/div>\n
<\/html><\/code><\/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
import * as THREE from \"three\";<\/code><\/div>\n
import { OrbitControls } from \"three\/addons\/controls\/OrbitControls.js\";<\/code><\/div>\n
import { FBXLoader } from \"three\/addons\/loaders\/FBXLoader.js\";<\/code><\/div>\n
import { GUI } from \"three\/addons\/libs\/lil-gui.module.min.js\";<\/code><\/div>\n
\/\/ ===================================<\/code><\/div>\n
\/\/ CONFIGURA\u00c7\u00d5ES GLOBAIS<\/code><\/div>\n
\/\/ ===================================<\/code><\/div>\n
const CONFIG = {<\/code><\/div>\n
\u00a0 \/\/ Movimento<\/code><\/div>\n
\u00a0 MOVEMENT_SPEED: 200,<\/code><\/div>\n
\u00a0 ROTATION_SPEED: 8,<\/code><\/div>\n
\u00a0 RUN_SPEED_MULTIPLIER: 1.5,<\/code><\/div>\n
\u00a0 \/\/ F\u00edsica do pulo<\/code><\/div>\n
\u00a0 JUMP_VELOCITY: 70,<\/code><\/div>\n
\u00a0 GRAVITY: -180,<\/code><\/div>\n
\u00a0 MAX_FALL_SPEED: -300,<\/code><\/div>\n
\u00a0 GROUND_LEVEL: 0,<\/code><\/div>\n
\u00a0 COYOTE_TIME: 0.15,<\/code><\/div>\n
\u00a0 \/\/ Anima\u00e7\u00e3o<\/code><\/div>\n
\u00a0 ANIMATION_FADE_DURATION: 0.15,<\/code><\/div>\n
\u00a0 JUMP_UP_THRESHOLD: 10,<\/code><\/div>\n
\u00a0 JUMP_DOWN_THRESHOLD: -10,<\/code><\/div>\n
\u00a0 \/\/ C\u00e2mera<\/code><\/div>\n
\u00a0 CAMERA_FOV: 65,<\/code><\/div>\n
\u00a0 CAMERA_DISTANCE: 280,<\/code><\/div>\n
\u00a0 CAMERA_HEIGHT: 140,<\/code><\/div>\n
\u00a0 CAMERA_FOLLOW_SMOOTHNESS: 0.08,<\/code><\/div>\n
\u00a0 \/\/ Visual<\/code><\/div>\n
\u00a0 MODEL_SCALE: 0.3,<\/code><\/div>\n
\u00a0 SHADOW_MAP_SIZE: 2048,<\/code><\/div>\n
\u00a0 \/\/ Sistema de Combate com F\u00edsica<\/code><\/div>\n
\u00a0 ATTACK: {<\/code><\/div>\n
\u00a0 \u00a0 PUNCH: {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 COOLDOWN: 0.5,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 MIN_RANGE: 20, \/\/ Dist\u00e2ncia m\u00ednima<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 MAX_RANGE: 100, \/\/ Dist\u00e2ncia m\u00e1xima<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 ANGLE: Math.PI \/ 3, \/\/ \u00c2ngulo do cone<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 FORCE: 250, \/\/ For\u00e7a do impulso<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 KNOCKBACK: 0.8, \/\/ Multiplicador de knockback<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 HIT_WINDOW: 0.25, \/\/ Quando o hit acontece<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 DURATION: 0.6,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 DAMAGE: 15,<\/code><\/div>\n
\u00a0 \u00a0 },<\/code><\/div>\n
\u00a0 \u00a0 KICK: {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 COOLDOWN: 0.8,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 MIN_RANGE: 30,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 MAX_RANGE: 140,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 ANGLE: Math.PI \/ 2.5,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 FORCE: 450,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 KNOCKBACK: 1.5,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 HIT_WINDOW: 0.35,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 DURATION: 0.9,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 DAMAGE: 25,<\/code><\/div>\n
\u00a0 \u00a0 },<\/code><\/div>\n
\u00a0 },<\/code><\/div>\n
\u00a0 \/\/ F\u00edsica dos objetos<\/code><\/div>\n
\u00a0 PHYSICS: {<\/code><\/div>\n
\u00a0 \u00a0 FRICTION: 0.92, \/\/ Atrito do ch\u00e3o<\/code><\/div>\n
\u00a0 \u00a0 AIR_RESISTANCE: 0.98, \/\/ Resist\u00eancia do ar<\/code><\/div>\n
\u00a0 \u00a0 BOUNCE: 0.3, \/\/ Qu\u00e3o el\u00e1stico \u00e9 o objeto<\/code><\/div>\n
\u00a0 \u00a0 ROTATION_DAMPING: 0.95, \/\/ Amortecimento da rota\u00e7\u00e3o<\/code><\/div>\n
\u00a0 \u00a0 MIN_VELOCITY: 0.01, \/\/ Velocidade m\u00ednima antes de parar<\/code><\/div>\n
\u00a0 },<\/code><\/div>\n
\u00a0 \/\/ Colis\u00e3o<\/code><\/div>\n
\u00a0 CHARACTER_RADIUS: 30, \/\/ Raio de colis\u00e3o do personagem<\/code><\/div>\n
\u00a0 OBJECT_RADIUS: 35, \/\/ Raio de colis\u00e3o dos cubos (metade da diagonal)<\/code><\/div>\n
};<\/code><\/div>\n
\/\/ ===================================<\/code><\/div>\n
\/\/ M\u00d3DULO: OBJETO COM F\u00cdSICA<\/code><\/div>\n
\/\/ ===================================<\/code><\/div>\n
class PhysicsObject {<\/code><\/div>\n
\u00a0 constructor(mesh) {<\/code><\/div>\n
\u00a0 \u00a0 this.mesh = mesh;<\/code><\/div>\n
\u00a0 \u00a0 this.velocity = new THREE.Vector3(0, 0, 0);<\/code><\/div>\n
\u00a0 \u00a0 this.angularVelocity = new THREE.Vector3(0, 0, 0);<\/code><\/div>\n
\u00a0 \u00a0 this.mass = 1.0;<\/code><\/div>\n
\u00a0 \u00a0 this.isGrounded = false;<\/code><\/div>\n
\u00a0 \u00a0 this.health = 100;<\/code><\/div>\n
\u00a0 \u00a0 this.maxHealth = 100;<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Cria barra de vida<\/code><\/div>\n
\u00a0 \u00a0 this.createHealthBar();<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 createHealthBar() {<\/code><\/div>\n
\u00a0 \u00a0 const barWidth = 60;<\/code><\/div>\n
\u00a0 \u00a0 const barHeight = 4;<\/code><\/div>\n
\u00a0 \u00a0 const canvas = document.createElement(\"canvas\");<\/code><\/div>\n
\u00a0 \u00a0 canvas.width = 128;<\/code><\/div>\n
\u00a0 \u00a0 canvas.height = 32;<\/code><\/div>\n
\u00a0 \u00a0 const ctx = canvas.getContext(\"2d\");<\/code><\/div>\n
\u00a0 \u00a0 const texture = new THREE.CanvasTexture(canvas);<\/code><\/div>\n
\u00a0 \u00a0 const material = new THREE.SpriteMaterial({ map: texture });<\/code><\/div>\n
\u00a0 \u00a0 this.healthBar = new THREE.Sprite(material);<\/code><\/div>\n
\u00a0 \u00a0 this.healthBar.scale.set(barWidth, barHeight, 1);<\/code><\/div>\n
\u00a0 \u00a0 this.mesh.add(this.healthBar);<\/code><\/div>\n
\u00a0 \u00a0 this.healthBar.position.set(0, 40, 0);<\/code><\/div>\n
\u00a0 \u00a0 this.healthBarCanvas = canvas;<\/code><\/div>\n
\u00a0 \u00a0 this.healthBarCtx = ctx;<\/code><\/div>\n
\u00a0 \u00a0 this.updateHealthBar();<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 updateHealthBar() {<\/code><\/div>\n
\u00a0 \u00a0 const ctx = this.healthBarCtx;<\/code><\/div>\n
\u00a0 \u00a0 const canvas = this.healthBarCanvas;<\/code><\/div>\n
\u00a0 \u00a0 ctx.clearRect(0, 0, canvas.width, canvas.height);<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Fundo<\/code><\/div>\n
\u00a0 \u00a0 ctx.fillStyle = \"rgba(0, 0, 0, 0.5)\";<\/code><\/div>\n
\u00a0 \u00a0 ctx.fillRect(0, 0, canvas.width, canvas.height);<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Barra de vida<\/code><\/div>\n
\u00a0 \u00a0 const healthPercent = this.health \/ this.maxHealth;<\/code><\/div>\n
\u00a0 \u00a0 const barWidth = canvas.width * healthPercent;<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Cor baseada na vida<\/code><\/div>\n
\u00a0 \u00a0 if (healthPercent > 0.6) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 ctx.fillStyle = \"#00ff00\";<\/code><\/div>\n
\u00a0 \u00a0 } else if (healthPercent > 0.3) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 ctx.fillStyle = \"#ffff00\";<\/code><\/div>\n
\u00a0 \u00a0 } else {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 ctx.fillStyle = \"#ff0000\";<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 ctx.fillRect(0, 0, barWidth, canvas.height);<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Borda<\/code><\/div>\n
\u00a0 \u00a0 ctx.strokeStyle = \"#ffffff\";<\/code><\/div>\n
\u00a0 \u00a0 ctx.lineWidth = 2;<\/code><\/div>\n
\u00a0 \u00a0 ctx.strokeRect(1, 1, canvas.width - 2, canvas.height - 2);<\/code><\/div>\n
\u00a0 \u00a0 this.healthBar.material.map.needsUpdate = true;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 applyForce(force, point) {<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Aplica for\u00e7a linear<\/code><\/div>\n
\u00a0 \u00a0 this.velocity.add(force.clone().multiplyScalar(1 \/ this.mass));<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Aplica torque (rota\u00e7\u00e3o) baseado no ponto de impacto<\/code><\/div>\n
\u00a0 \u00a0 const centerToPoint = point.clone().sub(this.mesh.position);<\/code><\/div>\n
\u00a0 \u00a0 const torque = new THREE.Vector3().crossVectors(centerToPoint, force);<\/code><\/div>\n
\u00a0 \u00a0 this.angularVelocity.add(torque.multiplyScalar(0.01 \/ this.mass));<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 takeDamage(amount) {<\/code><\/div>\n
\u00a0 \u00a0 this.health = Math.max(0, this.health - amount);<\/code><\/div>\n
\u00a0 \u00a0 this.updateHealthBar();<\/code><\/div>\n
\u00a0 \u00a0 if (this.health <= 0) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.onDestroy();<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 onDestroy() {<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Efeito de destrui\u00e7\u00e3o<\/code><\/div>\n
\u00a0 \u00a0 const material = this.mesh.material;<\/code><\/div>\n
\u00a0 \u00a0 const originalColor = material.color.clone();<\/code><\/div>\n
\u00a0 \u00a0 let opacity = 1;<\/code><\/div>\n
\u00a0 \u00a0 const fadeOut = () => {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 opacity -= 0.05;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 material.opacity = opacity;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 material.transparent = true;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 if (opacity > 0) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 requestAnimationFrame(fadeOut);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 } else {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.mesh.visible = false;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \/\/ Regenera ap\u00f3s 5 segundos<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 setTimeout(() => this.respawn(), 5000);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 };<\/code><\/div>\n
\u00a0 \u00a0 fadeOut();<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 respawn() {<\/code><\/div>\n
\u00a0 \u00a0 this.health = this.maxHealth;<\/code><\/div>\n
\u00a0 \u00a0 this.velocity.set(0, 0, 0);<\/code><\/div>\n
\u00a0 \u00a0 this.angularVelocity.set(0, 0, 0);<\/code><\/div>\n
\u00a0 \u00a0 this.mesh.material.opacity = 1;<\/code><\/div>\n
\u00a0 \u00a0 this.mesh.material.transparent = false;<\/code><\/div>\n
\u00a0 \u00a0 this.mesh.visible = true;<\/code><\/div>\n
\u00a0 \u00a0 this.mesh.rotation.set(0, 0, 0);<\/code><\/div>\n
\u00a0 \u00a0 this.updateHealthBar();<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 update(delta) {<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Aplica gravidade<\/code><\/div>\n
\u00a0 \u00a0 if (!this.isGrounded) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.velocity.y += CONFIG.GRAVITY * delta;<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Aplica velocidade<\/code><\/div>\n
\u00a0 \u00a0 this.mesh.position.add(this.velocity.clone().multiplyScalar(delta));<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Aplica rota\u00e7\u00e3o angular<\/code><\/div>\n
\u00a0 \u00a0 this.mesh.rotation.x += this.angularVelocity.x * delta;<\/code><\/div>\n
\u00a0 \u00a0 this.mesh.rotation.y += this.angularVelocity.y * delta;<\/code><\/div>\n
\u00a0 \u00a0 this.mesh.rotation.z += this.angularVelocity.z * delta;<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Colis\u00e3o com o ch\u00e3o<\/code><\/div>\n
\u00a0 \u00a0 const groundY = 25; \/\/ Altura do centro do cubo<\/code><\/div>\n
\u00a0 \u00a0 if (this.mesh.position.y <= groundY) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.mesh.position.y = groundY;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \/\/ Bounce<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 if (Math.abs(this.velocity.y) > 5) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.velocity.y *= -CONFIG.PHYSICS.BOUNCE;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 } else {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.velocity.y = 0;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.isGrounded = true;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 } else {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.isGrounded = false;<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Aplicar atrito<\/code><\/div>\n
\u00a0 \u00a0 if (this.isGrounded) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.velocity.x *= CONFIG.PHYSICS.FRICTION;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.velocity.z *= CONFIG.PHYSICS.FRICTION;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.angularVelocity.multiplyScalar(CONFIG.PHYSICS.ROTATION_DAMPING);<\/code><\/div>\n
\u00a0 \u00a0 } else {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \/\/ Resist\u00eancia do ar<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.velocity.x *= CONFIG.PHYSICS.AIR_RESISTANCE;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.velocity.z *= CONFIG.PHYSICS.AIR_RESISTANCE;<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Para o objeto se estiver muito devagar<\/code><\/div>\n
\u00a0 \u00a0 if (this.velocity.length() < CONFIG.PHYSICS.MIN_VELOCITY) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.velocity.set(0, this.velocity.y, 0);<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 if (this.angularVelocity.length() < 0.01) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.angularVelocity.set(0, 0, 0);<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Mant\u00e9m a barra de vida sempre virada para a c\u00e2mera<\/code><\/div>\n
\u00a0 \u00a0 if (this.healthBar) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.healthBar.quaternion.copy(this.mesh.quaternion);<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
}<\/code><\/div>\n
\/\/ ===================================<\/code><\/div>\n
\/\/ M\u00d3DULO: GERENCIADOR DE UI<\/code><\/div>\n
\/\/ ===================================<\/code><\/div>\n
class UIManager {<\/code><\/div>\n
\u00a0 constructor() {<\/code><\/div>\n
\u00a0 \u00a0 this.loadingScreen = null;<\/code><\/div>\n
\u00a0 \u00a0 this.combatFeedback = null;<\/code><\/div>\n
\u00a0 \u00a0 this.hitIndicator = null;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 createLoadingScreen() {<\/code><\/div>\n
\u00a0 \u00a0 const loader = document.createElement(\"div\");<\/code><\/div>\n
\u00a0 \u00a0 loader.id = \"loading-screen\";<\/code><\/div>\n
\u00a0 \u00a0 loader.style.cssText = `<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 position: fixed;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 top: 0;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 left: 0;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 width: 100%;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 height: 100%;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 display: flex;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 flex-direction: column;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 align-items: center;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 justify-content: center;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 color: white;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 font-family: Arial, sans-serif;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 z-index: 1000;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 transition: opacity 0.5s;<\/code><\/div>\n
\u00a0 \u00a0 `;<\/code><\/div>\n
\u00a0 \u00a0 loader.innerHTML = `<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 <div style=\"text-align: center;\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <h1 style=\"font-size: 3em; margin: 0; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);\">\u2694\ufe0f<\/h1><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <h2 style=\"margin: 20px 0;\">Sistema de Combate<\/h2><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <div id=\"loading-progress\" style=\"<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 width: 300px;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 height: 8px;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 background: rgba(255,255,255,0.2);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 border-radius: 10px;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 overflow: hidden;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 margin: 20px 0;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div id=\"loading-bar\" style=\"<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 width: 0%;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 height: 100%;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 background: white;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 transition: width 0.3s;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 border-radius: 10px;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \"><\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <p id=\"loading-text\" style=\"font-size: 0.9em; opacity: 0.8;\">Preparando ambiente...<\/p><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 `;<\/code><\/div>\n
\u00a0 \u00a0 document.body.appendChild(loader);<\/code><\/div>\n
\u00a0 \u00a0 this.loadingScreen = loader;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 updateLoadingProgress(percent, text) {<\/code><\/div>\n
\u00a0 \u00a0 const bar = document.getElementById(\"loading-bar\");<\/code><\/div>\n
\u00a0 \u00a0 const textEl = document.getElementById(\"loading-text\");<\/code><\/div>\n
\u00a0 \u00a0 if (bar) bar.style.width = `${percent}%`;<\/code><\/div>\n
\u00a0 \u00a0 if (textEl) textEl.textContent = text;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 hideLoadingScreen() {<\/code><\/div>\n
\u00a0 \u00a0 if (this.loadingScreen) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.loadingScreen.style.opacity = \"0\";<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 setTimeout(() => this.loadingScreen.remove(), 500);<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 createInstructions() {<\/code><\/div>\n
\u00a0 \u00a0 const instructions = document.createElement(\"div\");<\/code><\/div>\n
\u00a0 \u00a0 instructions.style.cssText = `<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 position: fixed;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 bottom: 20px;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 left: 50%;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 transform: translateX(-50%);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 background: rgba(0,0,0,0.8);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 color: white;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 padding: 20px 30px;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 border-radius: 15px;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 font-family: Arial, sans-serif;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 font-size: 14px;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 text-align: center;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 pointer-events: none;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 z-index: 100;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 box-shadow: 0 4px 20px rgba(0,0,0,0.5);<\/code><\/div>\n
\u00a0 \u00a0 `;<\/code><\/div>\n
\u00a0 \u00a0 instructions.innerHTML = `<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 <div style=\"margin-bottom: 10px; font-size: 18px; font-weight: bold;\">\u2694\ufe0f CONTROLES DE COMBATE<\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 15px; text-align: left;\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <div><strong>WASD\/Setas:<\/strong> Mover<\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <div><strong>ESPA\u00c7O:<\/strong> Pular<\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <div><strong>SHIFT:<\/strong> Correr<\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <div><strong>Mouse:<\/strong> C\u00e2mera<\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <div style=\"color: #ffdd57;\"><strong>J:<\/strong> Soco \ud83d\udc4a<\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <div style=\"color: #ff6b6b;\"><strong>K:<\/strong> Chute \ud83e\uddb5<\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 <div style=\"margin-top: 15px; font-size: 12px; opacity: 0.7;\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \ud83d\udca1 Aproxime-se dos cubos para acert\u00e1-los!<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 `;<\/code><\/div>\n
\u00a0 \u00a0 document.body.appendChild(instructions);<\/code><\/div>\n
\u00a0 \u00a0 setTimeout(() => {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 instructions.style.transition = \"opacity 1s\";<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 instructions.style.opacity = \"0\";<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 setTimeout(() => instructions.remove(), 1000);<\/code><\/div>\n
\u00a0 \u00a0 }, 15000);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 createCombatFeedback() {<\/code><\/div>\n
\u00a0 \u00a0 const feedback = document.createElement(\"div\");<\/code><\/div>\n
\u00a0 \u00a0 feedback.id = \"combat-feedback\";<\/code><\/div>\n
\u00a0 \u00a0 feedback.style.cssText = `<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 position: fixed;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 top: 50%;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 left: 50%;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 transform: translate(-50%, -50%);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 font-family: 'Arial Black', sans-serif;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 font-size: 64px;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 font-weight: bold;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 color: white;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 text-shadow:<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 3px 3px 0px rgba(0,0,0,0.8),<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 -1px -1px 0px rgba(0,0,0,0.8),<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 1px -1px 0px rgba(0,0,0,0.8),<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 -1px 1px 0px rgba(0,0,0,0.8);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 pointer-events: none;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 z-index: 200;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 opacity: 0;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 transition: all 0.1s;<\/code><\/div>\n
\u00a0 \u00a0 `;<\/code><\/div>\n
\u00a0 \u00a0 document.body.appendChild(feedback);<\/code><\/div>\n
\u00a0 \u00a0 this.combatFeedback = feedback;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 createHitIndicator() {<\/code><\/div>\n
\u00a0 \u00a0 const indicator = document.createElement(\"div\");<\/code><\/div>\n
\u00a0 \u00a0 indicator.id = \"hit-indicator\";<\/code><\/div>\n
\u00a0 \u00a0 indicator.style.cssText = `<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 position: fixed;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 top: 20px;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 right: 20px;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 background: rgba(0,0,0,0.8);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 color: white;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 padding: 15px 25px;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 border-radius: 10px;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 font-family: Arial, sans-serif;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 font-size: 16px;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 pointer-events: none;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 z-index: 150;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 display: none;<\/code><\/div>\n
\u00a0 \u00a0 `;<\/code><\/div>\n
\u00a0 \u00a0 document.body.appendChild(indicator);<\/code><\/div>\n
\u00a0 \u00a0 this.hitIndicator = indicator;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 showCombatHit(type, damage, distance, combo) {<\/code><\/div>\n
\u00a0 \u00a0 if (!this.combatFeedback) this.createCombatFeedback();<\/code><\/div>\n
\u00a0 \u00a0 const messages = {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 punch: [\"\ud83d\udca5 POW!\", \"\ud83d\udc4a BAM!\", \"\ud83d\udd25 HIT!\"],<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 kick: [\"\ud83d\udca5 BOOM!\", \"\ud83e\uddb5 CRASH!\", \"\u26a1 SMASH!\"],<\/code><\/div>\n
\u00a0 \u00a0 };<\/code><\/div>\n
\u00a0 \u00a0 const msg =<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 messages[type][Math.floor(Math.random() * messages[type].length)];<\/code><\/div>\n
\u00a0 \u00a0 this.combatFeedback.innerHTML = `<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 ${msg}<br><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 <span style=\"font-size: 32px;\">${damage} DMG<\/span><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 ${<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 combo > 1<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ? `<br><span style=\"font-size: 28px; color: #ffdd57;\">x${combo} COMBO!<\/span>`<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 : \"\"<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 `;<\/code><\/div>\n
\u00a0 \u00a0 this.combatFeedback.style.color = type === \"kick\" ? \"#ff6b6b\" : \"#ffdd57\";<\/code><\/div>\n
\u00a0 \u00a0 this.combatFeedback.style.opacity = \"1\";<\/code><\/div>\n
\u00a0 \u00a0 this.combatFeedback.style.transform = \"translate(-50%, -50%) scale(1.2)\";<\/code><\/div>\n
\u00a0 \u00a0 setTimeout(() => {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.combatFeedback.style.opacity = \"0\";<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.combatFeedback.style.transform = \"translate(-50%, -50%) scale(0.8)\";<\/code><\/div>\n
\u00a0 \u00a0 }, 600);<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Mostra indicador de dist\u00e2ncia<\/code><\/div>\n
\u00a0 \u00a0 this.showHitInfo(type, distance, combo);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 showCombatMiss(type, reason = \"\") {<\/code><\/div>\n
\u00a0 \u00a0 if (!this.combatFeedback) this.createCombatFeedback();<\/code><\/div>\n
\u00a0 \u00a0 const messages = {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \"too-far\": \"\ud83c\udfaf MUITO LONGE!\",<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \"too-close\": \"\u26a0\ufe0f MUITO PERTO!\",<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \"wrong-angle\": \"\u2194\ufe0f FORA DE ALCANCE!\",<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 default: type === \"punch\" ? \"\ud83d\udc4a ERROU...\" : \"\ud83e\uddb5 ERROU...\",<\/code><\/div>\n
\u00a0 \u00a0 };<\/code><\/div>\n
\u00a0 \u00a0 this.combatFeedback.textContent = messages[reason] || messages[\"default\"];<\/code><\/div>\n
\u00a0 \u00a0 this.combatFeedback.style.color = \"#888888\";<\/code><\/div>\n
\u00a0 \u00a0 this.combatFeedback.style.fontSize = \"48px\";<\/code><\/div>\n
\u00a0 \u00a0 this.combatFeedback.style.opacity = \"0.7\";<\/code><\/div>\n
\u00a0 \u00a0 this.combatFeedback.style.transform = \"translate(-50%, -50%) scale(1)\";<\/code><\/div>\n
\u00a0 \u00a0 setTimeout(() => {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.combatFeedback.style.opacity = \"0\";<\/code><\/div>\n
\u00a0 \u00a0 }, 400);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 showHitInfo(type, distance, combo) {<\/code><\/div>\n
\u00a0 \u00a0 if (!this.hitIndicator) this.createHitIndicator();<\/code><\/div>\n
\u00a0 \u00a0 this.hitIndicator.innerHTML = `<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 <div style=\"font-weight: bold; margin-bottom: 5px;\">${<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 type === \"punch\" ? \"\ud83d\udc4a SOCO\" : \"\ud83e\uddb5 CHUTE\"<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 }<\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 <div>Dist\u00e2ncia: ${Math.round(distance)}u<\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 ${combo > 1 ? `<div style=\"color: #ffdd57;\">Combo: x${combo}<\/div>` : \"\"}<\/code><\/div>\n
\u00a0 \u00a0 `;<\/code><\/div>\n
\u00a0 \u00a0 this.hitIndicator.style.display = \"block\";<\/code><\/div>\n
\u00a0 \u00a0 setTimeout(() => {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.hitIndicator.style.display = \"none\";<\/code><\/div>\n
\u00a0 \u00a0 }, 2000);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
}<\/code><\/div>\n
\/\/ ===================================<\/code><\/div>\n
\/\/ M\u00d3DULO: SISTEMA DE COMBATE<\/code><\/div>\n
\/\/ ===================================<\/code><\/div>\n
class CombatSystem {<\/code><\/div>\n
\u00a0 constructor(model, scene, uiManager) {<\/code><\/div>\n
\u00a0 \u00a0 this.model = model;<\/code><\/div>\n
\u00a0 \u00a0 this.scene = scene;<\/code><\/div>\n
\u00a0 \u00a0 this.ui = uiManager;<\/code><\/div>\n
\u00a0 \u00a0 this.attackState = {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 punch: { canAttack: true, cooldownTimer: 0 },<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 kick: { canAttack: true, cooldownTimer: 0 },<\/code><\/div>\n
\u00a0 \u00a0 };<\/code><\/div>\n
\u00a0 \u00a0 this.physicsObjects = [];<\/code><\/div>\n
\u00a0 \u00a0 this.comboCounter = 0;<\/code><\/div>\n
\u00a0 \u00a0 this.lastAttackTime = 0;<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Debug visual<\/code><\/div>\n
\u00a0 \u00a0 this.debugMesh = null;<\/code><\/div>\n
\u00a0 \u00a0 this.createDebugVisualization();<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 createDebugVisualization() {<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Cria um cone para visualizar o alcance do ataque (debug)<\/code><\/div>\n
\u00a0 \u00a0 const geometry = new THREE.ConeGeometry(1, 1, 16);<\/code><\/div>\n
\u00a0 \u00a0 const material = new THREE.MeshBasicMaterial({<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 color: 0x00ff00,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 transparent: true,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 opacity: 0.2,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 wireframe: true,<\/code><\/div>\n
\u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 \u00a0 this.debugMesh = new THREE.Mesh(geometry, material);<\/code><\/div>\n
\u00a0 \u00a0 this.debugMesh.visible = false;<\/code><\/div>\n
\u00a0 \u00a0 this.scene.add(this.debugMesh);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 addPhysicsObject(physicsObj) {<\/code><\/div>\n
\u00a0 \u00a0 this.physicsObjects.push(physicsObj);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 tryAttack(type, isJumping) {<\/code><\/div>\n
\u00a0 \u00a0 if (!this.model || isJumping) return false;<\/code><\/div>\n
\u00a0 \u00a0 const state = this.attackState[type];<\/code><\/div>\n
\u00a0 \u00a0 if (!state || !state.canAttack) return false;<\/code><\/div>\n
\u00a0 \u00a0 const config = CONFIG.ATTACK[type.toUpperCase()];<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Bloqueia novo ataque<\/code><\/div>\n
\u00a0 \u00a0 state.canAttack = false;<\/code><\/div>\n
\u00a0 \u00a0 state.cooldownTimer = config.COOLDOWN;<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Atualiza combo<\/code><\/div>\n
\u00a0 \u00a0 const now = Date.now();<\/code><\/div>\n
\u00a0 \u00a0 if (now - this.lastAttackTime < 1500) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.comboCounter++;<\/code><\/div>\n
\u00a0 \u00a0 } else {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.comboCounter = 1;<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 this.lastAttackTime = now;<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Agenda o hit no momento apropriado da anima\u00e7\u00e3o<\/code><\/div>\n
\u00a0 \u00a0 setTimeout(<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 () => this.performAttack(type, config),<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 config.HIT_WINDOW * 1000<\/code><\/div>\n
\u00a0 \u00a0 );<\/code><\/div>\n
\u00a0 \u00a0 return true;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 performAttack(type, config) {<\/code><\/div>\n
\u00a0 \u00a0 if (!this.model) return;<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Posi\u00e7\u00e3o e dire\u00e7\u00e3o do personagem<\/code><\/div>\n
\u00a0 \u00a0 const yaw = this.model.rotation.y;<\/code><\/div>\n
\u00a0 \u00a0 const forward = new THREE.Vector3(Math.sin(yaw), 0, Math.cos(yaw));<\/code><\/div>\n
\u00a0 \u00a0 const origin = this.model.position.clone();<\/code><\/div>\n
\u00a0 \u00a0 origin.y += 50; \/\/ Altura aproximada do soco\/chute<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Detecta hits<\/code><\/div>\n
\u00a0 \u00a0 const result = this.detectHits(origin, forward, config);<\/code><\/div>\n
\u00a0 \u00a0 if (result.hits.length > 0) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 result.hits.forEach((hit) => {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.applyHitEffects(hit, config, type);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 const firstHit = result.hits[0];<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.ui.showCombatHit(<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 type,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 config.DAMAGE * this.comboCounter,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 firstHit.distance,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.comboCounter<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 );<\/code><\/div>\n
\u00a0 \u00a0 } else {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.ui.showCombatMiss(type, result.reason);<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Visualiza\u00e7\u00e3o debug (tempor\u00e1ria)<\/code><\/div>\n
\u00a0 \u00a0 this.showDebugVisualization(<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 origin,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 forward,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 config,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 result.hits.length > 0<\/code><\/div>\n
\u00a0 \u00a0 );<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 detectHits(origin, forward, config) {<\/code><\/div>\n
\u00a0 \u00a0 const hits = [];<\/code><\/div>\n
\u00a0 \u00a0 let closestDistance = Infinity;<\/code><\/div>\n
\u00a0 \u00a0 let reason = \"default\";<\/code><\/div>\n
\u00a0 \u00a0 this.physicsObjects.forEach((physObj) => {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 if (!physObj.mesh.visible) return;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 const toObj = physObj.mesh.position.clone().sub(origin);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 const horizontal = new THREE.Vector3(toObj.x, 0, toObj.z);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 const dist = horizontal.length();<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \/\/ Verifica dist\u00e2ncia m\u00ednima<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 if (dist < config.MIN_RANGE) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 if (dist < closestDistance) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 closestDistance = dist;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 reason = \"too-close\";<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 return;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \/\/ Verifica dist\u00e2ncia m\u00e1xima<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 if (dist > config.MAX_RANGE) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 if (dist < closestDistance) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 closestDistance = dist;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 reason = \"too-far\";<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 return;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \/\/ Verifica \u00e2ngulo<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 const angle = Math.acos(<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 Math.max(-1, Math.min(1, forward.dot(horizontal.normalize())))<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 );<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 if (angle > config.ANGLE \/ 2) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 if (dist < closestDistance) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 closestDistance = dist;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 reason = \"wrong-angle\";<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 return;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \/\/ Hit v\u00e1lido!<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 hits.push({<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 physicsObject: physObj,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 distance: dist,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 direction: horizontal.normalize(),<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 angle: angle,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 impactPoint: physObj.mesh.position.clone(),<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Ordena por dist\u00e2ncia (mais pr\u00f3ximo primeiro)<\/code><\/div>\n
\u00a0 \u00a0 hits.sort((a, b) => a.distance - b.distance);<\/code><\/div>\n
\u00a0 \u00a0 return { hits, reason };<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 applyHitEffects(hit, config, type) {<\/code><\/div>\n
\u00a0 \u00a0 const { physicsObject, distance, direction, impactPoint } = hit;<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Calcula for\u00e7a baseada na dist\u00e2ncia (mais perto = mais for\u00e7a)<\/code><\/div>\n
\u00a0 \u00a0 const distanceFactor =<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 1 - (distance - config.MIN_RANGE) \/ (config.MAX_RANGE - config.MIN_RANGE);<\/code><\/div>\n
\u00a0 \u00a0 const comboMultiplier = 1.0 + (this.comboCounter - 1) * 0.3;<\/code><\/div>\n
\u00a0 \u00a0 const totalForce =<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 config.FORCE * config.KNOCKBACK * distanceFactor * comboMultiplier;<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Aplica for\u00e7a com componente vertical<\/code><\/div>\n
\u00a0 \u00a0 const forceVector = direction.clone().multiplyScalar(totalForce);<\/code><\/div>\n
\u00a0 \u00a0 forceVector.y = totalForce * 0.4; \/\/ Lan\u00e7a o objeto para cima<\/code><\/div>\n
\u00a0 \u00a0 physicsObject.applyForce(forceVector, impactPoint);<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Aplica dano<\/code><\/div>\n
\u00a0 \u00a0 const damage = Math.round(config.DAMAGE * comboMultiplier);<\/code><\/div>\n
\u00a0 \u00a0 physicsObject.takeDamage(damage);<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Efeito visual de impacto<\/code><\/div>\n
\u00a0 \u00a0 this.createImpactEffect(impactPoint, type);<\/code><\/div>\n
\u00a0 \u00a0 console.log(<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 `\ud83d\udca5 ${type.toUpperCase()} | Dist: ${Math.round(<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 distance<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 )}u | For\u00e7a: ${Math.round(totalForce)} | DMG: ${damage} | Combo: x${<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.comboCounter<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 }`<\/code><\/div>\n
\u00a0 \u00a0 );<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 createImpactEffect(position, type) {<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Cria part\u00edculas no ponto de impacto<\/code><\/div>\n
\u00a0 \u00a0 const particleCount = 15;<\/code><\/div>\n
\u00a0 \u00a0 const geometry = new THREE.SphereGeometry(2, 4, 4);<\/code><\/div>\n
\u00a0 \u00a0 const color = type === \"kick\" ? 0xff6b6b : 0xffdd57;<\/code><\/div>\n
\u00a0 \u00a0 const material = new THREE.MeshBasicMaterial({ color: color });<\/code><\/div>\n
\u00a0 \u00a0 for (let i = 0; i < particleCount; i++) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 const particle = new THREE.Mesh(geometry, material.clone());<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 particle.position.copy(position);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 const velocity = new THREE.Vector3(<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 (Math.random() - 0.5) * 100,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 Math.random() * 80 + 40,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 (Math.random() - 0.5) * 100<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 );<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.scene.add(particle);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \/\/ Anima part\u00edcula<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 const startTime = Date.now();<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 const animate = () => {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 const elapsed = (Date.now() - startTime) \/ 1000;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 if (elapsed < 0.5) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 particle.position.add(velocity.clone().multiplyScalar(0.016));<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 velocity.y -= 300 * 0.016; \/\/ Gravidade<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 particle.scale.multiplyScalar(0.95);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 particle.material.opacity = 1 - elapsed * 2;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 particle.material.transparent = true;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 requestAnimationFrame(animate);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 } else {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 this.scene.remove(particle);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 particle.geometry.dispose();<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 particle.material.dispose();<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 };<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 animate();<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 showDebugVisualization(origin, forward, config, hit) {<\/code><\/div>\n
\u00a0 \u00a0 if (!this.debugMesh) return;<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Configura o cone de debug<\/code><\/div>\n
\u00a0 \u00a0 const radius = Math.tan(config.ANGLE \/ 2) * config.MAX_RANGE;<\/code><\/div>\n
\u00a0 \u00a0 this.debugMesh.scale.set(radius, config.MAX_RANGE, radius);<\/code><\/div>\n
\u00a0 \u00a0 this.debugMesh.position.copy(origin);<\/code><\/div>\n
\u00a0 \u00a0 this.debugMesh.rotation.x = Math.PI \/ 2;<\/code><\/div>\n
\u00a0 \u00a0 this.debugMesh.rotation.z = -Math.atan2(forward.x, forward.z);<\/code><\/div>\n
\u00a0 \u00a0 this.debugMesh.material.color.setHex(hit ? 0x00ff00 : 0xff0000);<\/code><\/div>\n
\u00a0 \u00a0 this.debugMesh.visible = true;<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Esconde ap\u00f3s 200ms<\/code><\/div>\n
\u00a0 \u00a0 setTimeout(() => {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 if (this.debugMesh) this.debugMesh.visible = false;<\/code><\/div>\n
\u00a0 \u00a0 }, 200);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 update(delta) {<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Atualiza cooldowns<\/code><\/div>\n
\u00a0 \u00a0 Object.keys(this.attackState).forEach((type) => {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 const state = this.attackState[type];<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 if (state.cooldownTimer > 0) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 state.cooldownTimer -= delta;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 if (state.cooldownTimer <= 0) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 state.cooldownTimer = 0;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 state.canAttack = true;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Reset combo<\/code><\/div>\n
\u00a0 \u00a0 if (Date.now() - this.lastAttackTime > 2000) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.comboCounter = 0;<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Atualiza f\u00edsica dos objetos<\/code><\/div>\n
\u00a0 \u00a0 this.physicsObjects.forEach((physObj) => {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 physObj.update(delta);<\/code><\/div>\n
\u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
}<\/code><\/div>\n
\/\/ ===================================<\/code><\/div>\n
\/\/ M\u00d3DULO: GERENCIADOR DE ANIMA\u00c7\u00d5ES<\/code><\/div>\n
\/\/ ===================================<\/code><\/div>\n
class AnimationManager {<\/code><\/div>\n
\u00a0 constructor(mixer) {<\/code><\/div>\n
\u00a0 \u00a0 this.mixer = mixer;<\/code><\/div>\n
\u00a0 \u00a0 this.actions = {};<\/code><\/div>\n
\u00a0 \u00a0 this.activeAction = null;<\/code><\/div>\n
\u00a0 \u00a0 this.currentActionName = \"\";<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 addAction(name, clip) {<\/code><\/div>\n
\u00a0 \u00a0 this.actions[name] = this.mixer.clipAction(clip);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 play(name, loop = true) {<\/code><\/div>\n
\u00a0 \u00a0 if (!this.actions[name] || this.currentActionName === name) return;<\/code><\/div>\n
\u00a0 \u00a0 const newAction = this.actions[name];<\/code><\/div>\n
\u00a0 \u00a0 if (loop) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 newAction.loop = THREE.LoopRepeat;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 newAction.clampWhenFinished = false;<\/code><\/div>\n
\u00a0 \u00a0 } else {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 newAction.loop = THREE.LoopOnce;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 newAction.clampWhenFinished = true;<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 if (this.activeAction && this.activeAction !== newAction) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.activeAction.fadeOut(CONFIG.ANIMATION_FADE_DURATION);<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 newAction.reset().fadeIn(CONFIG.ANIMATION_FADE_DURATION).play();<\/code><\/div>\n
\u00a0 \u00a0 this.activeAction = newAction;<\/code><\/div>\n
\u00a0 \u00a0 this.currentActionName = name;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 findAndPlay(partialName, loop = true) {<\/code><\/div>\n
\u00a0 \u00a0 const name = Object.keys(this.actions).find((k) =><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 k.toLowerCase().includes(partialName.toLowerCase())<\/code><\/div>\n
\u00a0 \u00a0 );<\/code><\/div>\n
\u00a0 \u00a0 if (name) this.play(name, loop);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 update(delta) {<\/code><\/div>\n
\u00a0 \u00a0 if (this.mixer) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.mixer.update(delta);<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 getActionNames() {<\/code><\/div>\n
\u00a0 \u00a0 return Object.keys(this.actions);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 setSpeed(speed) {<\/code><\/div>\n
\u00a0 \u00a0 if (this.mixer) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.mixer.timeScale = speed;<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
}<\/code><\/div>\n
\/\/ ===================================<\/code><\/div>\n
\/\/ CONTROLADOR PRINCIPAL<\/code><\/div>\n
\/\/ ===================================<\/code><\/div>\n
class CharacterController {<\/code><\/div>\n
\u00a0 constructor() {<\/code><\/div>\n
\u00a0 \u00a0 this.ui = new UIManager();<\/code><\/div>\n
\u00a0 \u00a0 this.ui.createLoadingScreen();<\/code><\/div>\n
\u00a0 \u00a0 this.initScene();<\/code><\/div>\n
\u00a0 \u00a0 this.initLights();<\/code><\/div>\n
\u00a0 \u00a0 this.initGround();<\/code><\/div>\n
\u00a0 \u00a0 this.initControls();<\/code><\/div>\n
\u00a0 \u00a0 this.initInput();<\/code><\/div>\n
\u00a0 \u00a0 this.loader = new FBXLoader();<\/code><\/div>\n
\u00a0 \u00a0 this.clock = new THREE.Clock();<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Estado do personagem<\/code><\/div>\n
\u00a0 \u00a0 this.model = null;<\/code><\/div>\n
\u00a0 \u00a0 this.mixer = null;<\/code><\/div>\n
\u00a0 \u00a0 this.animManager = null;<\/code><\/div>\n
\u00a0 \u00a0 this.combatSystem = null;<\/code><\/div>\n
\u00a0 \u00a0 \/\/ F\u00edsica<\/code><\/div>\n
\u00a0 \u00a0 this.velocity = new THREE.Vector3(0, 0, 0);<\/code><\/div>\n
\u00a0 \u00a0 this.isOnGround = true;<\/code><\/div>\n
\u00a0 \u00a0 this.isJumping = false;<\/code><\/div>\n
\u00a0 \u00a0 this.coyoteTimer = 0;<\/code><\/div>\n
\u00a0 \u00a0 this.jumpPhase = \"none\";<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Input<\/code><\/div>\n
\u00a0 \u00a0 this.keys = {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 forward: false,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 backward: false,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 left: false,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 right: false,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 jump: false,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 run: false,<\/code><\/div>\n
\u00a0 \u00a0 };<\/code><\/div>\n
\u00a0 \u00a0 \/\/ C\u00e2mera<\/code><\/div>\n
\u00a0 \u00a0 this.cameraOffset = new THREE.Vector3(<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 0,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 CONFIG.CAMERA_HEIGHT,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 CONFIG.CAMERA_DISTANCE<\/code><\/div>\n
\u00a0 \u00a0 );<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Colis\u00e3o<\/code><\/div>\n
\u00a0 \u00a0 this.collidableObjects = [];<\/code><\/div>\n
\u00a0 \u00a0 this.gui = null;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 initScene() {<\/code><\/div>\n
\u00a0 \u00a0 this.scene = new THREE.Scene();<\/code><\/div>\n
\u00a0 \u00a0 this.scene.background = new THREE.Color(0x87ceeb);<\/code><\/div>\n
\u00a0 \u00a0 this.scene.fog = new THREE.Fog(0x87ceeb, 600, 1200);<\/code><\/div>\n
\u00a0 \u00a0 this.camera = new THREE.PerspectiveCamera(<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 CONFIG.CAMERA_FOV,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 window.innerWidth \/ window.innerHeight,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 0.1,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 2000<\/code><\/div>\n
\u00a0 \u00a0 );<\/code><\/div>\n
\u00a0 \u00a0 this.camera.position.set(0, CONFIG.CAMERA_HEIGHT, CONFIG.CAMERA_DISTANCE);<\/code><\/div>\n
\u00a0 \u00a0 this.renderer = new THREE.WebGLRenderer({<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 antialias: true,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 powerPreference: \"high-performance\",<\/code><\/div>\n
\u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 \u00a0 this.renderer.setSize(window.innerWidth, window.innerHeight);<\/code><\/div>\n
\u00a0 \u00a0 this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));<\/code><\/div>\n
\u00a0 \u00a0 this.renderer.shadowMap.enabled = true;<\/code><\/div>\n
\u00a0 \u00a0 this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;<\/code><\/div>\n
\u00a0 \u00a0 this.renderer.outputColorSpace = THREE.SRGBColorSpace;<\/code><\/div>\n
\u00a0 \u00a0 document.body.appendChild(this.renderer.domElement);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 initLights() {<\/code><\/div>\n
\u00a0 \u00a0 this.dirLight = new THREE.DirectionalLight(0xffffff, 3);<\/code><\/div>\n
\u00a0 \u00a0 this.dirLight.position.set(150, 250, 100);<\/code><\/div>\n
\u00a0 \u00a0 this.dirLight.castShadow = true;<\/code><\/div>\n
\u00a0 \u00a0 const shadowCam = this.dirLight.shadow.camera;<\/code><\/div>\n
\u00a0 \u00a0 shadowCam.top = shadowCam.right = 400;<\/code><\/div>\n
\u00a0 \u00a0 shadowCam.bottom = shadowCam.left = -400;<\/code><\/div>\n
\u00a0 \u00a0 shadowCam.near = 0.1;<\/code><\/div>\n
\u00a0 \u00a0 shadowCam.far = 600;<\/code><\/div>\n
\u00a0 \u00a0 this.dirLight.shadow.mapSize.set(<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 CONFIG.SHADOW_MAP_SIZE,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 CONFIG.SHADOW_MAP_SIZE<\/code><\/div>\n
\u00a0 \u00a0 );<\/code><\/div>\n
\u00a0 \u00a0 this.dirLight.shadow.bias = -0.0001;<\/code><\/div>\n
\u00a0 \u00a0 this.dirLight.shadow.radius = 2;<\/code><\/div>\n
\u00a0 \u00a0 this.scene.add(this.dirLight);<\/code><\/div>\n
\u00a0 \u00a0 const ambient = new THREE.AmbientLight(0x666666, 2);<\/code><\/div>\n
\u00a0 \u00a0 this.scene.add(ambient);<\/code><\/div>\n
\u00a0 \u00a0 const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 1.5);<\/code><\/div>\n
\u00a0 \u00a0 hemiLight.position.set(0, 300, 0);<\/code><\/div>\n
\u00a0 \u00a0 this.scene.add(hemiLight);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 initGround() {<\/code><\/div>\n
\u00a0 \u00a0 const groundGeometry = new THREE.PlaneGeometry(2000, 2000);<\/code><\/div>\n
\u00a0 \u00a0 const groundMaterial = new THREE.MeshStandardMaterial({<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 color: 0x558855,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 roughness: 0.8,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 metalness: 0.2,<\/code><\/div>\n
\u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 \u00a0 this.ground = new THREE.Mesh(groundGeometry, groundMaterial);<\/code><\/div>\n
\u00a0 \u00a0 this.ground.rotation.x = -Math.PI \/ 2;<\/code><\/div>\n
\u00a0 \u00a0 this.ground.receiveShadow = true;<\/code><\/div>\n
\u00a0 \u00a0 this.scene.add(this.ground);<\/code><\/div>\n
\u00a0 \u00a0 this.gridHelper = new THREE.GridHelper(2000, 100, 0x888888, 0x444444);<\/code><\/div>\n
\u00a0 \u00a0 this.gridHelper.position.y = 0.1;<\/code><\/div>\n
\u00a0 \u00a0 this.scene.add(this.gridHelper);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 createEnvironmentObjects() {<\/code><\/div>\n
\u00a0 \u00a0 const cubeGeometry = new THREE.BoxGeometry(50, 50, 50);<\/code><\/div>\n
\u00a0 \u00a0 const positions = [<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 [200, 25, 0],<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 [-200, 25, 0],<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 [0, 25, 200],<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 [0, 25, -200],<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 [200, 25, 200],<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 [-200, 25, -200],<\/code><\/div>\n
\u00a0 \u00a0 ];<\/code><\/div>\n
\u00a0 \u00a0 positions.forEach((pos, i) => {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 const material = new THREE.MeshStandardMaterial({<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 color: new THREE.Color().setHSL(i \/ positions.length, 0.7, 0.5),<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 roughness: 0.5,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 metalness: 0.3,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 const cube = new THREE.Mesh(cubeGeometry, material);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 cube.position.set(...pos);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 cube.castShadow = true;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 cube.receiveShadow = true;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.scene.add(cube);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \/\/ Adiciona f\u00edsica ao cubo<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 const physicsObj = new PhysicsObject(cube);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.combatSystem.addPhysicsObject(physicsObj);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \/\/ Adiciona \u00e0 lista de objetos colid\u00edveis<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.collidableObjects.push({<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 mesh: cube,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 radius: CONFIG.OBJECT_RADIUS,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 initControls() {<\/code><\/div>\n
\u00a0 \u00a0 this.controls = new OrbitControls(this.camera, this.renderer.domElement);<\/code><\/div>\n
\u00a0 \u00a0 this.controls.enableDamping = true;<\/code><\/div>\n
\u00a0 \u00a0 this.controls.dampingFactor = 0.05;<\/code><\/div>\n
\u00a0 \u00a0 this.controls.target.set(0, 100, 0);<\/code><\/div>\n
\u00a0 \u00a0 this.controls.minDistance = 150;<\/code><\/div>\n
\u00a0 \u00a0 this.controls.maxDistance = 600;<\/code><\/div>\n
\u00a0 \u00a0 this.controls.maxPolarAngle = Math.PI \/ 2 - 0.05;<\/code><\/div>\n
\u00a0 \u00a0 this.controls.enablePan = false;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 initInput() {<\/code><\/div>\n
\u00a0 \u00a0 document.addEventListener(\"keydown\", (e) => this.onKeyDown(e));<\/code><\/div>\n
\u00a0 \u00a0 document.addEventListener(\"keyup\", (e) => this.onKeyUp(e));<\/code><\/div>\n
\u00a0 \u00a0 window.addEventListener(\"resize\", () => this.onResize());<\/code><\/div>\n
\u00a0 \u00a0 this.ui.createInstructions();<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 onKeyDown(e) {<\/code><\/div>\n
\u00a0 \u00a0 if (e.repeat) return;<\/code><\/div>\n
\u00a0 \u00a0 switch (e.code) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 case \"KeyW\":<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 case \"ArrowUp\":<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.keys.forward = true;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 break;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 case \"KeyS\":<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 case \"ArrowDown\":<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.keys.backward = true;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 break;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 case \"KeyA\":<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 case \"ArrowLeft\":<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.keys.left = true;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 break;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 case \"KeyD\":<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 case \"ArrowRight\":<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.keys.right = true;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 break;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 case \"Space\":<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 e.preventDefault();<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.keys.jump = true;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 break;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 case \"ShiftLeft\":<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 case \"ShiftRight\":<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.keys.run = true;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 break;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 case \"KeyR\":<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.resetPosition();<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 break;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 case \"KeyJ\":<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.attack(\"punch\");<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 break;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 case \"KeyK\":<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.attack(\"kick\");<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 break;<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 onKeyUp(e) {<\/code><\/div>\n
\u00a0 \u00a0 switch (e.code) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 case \"KeyW\":<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 case \"ArrowUp\":<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.keys.forward = false;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 break;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 case \"KeyS\":<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 case \"ArrowDown\":<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.keys.backward = false;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 break;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 case \"KeyA\":<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 case \"ArrowLeft\":<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.keys.left = false;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 break;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 case \"KeyD\":<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 case \"ArrowRight\":<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.keys.right = false;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 break;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 case \"Space\":<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.keys.jump = false;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 break;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 case \"ShiftLeft\":<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 case \"ShiftRight\":<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.keys.run = false;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 break;<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 onResize() {<\/code><\/div>\n
\u00a0 \u00a0 this.camera.aspect = window.innerWidth \/ window.innerHeight;<\/code><\/div>\n
\u00a0 \u00a0 this.camera.updateProjectionMatrix();<\/code><\/div>\n
\u00a0 \u00a0 this.renderer.setSize(window.innerWidth, window.innerHeight);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 attack(type) {<\/code><\/div>\n
\u00a0 \u00a0 if (!this.combatSystem) return;<\/code><\/div>\n
\u00a0 \u00a0 const success = this.combatSystem.tryAttack(type, this.isJumping);<\/code><\/div>\n
\u00a0 \u00a0 if (success) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.animManager.findAndPlay(type, false);<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 async loadFBX(filename) {<\/code><\/div>\n
\u00a0 \u00a0 return new Promise((resolve, reject) => {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.loader.load(<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 `.\/models\/${filename}`,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 (obj) => resolve(obj),<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 (xhr) => {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const percent = (xhr.loaded \/ xhr.total) * 100;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log(`\ud83d\udce6 ${filename}: ${percent.toFixed(0)}%`);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 },<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 (err) => reject(err)<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 );<\/code><\/div>\n
\u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 async loadModelAndAnimations() {<\/code><\/div>\n
\u00a0 \u00a0 const animationFiles = [<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \"Idle.fbx\",<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \"Jumping.fbx\",<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \"jumping-down.fbx\",<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \"running.fbx\",<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \"punch.fbx\",<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \"kick.fbx\",<\/code><\/div>\n
\u00a0 \u00a0 ];<\/code><\/div>\n
\u00a0 \u00a0 try {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.ui.updateLoadingProgress(10, \"Carregando modelo principal...\");<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 const mainModel = await this.loadFBX(animationFiles[0]);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 mainModel.scale.setScalar(CONFIG.MODEL_SCALE);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 mainModel.traverse((child) => {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 if (child.isMesh) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 child.castShadow = true;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 child.receiveShadow = true;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if (child.material) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 child.material.needsUpdate = true;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 child.material.side = THREE.FrontSide;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.scene.add(mainModel);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.model = mainModel;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.mixer = new THREE.AnimationMixer(this.model);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.animManager = new AnimationManager(this.mixer);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.combatSystem = new CombatSystem(this.model, this.scene, this.ui);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.ui.updateLoadingProgress(30, \"Configurando anima\u00e7\u00f5es...\");<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 if (mainModel.animations?.length > 0) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 const clip = mainModel.animations[0];<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 const clipName = this.getClipName(animationFiles[0], clip, 0);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.animManager.addAction(clipName, clip);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 const progressStep = 50 \/ animationFiles.length;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 for (let i = 1; i < animationFiles.length; i++) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 const filename = animationFiles[i];<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.ui.updateLoadingProgress(<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 30 + progressStep * i,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 `Carregando ${filename}...`<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 );<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 const obj = await this.loadFBX(filename);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 if (obj.animations?.length > 0) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const clip = obj.animations[0];<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const clipName = this.getClipName(filename, clip, i);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 this.animManager.addAction(clipName, clip);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \/\/ Cria objetos com f\u00edsica DEPOIS do combatSystem estar pronto<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.createEnvironmentObjects();<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.ui.updateLoadingProgress(90, \"Finalizando...\");<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.setupGUI();<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.ui.updateLoadingProgress(100, \"Pronto!\");<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 setTimeout(() => this.ui.hideLoadingScreen(), 500);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 console.log(\"\ud83c\udf89 Sistema de combate carregado!\");<\/code><\/div>\n
\u00a0 \u00a0 } catch (err) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 console.error(\"\u274c Erro ao carregar assets:\", err);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.ui.updateLoadingProgress(<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 0,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \"Erro ao carregar! Verifique o console.\"<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 );<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 getClipName(filename, clip, index) {<\/code><\/div>\n
\u00a0 \u00a0 const baseName = filename.replace(\".fbx\", \"\");<\/code><\/div>\n
\u00a0 \u00a0 return `${baseName}_${clip.name || `Anim_${index}`}`;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 updateJumpAnimation() {<\/code><\/div>\n
\u00a0 \u00a0 if (!this.model || !this.animManager) return;<\/code><\/div>\n
\u00a0 \u00a0 const velocityY = this.velocity.y;<\/code><\/div>\n
\u00a0 \u00a0 if (velocityY > CONFIG.JUMP_UP_THRESHOLD && this.jumpPhase !== \"rising\") {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.jumpPhase = \"rising\";<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.animManager.findAndPlay(\"jumping\", false);<\/code><\/div>\n
\u00a0 \u00a0 } else if (<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 velocityY < CONFIG.JUMP_DOWN_THRESHOLD &&<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.jumpPhase !== \"falling\"<\/code><\/div>\n
\u00a0 \u00a0 ) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.jumpPhase = \"falling\";<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.animManager.findAndPlay(\"jumping-down\", false);<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 tryJump() {<\/code><\/div>\n
\u00a0 \u00a0 const canJump =<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 (this.isOnGround || this.coyoteTimer > 0) && !this.isJumping;<\/code><\/div>\n
\u00a0 \u00a0 if (canJump) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.velocity.y = CONFIG.JUMP_VELOCITY;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.isOnGround = false;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.isJumping = true;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.jumpPhase = \"rising\";<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.coyoteTimer = 0;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.animManager.findAndPlay(\"jumping\", false);<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 updateMovement(delta) {<\/code><\/div>\n
\u00a0 \u00a0 if (!this.model) return;<\/code><\/div>\n
\u00a0 \u00a0 if (!this.isOnGround && this.coyoteTimer > 0) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.coyoteTimer -= delta;<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Aplicar gravidade<\/code><\/div>\n
\u00a0 \u00a0 this.velocity.y = Math.max(<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.velocity.y + CONFIG.GRAVITY * delta,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 CONFIG.MAX_FALL_SPEED<\/code><\/div>\n
\u00a0 \u00a0 );<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Processar pulo<\/code><\/div>\n
\u00a0 \u00a0 if (this.keys.jump && !this.isJumping) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.tryJump();<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.keys.jump = false;<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Atualiza anima\u00e7\u00e3o de pulo<\/code><\/div>\n
\u00a0 \u00a0 this.updateJumpAnimation();<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Movimento horizontal<\/code><\/div>\n
\u00a0 \u00a0 const speedMultiplier = this.keys.run ? CONFIG.RUN_SPEED_MULTIPLIER : 1;<\/code><\/div>\n
\u00a0 \u00a0 const moveSpeed = CONFIG.MOVEMENT_SPEED * speedMultiplier * delta;<\/code><\/div>\n
\u00a0 \u00a0 const moveDir = new THREE.Vector3(0, 0, 0);<\/code><\/div>\n
\u00a0 \u00a0 let isMoving = false;<\/code><\/div>\n
\u00a0 \u00a0 if (this.keys.forward) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 moveDir.z -= 1;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 isMoving = true;<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 if (this.keys.backward) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 moveDir.z += 1;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 isMoving = true;<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 if (this.keys.left) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 moveDir.x -= 1;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 isMoving = true;<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 if (this.keys.right) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 moveDir.x += 1;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 isMoving = true;<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 if (moveDir.lengthSq() > 0) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 moveDir.normalize();<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \/\/ Rota\u00e7\u00e3o suave em dire\u00e7\u00e3o ao movimento<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 const targetAngle = Math.atan2(moveDir.x, moveDir.z);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 const currentAngle = this.model.rotation.y;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 let angleDiff = targetAngle - currentAngle;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \/\/ Normaliza para o caminho mais curto<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 while (angleDiff > Math.PI) angleDiff -= Math.PI * 2;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 while (angleDiff < -Math.PI) angleDiff += Math.PI * 2;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \/\/ Aplica rota\u00e7\u00e3o suave<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.model.rotation.y += angleDiff * CONFIG.ROTATION_SPEED * delta;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \/\/ Calcula nova posi\u00e7\u00e3o<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 const moveDist = moveSpeed;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 const newX = this.model.position.x + Math.sin(targetAngle) * moveDist;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 const newZ = this.model.position.z + Math.cos(targetAngle) * moveDist;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \/\/ Verifica colis\u00e3o antes de mover<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 const newPos = new THREE.Vector3(newX, this.model.position.y, newZ);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 if (!this.checkCollision(newPos)) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.model.position.x = newX;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.model.position.z = newZ;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 } else {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \/\/ Tenta deslizar ao longo da parede<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 const slideX = new THREE.Vector3(<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 newX,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 this.model.position.y,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 this.model.position.z<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 );<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 const slideZ = new THREE.Vector3(<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 this.model.position.x,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 this.model.position.y,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 newZ<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 );<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 if (!this.checkCollision(slideX)) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 this.model.position.x = newX;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 } else if (!this.checkCollision(slideZ)) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 this.model.position.z = newZ;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Trocar anima\u00e7\u00e3o (exceto durante pulo ou ataque)<\/code><\/div>\n
\u00a0 \u00a0 if (<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 !this.isJumping &&<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.combatSystem.attackState.punch.canAttack &&<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.combatSystem.attackState.kick.canAttack<\/code><\/div>\n
\u00a0 \u00a0 ) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 if (isMoving) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.animManager.findAndPlay(\"running\");<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 } else {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.animManager.findAndPlay(\"idle\");<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Aplicar velocidade vertical<\/code><\/div>\n
\u00a0 \u00a0 this.model.position.y += this.velocity.y * delta;<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Colis\u00e3o com ch\u00e3o<\/code><\/div>\n
\u00a0 \u00a0 if (this.model.position.y <= CONFIG.GROUND_LEVEL) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.model.position.y = CONFIG.GROUND_LEVEL;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.velocity.y = 0;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 if (this.isJumping) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.isJumping = false;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.jumpPhase = \"none\";<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.isOnGround = true;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.coyoteTimer = CONFIG.COYOTE_TIME;<\/code><\/div>\n
\u00a0 \u00a0 } else {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 if (this.isOnGround) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.coyoteTimer = CONFIG.COYOTE_TIME;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.isOnGround = false;<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 checkCollision(newPosition) {<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Verifica colis\u00e3o com todos os objetos colid\u00edveis<\/code><\/div>\n
\u00a0 \u00a0 for (let i = 0; i < this.collidableObjects.length; i++) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 const obj = this.collidableObjects[i];<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \/\/ Ignora objetos invis\u00edveis (destru\u00eddos)<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 if (!obj.mesh.visible) continue;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 const objPos = obj.mesh.position;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 const distance = new THREE.Vector2(<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 newPosition.x - objPos.x,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 newPosition.z - objPos.z<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 ).length();<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 const minDistance = CONFIG.CHARACTER_RADIUS + obj.radius;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 if (distance < minDistance) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 return true; \/\/ Colis\u00e3o detectada<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 return false; \/\/ Sem colis\u00e3o<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 updateCamera() {<\/code><\/div>\n
\u00a0 \u00a0 if (!this.model) return;<\/code><\/div>\n
\u00a0 \u00a0 const targetPos = this.model.position.clone();<\/code><\/div>\n
\u00a0 \u00a0 const targetLookAt = targetPos.clone();<\/code><\/div>\n
\u00a0 \u00a0 targetLookAt.y += 100;<\/code><\/div>\n
\u00a0 \u00a0 this.controls.target.lerp(targetLookAt, CONFIG.CAMERA_FOLLOW_SMOOTHNESS);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 resetCamera() {<\/code><\/div>\n
\u00a0 \u00a0 this.camera.position.set(0, CONFIG.CAMERA_HEIGHT, CONFIG.CAMERA_DISTANCE);<\/code><\/div>\n
\u00a0 \u00a0 this.controls.target.set(0, 100, 0);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 resetPosition() {<\/code><\/div>\n
\u00a0 \u00a0 if (this.model) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.model.position.set(0, 0, 0);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.model.rotation.set(0, 0, 0);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.velocity.set(0, 0, 0);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.isJumping = false;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.jumpPhase = \"none\";<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.animManager.findAndPlay(\"idle\");<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 this.resetCamera();<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 setupGUI() {<\/code><\/div>\n
\u00a0 \u00a0 this.gui = new GUI();<\/code><\/div>\n
\u00a0 \u00a0 this.gui.title(\"\u2694\ufe0f Controles de Combate\");<\/code><\/div>\n
\u00a0 \u00a0 const animNames = this.animManager.getActionNames();<\/code><\/div>\n
\u00a0 \u00a0 if (animNames.length === 0) return;<\/code><\/div>\n
\u00a0 \u00a0 const guiControls = {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 animation: animNames[0],<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 speed: 1.0,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 lightIntensity: 3,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 shadowsEnabled: true,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 showGrid: true,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 debugVisualization: false,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 showColliders: false,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 punchRange: CONFIG.ATTACK.PUNCH.MAX_RANGE,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 kickRange: CONFIG.ATTACK.KICK.MAX_RANGE,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 jump: () => this.tryJump(),<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 punch: () => this.attack(\"punch\"),<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 kick: () => this.attack(\"kick\"),<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 resetCamera: () => this.resetCamera(),<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 resetPosition: () => this.resetPosition(),<\/code><\/div>\n
\u00a0 \u00a0 };<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Pasta de Anima\u00e7\u00f5es<\/code><\/div>\n
\u00a0 \u00a0 const animFolder = this.gui.addFolder(\"\ud83c\udfac Anima\u00e7\u00f5es\");<\/code><\/div>\n
\u00a0 \u00a0 animFolder<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .add(guiControls, \"animation\", animNames)<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .name(\"Anima\u00e7\u00e3o\")<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .onChange((n) => this.animManager.play(n));<\/code><\/div>\n
\u00a0 \u00a0 animFolder<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .add(guiControls, \"speed\", 0.1, 3, 0.1)<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .name(\"Velocidade\")<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .onChange((v) => this.animManager.setSpeed(v));<\/code><\/div>\n
\u00a0 \u00a0 animFolder.add(guiControls, \"jump\").name(\"\u2b06\ufe0f Pular\");<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Pasta de Combate<\/code><\/div>\n
\u00a0 \u00a0 const combatFolder = this.gui.addFolder(\"\u2694\ufe0f Combate\");<\/code><\/div>\n
\u00a0 \u00a0 combatFolder.add(guiControls, \"punch\").name(\"\ud83d\udc4a Soco (J)\");<\/code><\/div>\n
\u00a0 \u00a0 combatFolder.add(guiControls, \"kick\").name(\"\ud83e\uddb5 Chute (K)\");<\/code><\/div>\n
\u00a0 \u00a0 combatFolder<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .add(guiControls, \"punchRange\", 50, 200, 10)<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .name(\"Alcance Soco\")<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .onChange((v) => (CONFIG.ATTACK.PUNCH.MAX_RANGE = v));<\/code><\/div>\n
\u00a0 \u00a0 combatFolder<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .add(guiControls, \"kickRange\", 80, 250, 10)<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .name(\"Alcance Chute\")<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .onChange((v) => (CONFIG.ATTACK.KICK.MAX_RANGE = v));<\/code><\/div>\n
\u00a0 \u00a0 combatFolder<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .add(guiControls, \"debugVisualization\")<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .name(\"Debug Visual\")<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .onChange((v) => {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 if (this.combatSystem.debugMesh) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 this.combatSystem.debugMesh.visible = v;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 \u00a0 combatFolder<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .add(guiControls, \"showColliders\")<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .name(\"Mostrar Colis\u00f5es\")<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .onChange((v) => this.toggleColliderVisualization(v));<\/code><\/div>\n
\u00a0 \u00a0 combatFolder.open();<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Pasta de Visual<\/code><\/div>\n
\u00a0 \u00a0 const visualFolder = this.gui.addFolder(\"\ud83d\udca1 Visual\");<\/code><\/div>\n
\u00a0 \u00a0 visualFolder<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .add(guiControls, \"lightIntensity\", 0, 10, 0.5)<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .name(\"Intensidade da Luz\")<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .onChange((v) => (this.dirLight.intensity = v));<\/code><\/div>\n
\u00a0 \u00a0 visualFolder<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .add(guiControls, \"shadowsEnabled\")<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .name(\"Sombras\")<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .onChange((v) => {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.renderer.shadowMap.enabled = v;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.dirLight.castShadow = v;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 \u00a0 visualFolder<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .add(guiControls, \"showGrid\")<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .name(\"Mostrar Grade\")<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .onChange((v) => {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.gridHelper.visible = v;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Pasta de Personagem<\/code><\/div>\n
\u00a0 \u00a0 const charFolder = this.gui.addFolder(\"\ud83c\udfae Personagem\");<\/code><\/div>\n
\u00a0 \u00a0 charFolder.add(guiControls, \"resetCamera\").name(\"\ud83d\udd04 Resetar C\u00e2mera\");<\/code><\/div>\n
\u00a0 \u00a0 charFolder.add(guiControls, \"resetPosition\").name(\"\ud83d\udd04 Resetar Posi\u00e7\u00e3o\");<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Inicia com a primeira anima\u00e7\u00e3o<\/code><\/div>\n
\u00a0 \u00a0 this.animManager.play(animNames[0]);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 toggleColliderVisualization(show) {<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Remove visualiza\u00e7\u00f5es anteriores<\/code><\/div>\n
\u00a0 \u00a0 if (this.colliderHelpers) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.colliderHelpers.forEach((helper) => this.scene.remove(helper));<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 this.colliderHelpers = [];<\/code><\/div>\n
\u00a0 \u00a0 if (show) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \/\/ Adiciona c\u00edrculo para o personagem<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 const charGeometry = new THREE.CircleGeometry(<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 CONFIG.CHARACTER_RADIUS,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 32<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 );<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 const charMaterial = new THREE.MeshBasicMaterial({<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 color: 0x00ff00,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 transparent: true,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 opacity: 0.3,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 side: THREE.DoubleSide,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 const charHelper = new THREE.Mesh(charGeometry, charMaterial);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 charHelper.rotation.x = -Math.PI \/ 2;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 charHelper.position.y = 1;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.model.add(charHelper);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.colliderHelpers.push(charHelper);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \/\/ Adiciona c\u00edrculos para os objetos<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.collidableObjects.forEach((obj) => {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 const objGeometry = new THREE.CircleGeometry(obj.radius, 32);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 const objMaterial = new THREE.MeshBasicMaterial({<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 color: 0xff0000,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 transparent: true,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 opacity: 0.3,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 side: THREE.DoubleSide,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 const objHelper = new THREE.Mesh(objGeometry, objMaterial);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 objHelper.rotation.x = -Math.PI \/ 2;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 objHelper.position.y = 1;<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 obj.mesh.add(objHelper);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 this.colliderHelpers.push(objHelper);<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 });<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 animate = () => {<\/code><\/div>\n
\u00a0 \u00a0 requestAnimationFrame(this.animate);<\/code><\/div>\n
\u00a0 \u00a0 const delta = Math.min(this.clock.getDelta(), 0.1);<\/code><\/div>\n
\u00a0 \u00a0 if (this.animManager) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.animManager.update(delta);<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 if (this.combatSystem) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 this.combatSystem.update(delta);<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 \u00a0 this.updateMovement(delta);<\/code><\/div>\n
\u00a0 \u00a0 this.updateCamera();<\/code><\/div>\n
\u00a0 \u00a0 this.controls.update();<\/code><\/div>\n
\u00a0 \u00a0 this.renderer.render(this.scene, this.camera);<\/code><\/div>\n
\u00a0 };<\/code><\/div>\n
\u00a0 async init() {<\/code><\/div>\n
\u00a0 \u00a0 await this.loadModelAndAnimations();<\/code><\/div>\n
\u00a0 \u00a0 this.animate();<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
}<\/code><\/div>\n
\/\/ ===================================<\/code><\/div>\n
\/\/ EXECUTAR<\/code><\/div>\n
\/\/ ===================================<\/code><\/div>\n
const controller = new CharacterController();<\/code><\/div>\n
controller.init().catch((err) => {<\/code><\/div>\n
\u00a0 console.error(\"\u274c Erro :\", err);<\/code><\/div>\n
\u00a0 const loader = document.getElementById(\"loading-screen\");<\/code><\/div>\n
\u00a0 if (loader) {<\/code><\/div>\n
\u00a0 \u00a0 loader.querySelector(\"#loading-text\").textContent =<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \"Erro ao carregar! Verifique se os arquivos FBX est\u00e3o na pasta .\/models\/\";<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
});<\/code><\/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
Game Exemplo com TreeJs<\/a>\u00a0<\/span><\/strong><\/p>\n
 <\/p>\n
Deixo aqui um v\u00eddeo curto do Jogo:<\/span><\/strong><\/span><\/p>\n
 <\/p>\n
 <\/p>\n