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

首先介绍一个背景，我们的工作内容是做游戏中心的用户运营活动，会做些好玩的活动让用户参与，并get一些福利。

当时的活动背景是我司一年一度的vivo游戏节，并且元宇宙是大热词。所以做它的原因有几个：

Blender是一款轻量的开源3D建模软件，有很多好用的免费插件，而且Blender能导出GLTF GLB模型（后面会对GLTF GLB模型做简介），匹配Three.js的使用方式，整体更简单好用一些。

所以，就是它了。

首先，Blender大概长这样，图中是设计师交付的3D展览馆稿子。简单理解为，左侧是模型的层次结构，中间是模型的预览效果，右侧是模型的属性面板。

一般来说，作为开发者我们不需要掌握太多Blender相关知识，只需知道如何看懂模型结构、导出GLTF GLB模型以及烘焙的基本原理即可。

GLTF（Graphics Language Transmission Format）是一种标准的3D模型文件格式，它以JSON的形式存储3D模型信息，例如模型的层次结构、材质、动画、纹理等。

模型中依赖的静态资源，比如图片，可以通过外部URI的方式来引入，也可以转成base64直接插入在GLTF文件中。

它包含两种形式的后缀，分别是.gltf（JSON/ASCII）和.glb（Binary）。.gltf是以JSON的形式存储信息。.glb则是.gltf的扩展格式，它以二进制的形式存储信息，因此导出的模型体积也更小一些。如果我们不需要通过JSON对.gltf模型进行直接修改，建议使用.glb模型，它更小、加载更快。

为了防止篇幅过长，这里假设大家已经掌握了Three.js的一些基本语法。文章重点放在如何加载模型，并一步步进行调优和实现最终的3D展览馆效果。

怎么加载一个模型？

import * as THREE from 'three'


// 1. 创建场景
const scene = new THREE.Scene(); 




// 2. 创建镜头
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth  window.innerHeight, 0.1, 1000 );
// 3. 创建Renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

import GLTFLoader from 'GLTFLoader'
const loader = new GLTFLoader()
loader.load('path/to/gallery.glb',
  gltf => {
    scene.add(gltf.scene) // 添加到场景中
  } 
}

（3）开始渲染

通过requestAnimationFrame来调用renderer.render方法，开始实时渲染场景。

function animate() {
      requestAnimationFrame( animate );
      renderer.render( scene, camera );
}
animate();

const ambientLight = new THREE.AmbientLight(0xffffff, 1)


scene.add(ambientLight)

ok，亮起来了，但是效果依然很差，很劣质。

原因是模型中的材质效果、光源、阴影、环境纹理，这些全都丢失了，所以当我们导入模型时，看到的就是一堆简陋的纯色形状。

所以我们要一步步将这些丢失东西找回，还原设计稿。

点光源可以理解为房间中的灯泡，光线强弱随着距离衰减；

平行光源可以理解为太阳的直射光，它和点光源不同，光线强弱不随着距离衰减。

于是我们也增加一些光源：

// 一些灯光选项
// 如果是平行光则没有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()

但是我们注意到，画面中的logo、长椅的两侧都是黑色的，并且旁边的球体、椅子等都显得不够真实。

所以，我们需要进行下一步调整：调整模型材质、增加环境纹理。

• 材质（material）
  

材质就像物体的皮肤，我们可以调整皮肤的光泽、金属度、粗糙度、透明与否等属性，让物体有不同的视觉效果。

一般从blender导出的模型中，已经包含了一些材质属性，但是Three.js中的材质属性和Blender中的属性并非完全的映射关系，模型在导入到Three.js后，效果和设计稿会有差异。这时候我们需要手动调整材质的属性，来达到和设计稿近似的效果。

• 环境纹理（environment map）
  

环境纹理就是让模型映射周围的环境，让场景或物体更真实。例如我们要渲染一个立方体，把立方体放进一个屋子里，这个屋子的环境就会影响立方体的渲染效果。

比如镜面的物体被贴上环境纹理后，就可以实时反射周围的环境镜像，看起来很real。

设计稿中也是将一个大厅作为了环境纹理，让场景更真实。

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)
  } 
}




// 判断是否为Logo
const isLogo = object.name === 'logo'


function initLogo(object) {
  object.material.roughness = 0   // 调整表面粗糙度
  object.material.metalness = 1   // 调整金属度
}
// 加载环境纹理


let envMap
const 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
             })
      }
}

经过上面的处理后，可以看到原先黑色的logo有了金属光泽，并且会反射周围的环境纹理。

其它物体经过类似的处理后，也变得更真实一些。

现在整个场景更接近了设计稿一些，但场景中少了阴影，显得很干瘪。

加上阴影。

（3）增加阴影

增加阴影分四步：

// 1. renderer
const renderer = new THREE.WebGLRenderer()
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;


// 2. light
const light = new THREE.DirectionalLight()
light.castShadow = true;


// 3. object
gltf.scene.traverse(function (child) {
   if (child.isMesh) {
     child.castShadow = true;
   }
});
// 4. floor
floor.receiveShadow = true

添加阴影后，有质的提升，发现整个场景立体了很多，此时还原度已经很高。

如果不考虑性能损耗，这个场景的样式已经可以投入使用了。（后续会提到性能优化）

