three.js如何给外置模型添加点击事件啊
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了three.js如何给外置模型添加点击事件啊相关的知识,希望对你有一定的参考价值。
比方说,我点击引入的一个人物,弹出一个框框,像个人信息的那种。但是问题在于我不知道three.js的点击事件如何添加
我说一下我的实现场景。
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。希望能帮助到你。
参考技术A 假设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 );
是这样一个思路。。
以上是关于three.js如何给外置模型添加点击事件啊的主要内容,如果未能解决你的问题,请参考以下文章
BaseQuickAdapter和BaseViewHolder使用 RecyclerView点击事件 RecyclerView添加子view点击事件 RecyclerView添加子view点击事