Обработка событий для геометрии в Three.js? - PullRequest
3 голосов
/ 05 февраля 2012

Я ищу какую-то обработку событий для геометрий / камер / источников света (вещей, которые мы добавляем в сцену) в three.js?

Я погуглил, но не смог найти ничего подходящего.Я сделал простую визуализацию Sphere и попытался увидеть содержимое DIV в firebug, но есть только один холст, и добавление любого «onclick» на холст делает событие для всего холста, то есть не только для сферы или света.

Есть предложения?

1 Ответ

7 голосов
/ 06 февраля 2012

Вам нужно пару вещей, чтобы получить интерактивность в 3D:

  1. получить вектор для положения мыши
  2. Отпроектировать вектор мыши на основе камеры
  3. выстрелил лучом из положения камеры, в направлении не проецируемого вектора мыши
  4. проверьте, какие объекты пересекаются с этим лучом, и обновите соответствующим образом.

Может показаться сложным, но код уже есть:

function onDocumentMouseDown( event ) {

                event.preventDefault();

                var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
                projector.unprojectVector( vector, camera );

                var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );

                var intersects = ray.intersectObjects( objects );

                if ( intersects.length > 0 ) {

                    intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );

                    var particle = new THREE.Particle( particleMaterial );
                    particle.position = intersects[ 0 ].point;
                    particle.scale.x = particle.scale.y = 8;
                    scene.add( particle );

                }

                /*
                // Parse all the faces
                for ( var i in intersects ) {

                    intersects[ i ].face.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 );

                }
                */
            }

Этот код выше из canvas_interactive_cubes примера, который поставляется с библиотекой. В случае сомнений всегда полезно проверить, есть ли пример, который уже решает проблему.

canvas_interactive_cubes sample preview

...