大家好,
当鼠标悬停时,我想改变3D对象(collada文件)中的颜色
我尝试使用 Raycaster 方法,但它不起作用
像this样本。
但我希望在鼠标悬停时更改颜色或突出显示模型儿童。
这是我的代码。
var oLoader = new THREE.ColladaLoader();
oLoader.load('model/sample.dae', function (collada) {
var object = collada.scene;
var skin = collada.skins[0];
object.rotation.x = -Math.PI / 2;
object.rotation.z = Math.PI / 2;
object.position.x = 0;
object.position.y = 0;
object.position.z = 0;
object.scale.set(0.025, 0.025, 0.025);
object.updateMatrix();
scene.add(object);
请告诉我该怎么办。
非常感谢。
答案 0 :(得分:0)
巧合的是,我还在处理一个需要鼠标事件的项目,并编写了一个小对象来使用。
var mouse = {
getIntersects: function( camera, sceneChildren, event ){
event = event || window.event;
var mouseX = ( event.clientX / window.innerWidth ) * 2 - 1;
var mouseY = -( event.clientY / window.innerHeight ) * 2 + 1;
var vector = new THREE.Vector3( mouseX, mouseY, camera.near );
vector.unproject( camera );
var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
var intersects = raycaster.intersectObjects( sceneChildren );
if ( intersects.length > 0 ) {
//console.log(intersects);
return intersects;
}
return false;
},
Position3D: function(sceneChildren){
var intersects = mouse.getIntersects( sceneChildren );
return intersects[0].point
}
}
我不知道你是否想要自己使用这个对象,或者用它作为你自己编写代码的参考,但这里是你如何使用它:
document.addEventListener('click', function(event){
var intersectObj = mouse.getIntersects( camera, scene.children, event)[0];
if(window.console){
console.log(intersectObj);
}
else{
alert(intersectObj);
}
});
现在您已将所点击的对象全部整理出来,您可以开始使用这些功能。最简单的方法是将它们添加到网格中。这样:
var mesh = new THREE.Mesh(geometry, material);
mesh.click = function(){
alert('object was clicked');
}