Estoy probando un script muy simple usando ThreeJS que genera un punto donde haces clic.
Esta es la función que suma el punto:
function addPoint(coord){ var geometry = new THREE.BufferGeometry(); var vertices = []; const sprite = new THREE.TextureLoader().load( 'textures/disc.png' ); vertices.push( coord.x, coord.y, coord.z ); geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) ); var material = new THREE.PointsMaterial( { size: 1, sizeAttenuation: true, map: sprite, alphaTest: 0.5, transparent: true } ); material.color.setHSL( 1.0, 0.3, 0.7 ); const particles = new THREE.Points( geometry, material ); //scene.add( particles ); group.add( particles ); }Pero agrega a la escena solo el primer punto creado. Lo curioso es que en la misma función pongo el ejemplo original que genera puntos aleatorios, no solo suma todos los vértices generados, sino que funciona cada vez que le das click
for ( let i = 0; i < 10000; i ++ ) { const x = 2000 * Math.random() - 1000; const y = 2000 * Math.random() - 1000; const z = 2000 * Math.random() - 1000; vertices.push( x, y, z ); }¿Qué hice mal en mi vida para merecer este trabajo ilógico?
¡Gracias!
Para resolver este problema, cambié la lógica del clic: creé un plano que agrego a la matriz de "objetos"
const geometry = new THREE.PlaneGeometry( 100, 100 ); const material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} ); const plane = new THREE.Mesh( geometry, material ); scene.add( plane ); objects.push(plane);Luego obtengo las coordenadas de la intersección del plano.
var raycaster = new THREE.Raycaster(); // create once var mouse = new THREE.Vector2(); // create once mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1; mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1; raycaster.setFromCamera( mouse, camera ); var intersects = raycaster.intersectObjects( objects ); console.log(intersects); for(var int of intersects){ addPoint( int.point ); }Eso es todo
El tamaño actual de sus puntos ( 1 ) probablemente sea demasiado pequeño para que no los vea. Además, tenga en cuenta que no puede cambiar el tamaño de una geometría. Lo que significa que si crea un atributo de búfer, no puede enviar datos adicionales después, lo que excedería el tamaño del búfer. Eso significa que siempre debe crear sus búferes con el tamaño suficiente y administrar qué parte de la geometría se debe representar a través de BufferGeometry.drawRange() .
Pruébalo con el siguiente código:
let camera, scene, renderer; init(); function init() { camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000); camera.position.z = 2000; scene = new THREE.Scene(); // const geometry = new THREE.BufferGeometry() const vertices = []; for (let i = 0; i < 10000; i++) { const x = 2000 * Math.random() - 1000; const y = 2000 * Math.random() - 1000; const z = 2000 * Math.random() - 1000; vertices.push(x, y, z); } geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3)); // const sprite = new THREE.TextureLoader().load('https://threejs.org/examples/textures/sprites/disc.png'); const material = new THREE.PointsMaterial({ size: 50, sizeAttenuation: true, map: sprite, alphaTest: 0.5, transparent: true }); material.color.setHSL(1.0, 0.3, 0.7); // const particles = new THREE.Points(geometry, material); scene.add(particles); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setAnimationLoop(animate); document.body.appendChild(renderer.domElement); } function animate() { renderer.render(scene, camera); } body { margin: 0; } <script src="https://cdn.jsdelivr.net/npm/three@0.133.1/build/three.min.js"></script>