本文将介绍如何使用Threejs开发制作3D展馆，效果如图：首先，我们需要一个展馆模型。我通过Blender制作，并在Blender中将模型导出为glb格式。接下来，我们通过代码将模型加载到网页中。在3D图形开发中，最基本的概念就是场景、相机和光源。这三者是构成3D世界的基本元素。所以，我们需要先创建一个场景，设置好相机和光源。constscene=newTHREE.Scene();//设置相机constcamera=newTHREE.PerspectiveCamera(45,container.offsetWidth/container.offsetHeight,10,10000);camera.position.set(5,10,-40);//设置相机位置camera.lookAt(0,0,0);//让相机看原点//光源，平行光varlight2=newTHREE.DirectionalLight(0xffffff,1);场景。添加（light2）；然后，我们使用Threejs提供的GLTFLoader来加载模型。constloader=newGLTFLoader();loader.load('../resources/models/zhanguan2.glb',function(gltf){scene.add(gltf.scene);//将模型添加到场景中})这个时不时我们会发现整个场馆有些暗，只有场馆内部是亮的，墙壁是黑的。因为我们用的是平行光，有些地方照不到，所以是黑的。接下来，我们使用环境贴图来照亮整个场地。我们使用这张图片：newRGBELoader().load('../resources/sky.hdr',function(texture){texture.mapping=THREE.EquirectangularReflectionMappingscene.environment=texturerenderer.outputEncoding=THREE.sRGBEncodingrenderer.render(scene,camera)})接下来，我们加载角色，同样使用GLTFLoader.newGLTFLoader().load('../resources/models/player.glb',(gltf)=>{playerMesh=gltf.scenescene.add(playerMesh)}角色加载完成后，如何让她动起来呢？使用playerMesh.translateZ()方法让它沿Z轴方向移动，对应场景，即在地面上移动.那么如果撞到墙了，角色不应该继续前进吗?所以要实现碰撞检测功能，这里我们使用Threejs中的Raycaster射线检测来实现。window.addEventListener('keydown',(e)=>{if(e.key==='w'){constcurPos=playerMesh.position.clone();//获取角色当前位置playerMesh.translateZ(1);//让角色向前走一步constfrontPos=playerMesh.position.clone();//获取当前位置playerMesh.translateZ(-1);//回到原位置constfrontVector3=frontPos.sub(curPos).normalize()//用后面位置的向量减去前面位置的向量constraycasterFront=newTHREE.Raycaster(playerMesh.position.clone().add(playerHalfHeight),frontVector3);constcollisionResultsFrontObjs=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);}})至此，亭子的基本功能就完成了等。
