Threejs开发3D展馆 | 大帅老猿threejs特训

本文将介绍如果使用Threejs开发制作一个3D展馆，效果如图：

首先，我们需要一个展馆模型。我是通过Blender做出来的，在Blender中将模型导出为glb格式。

接下来，我们通过代码将模型加载到网页中。

在3D图形开发中，最基本的概念就是场景、相机和光源。这三个是构成3D世界的基本要素。所以，我们需要先创建一个场景、设置相机和光源。

const scene = new THREE.Scene();
 
//设置相机
const camera = new THREE.PerspectiveCamera(45, container.offsetWidth / container.offsetHeight, 10, 10000);
camera.position.set(5, 10, -40);//设置相机位置
camera.lookAt(0,0,0);//让相机看相原点
//光源,平行光
var light2 = new THREE.DirectionalLight(0xffffff, 1);
scene.add(light2);

然后，我们使用Threejs提供的GLTFLoader将模型加载进来。

const loader = new GLTFLoader();
loader.load(
'../resources/models/zhanguan2.glb',
function (gltf) {
scene.add(gltf.scene);//将模型添加到场景中
})

这时候我们会发现，整个场馆有点暗，而且只有场馆里面是亮的，围墙是黑乎乎的。因为我们用的是平行光，有些地方会照不到，所以就是黑的了。接下来，我们用环境贴图的方式，照亮整个场馆。我们使用这张图片：

new RGBELoader().load('../resources/sky.hdr', function (texture) {
 
texture.mapping = THREE.EquirectangularReflectionMapping
 
scene.environment = texture
 
renderer.outputEncoding = THREE.sRGBEncoding
 
renderer.render(scene, camera)
 
})

接下来，我们将人物角色加载进来，同样使用的是GLTFLoader.

new GLTFLoader().load('../resources/models/player.glb', (gltf) => {
  playerMesh = gltf.scene
  scene.add(playerMesh)
}

角色加载进来后，如何让她移动呢？使用playerMesh.translateZ()方法，让其在Z轴方向移动，对应到场景中，就是在地面上移动了。那如果碰到墙壁，是不是就不应该让角色继续前进了呢？所以要实现碰撞检测功能，这里使用Threejs中的Raycaster射线检测来实现。

window.addEventListener('keydown', (e) => {
 
if (e.key === 'w') {
 
const curPos = playerMesh.position.clone(); //获取角色当前位置
 
playerMesh.translateZ(1);//让角色往前走一步
 
const frontPos = playerMesh.position.clone();//在获取现在的位置
 
playerMesh.translateZ(-1 );//退回原来的位置
 
const frontVector3 = frontPos.sub(curPos).normalize()//让前面位置的向量减去后面位置的向量
 
const raycasterFront = new THREE.Raycaster(playerMesh.position.clone().add(playerHalfHeight), frontVector3);
 
const collisionResultsFrontObjs = raycasterFront.intersectObjects(scene.children);
 
if (collisionResultsFrontObjs && collisionResultsFrontObjs[0] && collisionResultsFrontObjs[0].distance > 1) { // 距离大于1才可以继续前进
 
playerMesh.translateZ(0.1);
 
}
 
}
if (e.key === 's') {//后退
playerMesh.translateZ(-0.1);
}
})

到这里，展馆的基本功能就实现完了。