有人会问为什么需要一个player，通过摇杆直接控制镜头不就行了吗？其实player的作用是用于做碰撞检测，当player遇到凳子、墙壁等障碍物时，需要停止镜头移动。直接控制镜头，是无法做碰撞检测的。

所以，实际上镜头移动的逻辑是：

移动摇杆的实现原理很简单，这里仅做简述。

核心在于创建一个圆盘，监听触摸手势，并根据手势的方向来实时更新move参数，控制镜头的移动和转向。

const speed = 8 // 移动速度
const turnSpeed = 3  // 转向速度
// move option，用于调整第一人称镜头的移动和转向
const move = {
      turn: 0,  // 旋转角度
      forward: 0     // 前进距离
}


// 创建一个handler，并监听手势，调整move option
const handler = new Handler()
handler.onTouchMove = () => { // update move option }

（2）创建player

首先创建一个player对象，它是一个1.2 * 2 * 1的透明长方体。

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() // 创建player
player.position.set(4.5, 2, 12)     // 设置player的初始位置

（3）updatePlayer & updateCamera

每次渲染（render）时，更新player的位置和朝向，并同步更新镜头的位置和朝向。

const clock = THREE.clock()


function render() {
  const dt = clock.delta()   // 获取每帧之间的时间间隔，根据时间间隔长短来更新player和camera的移动距离和转向的多少
  updatePlayer(dt)
  updateCamera(dt)
  renderer.render(scene, camera)
  window.requestAnimationFrame(render)
}


// 更新player的位置和朝向


function updatePlayer(dt) {
  const pos = player.position.clone()
  pos.y -= 1.5 // 降低高度，后续用于计算碰撞检测
  const dir = new THREE.Vector3()
  player.getWorldDirection(dir)
  dir.negate()
  if (move.forward < 0) dir.negate()
  // 调整镜头前进 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)
  }
}


// 根据player的位置和朝向，同步更新camera的位置和朝向


function updateCamera(dt) {
  camera.position.lerp(activeCamera.getWorldPosition(new THREE.Vector3()), 0.08)
  const pos = player.position.clone()
  pos.y += 2.5
  camera.lookAt(pos)
}

注意：render方法中使用clock.delta()来计算每次渲染之间的时间间隔，并使用这个时间间隔来更新player和camera。因为在理想的60帧率情况下，两帧时间间隔为16.67ms，但实际上该数值会有波动，因此我们要根据实际的渲染时间间隔来更新player和camera，让镜头的移动和转向幅度更自然一些。

完成上述步骤后，我们就可以通过控制虚拟移动摇杆，来让镜头移动和转向了。

接下来加入碰撞检测，对镜头移动加点限制。

const colliders = []


loader.load('path/to/gallery.glb',
  gltf => {
    gltf.scene.traverse(child => {
        // 收集障碍物
        if(isMesh(child)) {
          colliders.push(child) 
        }
    }）
  } 
})

调整刚刚的updatePlayer方法，在其中插入检测碰撞的逻辑。

碰撞检测逻辑基于THREE.Raycaster来实现，racaster可以理解为一个射线，当射线穿过了某个物体，我们就认为射线和物体相交了。

我们让射线的方向和player的朝向保持一致，并且在移动过程中不断判断射线前方/后面是否有相交的物体，如果有相交的物体，且和射线顶点距离distance < 2.5则认为遇到了障碍物，不能再继续前进。

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)
  }
}

这样镜头的移动和碰撞检测就完成了。

当我们移动到椅子、墙壁等障碍物附近时，镜头会停止移动。镜头的移动范围也被我们限制在房间里，不会穿到房间外部。

3D展览馆的基本功能已经完成了，但还没有做任何的性能调优。当我们把项目运行在手机上，会发现设备发热发烫，帧率很低，低端机型甚至无法运行。

经过分析，实时的光影渲染是罪魁祸首。

页面中有10+个光源，每个光源都在实时投射阴影（尤其是点光源十分消耗资源，引起卡顿）。但实际，场景中的光源和物体位置都没有发生改变，这意味着我们不需要计算实时阴影，只需要固定的阴影。

这点可以通过纹理烘焙来实现。并且在移动端，经过纹理烘焙的光影效果实际上要优于设备计算的实时光影效果。

• 纹理烘焙（Texture Baking）

以3D展览馆的地板为例，我们可以通过纹理烘焙，将光影效果直接渲染到贴图上。

左图是原本的棋盘格纹理，右图是结合了光影效果的烘焙贴图。烘焙完成后，地板上的光影效果就被固定下来了，我们也不需要再做实时的光影渲染。

模型大小约为23M，首次加载模型需要9s左右。（尤其是在做完纹理烘焙后，由于贴图变得复杂，模型更大了）

以下是几个优化模型大小的建议：

参考：

• Threejs+Blender打造3D全景VR画展「1」 – 码语派教室

• three js blender animation - Google Search

• Loading Animated Characters in React Three Fiber

• 浅谈three.js中的needsUpdate - pissang - 博客园

• Directional Light Shadow - Three.js Tutorials

• Shadows not working

• 自适应Shadow Bias算法

• GLB Modify Material and add emission

• How can I improve the performance of a three.js script?

• HTML5 Audio events not triggering on Chrome

• http://jeromeetienne.github.io/threex.videotexture/examples/videotexture.html

• 部分代码参考自：

  https://github.com/mayupi/3dvr-gallery