本文将介绍如果应用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);}})到这里，展馆的基本功能就实现完了。