Использование Raycaster для изменения цвета лица Box при нажатии - PullRequest
Новая
       70

Использование Raycaster для изменения цвета лица Box при нажатии

0 голосов
/ 22 февраля 2019

Я пытался заставить raycaster иметь возможность выбрать одну из созданных граней кубов, а затем изменить цвет лица, по которому щелкнули.Я смог заставить его работать с целым объектом, но не с индивидуальными гранями объектов.

Может кто-нибудь объяснить, пожалуйста, разницу между intersectObject () и intersectObjects (), так как я думаю, что это связано с проблемой.

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

function onDocumentMouseDown( event ){ 
    event.preventDefault();

    mouse.x = (event.clientX / renderer.domElement.width ) * 2 - 1;
    mouse.y = - (event.clientY / renderer.domElement.height ) * 2 + 1;

    raycaster.setFromCamera( mouse, camera );

    var intersects = raycaster.intersectObject( mesh );

    for (var i = 0; i < intersects.length; i++){
        intersects[ i ].face.color.setHex( 0xDDC2A3 );
        mesh.geometry.colorsNeedUpdating = true;
    }
    renderer.render(scene, camera);
   }

}

А вот один из кубиков в моей сцене 

var cubeGeometry2 = new THREE.BoxGeometry(5, 5, 5);
var cubeMaterial2 = new THREE.MeshLambertMaterial({color:0xffff00});
var cube2 = new THREE.Mesh(cubeGeometry2, cubeMaterial2);
//Cube position to sit on top of the plane, allow to cast shadows and add
cube2.position.x = -5;
cube2.position.y = -5;
cube2.position.z = -5;
scene.add(cube2);

1 Ответ

0 голосов
/ 23 февраля 2019

Может, кто-нибудь объяснит разницу между intersectObject () и intersectObjects (), поскольку я думаю, что это связано с проблемой.

Как упомянуто в документации of THREE.Raycaster, intersectObject() ожидает один объект, тогда как intersectObjects() ожидает массив объектов в качестве первого параметра.Однако это не имеет никакого отношения к вашей проблеме.

Проблема в том, как вы настроили свой материал.Если вы хотите иметь цвет для каждого лица, вы должны установить THREE.Material.vertexColors на THREE.FaceColor.Имейте в виду, что этот подход работает только с THREE.Geometry.

Демо: https://jsfiddle.net/sv05rwny/

three.js R101

...