这是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?。