如何用Three.js + Blender打造一个web 3D展览馆

// 一些灯光选项// 如果是平行光则没有distance、decay选项const lightOptions = [
  {    type: 'point', // 灯光类型：1. point点光源、2. directional平行光源    color: 0xfff0bf, // 灯光颜色    intensity: 0.4, // 灯光强度    distance: 30,    // 光照距离    decay: 2,    // 衰减速度    position: { // 光源位置      x: 2,      y: 6,      z: 0    }  }, ...
]
function createLights() {  pointLightOptions.forEach(option => {    const light = option.type === 'point' ?        new THREE.PointLight(option.color, option.intensity, option.distance, option.decay) :        new THREE.DirectionalLight(option.color, option.intensity)    const position = option.position    light.position.set(position.x, position.y, position.z)    scene.add(light)  })}
createLights()

const loader = new GLTFLoader()loader.load('path/to/gallery.glb',  gltf => {      // 1. 根据Blender中物体的名字，找到logo模型      gltf.scene.traverse(child => {        if (isLogo(child)) {       initLogo(child)   // 2. 调整材质       setEnvMap(child)  // 3. 设置环境纹理      }      }）    scene.add(gltf.scene)  } }

// 判断是否为Logoconst isLogo = object.name === 'logo'
function initLogo(object) {  object.material.roughness = 0   // 调整表面粗糙度  object.material.metalness = 1   // 调整金属度}// 加载环境纹理
let envMapconst envmaploader = new THREE.PMREMGenerator(renderer)
const setEnvMap = (object) => {      if(envMap) {        object.material.envMap = envMap.texture      } else {        textureLoader.load('path/to/envMap.jpg',             texture => {             texture.encoding = THREE.sRGBEncoding             envMap = envmaploader.fromCubemap(texture)                 object.material.envMap = envMap.texture             })      }}

// 1. rendererconst renderer = new THREE.WebGLRenderer()renderer.shadowMap.enabled = true;renderer.shadowMap.type = THREE.PCFSoftShadowMap;
// 2. lightconst light = new THREE.DirectionalLight()light.castShadow = true;
// 3. objectgltf.scene.traverse(function (child) {   if (child.isMesh) {     child.castShadow = true;   }});// 4. floorfloor.receiveShadow = true

const speed = 8 // 移动速度const turnSpeed = 3  // 转向速度// move option，用于调整第一人称镜头的移动和转向const move = {      turn: 0,  // 旋转角度      forward: 0     // 前进距离}
// 创建一个handler，并监听手势，调整move optionconst handler = new Handler()handler.onTouchMove = () => { // update move option }

function createPlayer() {  const box = new THREE.BoxGeometry(1.2, 2, 1)  const mat = new THREE.MeshBasicMaterial({    color: 0x000000,    wireframe: true })
  const mesh = new THREE.Mesh(box, mat)  box.translate(0, 1, 0)  return mesh}
const player = createPlayer() // 创建playerplayer.position.set(4.5, 2, 12)     // 设置player的初始位置

function updatePlayer(dt) {  const pos = player.position.clone()  pos.y -= 1.5 // 降低高度，用于计算collision  const dir = new THREE.Vector3()
  // 获取当前player的朝向  player.getWorldDirection(dir) dir.negate()  // 如果是向后退，需要对朝向取反  if (move.forward < 0) dir.negate()
  // 利用Raycaster判断player是否和colliders有碰撞行为  const raycaster = new THREE.Raycaster(pos, dir)  let blocked = false
  if (colliders.length > 0) {    const intersect = raycaster.intersectObjects(colliders)    if (intersect.length > 0) {      // 如果相交距离＜2.5，表示前方或后面有障碍物      if (intersect[0].distance < 2.5) {        blocked = true      }    } } // 如果遇到障碍物，则停滞移动
  if (!blocked) {    // 调整镜头前进 or 后退    if (move.forward !== 0) {      player.translateZ(move.forward > 0 ? -dt * speed : dt * speed * 0.5)    } }
  // 调整镜头朝向  if (move.turn !== 0) {    player.rotateY(move.turn * 1.2 * dt)  }}