Soy nuevo en THREE.JS y estoy tratando de descubrir cómo hacer un sistema de partículas y no puedo hacer que funcione correctamente. Como dice el título, todas las partículas están ubicadas en el centro del eje X, parece que Y y Z están bien.
Imagen del resultado: https://i.stack.imgur.com/xUuAn.png Lo que quiero lograr: https://i.stack.imgur.com/vA0tL.jpg
Código:
const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth - 10 / window.innerHeight, 1, 1000 ); camera.position.z = 300; const ambientLight = new THREE.AmbientLight( 0xFFFFFF ); const particleBufferGeometry = new THREE.BufferGeometry(); const positionArray = []; for (let i = 0; i < 10000; i++) { positionArray.push((Math.random() * 2 - 1) * 200); positionArray.push((Math.random() * 2 - 1) * 200); positionArray.push((Math.random() * 2 - 1) * 200); } particleBufferGeometry.setAttribute("position", new THREE.Float32BufferAttribute(positionArray, 3)); const particlePointsMaterial = new THREE.PointsMaterial({ size: 0.1 }); const particlePoints = new THREE.Points(particleBufferGeometry, particlePointsMaterial); const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, canvas: canvasRef.current! }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setClearColor(0xFFFFFF, 0); renderer.setSize( window.innerWidth - 10, window.innerHeight ); scene.add(ambientLight, particlePoints); renderer.render(scene, camera);El error ocurre cuando inicializas tu cámara. Su relación de aspecto es
window.innerWidth - 10 / window.innerHeight
Ejemplo: 1920 - 10 / 1080 = 1919.99 (relación de aspecto incorrecta)
pero debido al orden de las operaciones, primero se calcula la división, por lo que 10 / height ocurre antes de la resta. Solo asegúrate de usar los paréntesis correctamente y el problema se resolverá:
(window.innerWidth - 10) / window.innerHeight
Ejemplo: (1920 - 10) / 1080 = 1.76 (relación de aspecto correcta)
const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 45, (window.innerWidth - 10) / window.innerHeight, 1, 1000 ); camera.position.z = 300; const particleBufferGeometry = new THREE.BufferGeometry(); const positionArray = []; for (let i = 0; i < 10000; i++) { positionArray.push((Math.random() * 2 - 1) * 200); positionArray.push((Math.random() * 2 - 1) * 200); positionArray.push((Math.random() * 2 - 1) * 200); } particleBufferGeometry.setAttribute("position", new THREE.Float32BufferAttribute(positionArray, 3)); const particlePointsMaterial = new THREE.PointsMaterial({ size: 0.1 }); const particlePoints = new THREE.Points(particleBufferGeometry, particlePointsMaterial); const canvasRef = document.querySelector("#canvas"); const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvasRef }); renderer.setSize(window.innerWidth - 10, window.innerHeight); scene.add(particlePoints); function animate() { particlePoints.rotation.y += 0.01; renderer.render(scene, camera); requestAnimationFrame(animate); } animate(); <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.min.js"></script> <canvas id="canvas"></canvas>