7-开关门(不动点)
条评论这是3D可视化教程系列的文章,如果第一次阅读请先阅读《3D可视化教程导读》。
源码及3D项目文件
源码及工程项目都放到github上。
源码:threejs-example
效果
可在线访问看效果7-开关门(不动点)。开关门动作,需要修改模型的不动点(pivot,可以理解为旋转的中心点),对于门来说,不动点要放到门轴上,这样才能沿着门轴旋转:
模型制作
操作视频:
代码说明
主要就是使用raycaster检测是否点击门,如果是,就开关门;1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19const raycaster = new THREE.Raycaster();
const raycasterObjects = [];
// 将门 放入可被检测点击的列表中
let door = scene.getObjectByName("door");
raycasterObjects.push(door);
const mouse = new THREE.Vector2();
function onMouseClick(event) {
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
// raycaster 检测指向哪个物体
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(raycasterObjects);
if(intersects.length>0){
// 门被检测到
triggerDoor();
}
}
window.addEventListener( "click", onMouseClick, false );
附录
FAQ
- 如果使用别人制作好的模型,不能修改模型的不动点,有什么其它办法?
答:Unity里一般会将模型外面再套一层,以此作为不动点。同理,在代码里也是可以这么做的:Change the pivot point of my object?。