关于three.js: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);
}
})

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