Question

three.js如何给外置模型添加点击事件啊

比方说，我点击引入的一个人物，弹出一个框框，像个人信息的那种。但是问题在于我不知道three.js的点击事件如何添加

Answer 1

我说一下我的实现场景。

1.引入了一个obj的模型（引入相应的loader.js。我这里用的MTL,OBJ,DDSloader）

THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
    var mtlLoader = new THREE.MTLLoader();
    mtlLoader.load('model/gaoda/file.mtl',function(materials){
	materials.preload();
	var loader = new THREE.OBJLoader();
	loader.setMaterials(materials);
	loader.load( 'model/gaoda/file.obj', function ( obj ) {
	  _this.cube = obj;
	  _this.cube.position.set(0,1,0);
	  _this.scene.add( _this.cube );
	}, onProgress, onError );
});

2.在three的raysects为模型添加事件

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
mouse.x = ( event.clientX / window.innerWidth )*2 - 1;
mouse.y = -( event.clientY / window.innerHeight )*2 + 1;
raycaster.setFromCamera( mouse, _this.camera );
var intersects = raycaster.intersectObjects( _this.cube.children );
_this.initMessage(intersects,event.clientX,event.clientY);

3.最后监听该点击事件就行了。

 window.addEventListener('click',this.clickModel,false);

效果图如下:

我也是才开始学习THREE。希望能帮助到你。

Answer 2

1.  假设dae_scene从ColladaLoader一个COLLADA现场回来，这里是你可以做什么检查交集：var toIntersect = [];
   THREE.SceneUtils.traverseHierarchy(dae_scene, function (child) {
   if (child instanceof THREE.Mesh) {
    toIntersect.push(child);
   }
   });
   
   这得到了COLLADA场景内的所有网格对象。您可以在数组中寻找射线相交，像这样：var ray = new THREE.Ray( camera.position,
         vector.subSelf( camera.position ).normalize() );
   var intersects = ray.intersectObjects( toIntersect );

2. 是这样一个思路。。
   

Answer 3

这个实现了吗 我也遇到了这个问题 希望你能帮我一下 谢谢