Estoy tratando de cargar esta imagen como un mapa de PointsMaterial con TextureLoader pero sin éxito, no arroja errores, pero la textura no se muestra por alguna razón. ¿Estoy haciendo algo mal o qué?
Código:
const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 ); 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.3, map: new THREE.TextureLoader().load("./sparkle.png"), transparent: true, }); const particlePoints = new THREE.Points(particleBufferGeometry, particlePointsMaterial); const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, canvas: document.getElementById("three") }); renderer.setClearColor(0x000000, 0); renderer.setSize( window.innerWidth, window.innerHeight ); scene.add(particlePoints); renderer.render(scene, camera);Otra opción es usar el bucle de animación:
body{ overflow: hidden; margin: 0; } <canvas id="three"></canvas> <script type="module"> import * as THREE from "https://cdn.skypack.dev/three@0.135.0"; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 ); const positionArray = []; for (let i = 0; i < 10000; i++) { positionArray.push(new THREE.Vector3().random().subScalar(0.5).multiplyScalar(400)); } const particleBufferGeometry = new THREE.BufferGeometry().setFromPoints(positionArray); const particlePointsMaterial = new THREE.PointsMaterial({ size: 3, map: new THREE.TextureLoader().load("https://threejs.org/examples/textures/sprites/spark1.png"), transparent: true, }); const particlePoints = new THREE.Points(particleBufferGeometry, particlePointsMaterial); const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, canvas: document.getElementById("three") }); renderer.setClearColor(0x000000, 1); renderer.setSize( window.innerWidth, window.innerHeight ); scene.add(particlePoints); renderer.setAnimationLoop(() => { // animation loop renderer.render(scene, camera); }); </script>Encontré por qué sucede esto. Estaba pasando la textura como un mapa antes de que se cargara.
Esto está mal.
const particlePointsMaterial = new THREE.PointsMaterial({ size: 0.3, map: new THREE.TextureLoader().load("./sparkle.png"), transparent: true, }); La función load() de TextureLoader tiene un segundo parámetro onLoad que se ejecuta cuando se carga la textura. Entonces la solución es:
new THREE.TextureLoader().load("./sparkle.png", (texture) => { const particlePointsMaterial = new THREE.PointsMaterial({ transparent: true, map: texture }); const particlePoints = new THREE.Points(particleBufferGeometry, particlePointsMaterial); scene.add(particlePoints); renderer.render(scene, camera); });