这是3D可视化教程系列的文章,如果第一次阅读请先阅读《3D可视化教程导读》

源码及3D项目文件

  源码及工程项目都放到github上。
  源码:threejs-example

效果

  可在线访问看效果7-开关门(不动点)。开关门动作,需要修改模型的不动点(pivot,可以理解为旋转的中心点),对于门来说,不动点要放到门轴上,这样才能沿着门轴旋转:
7-开关门演示

模型制作

  操作视频:

代码说明

 主要就是使用raycaster检测是否点击门,如果是,就开关门;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const 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

  1. 如果使用别人制作好的模型,不能修改模型的不动点,有什么其它办法?
    答:Unity里一般会将模型外面再套一层,以此作为不动点。同理,在代码里也是可以这么做的:Change the pivot point of my object?