如何在Three.js中导入Blender导出的GLTF格式透明水体模型

一、Blender导出前的关键设置 #

先确保水体材质在Blender中配置正确并正常导出：

• 用Principled BSDF制作水体材质：
  • 若用Alpha透明：将Principled BSDF的Alpha值调至小于1（比如0.7），切换到渲染模式确认透明效果正常。
  • 若用透射效果：将Transmission值调至大于0（比如0.9），同时降低Roughness模拟水体反光质感。
• GLTF导出设置：
  • 在导出窗口的Materials栏，勾选Export Materials和Export Vertex Colors，避免材质数据丢失。
  • 确认未勾选Export Only Selected（除非仅导出水体模型）。

二、Three.js加载时的材质修正 #

GLTF导出的透明材质在Three.js中可能未自动启用相关属性，加载后需手动调整材质参数，修改你的代码如下：

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import * as THREE from 'three'

const loader = new GLTFLoader()
loader.load(
  '../static/assets/model3.gltf',
  function (gltf) {
    // 遍历模型所有网格，修正透明材质
    gltf.scene.traverse((obj) => {
      if (obj.isMesh) {
        const mat = obj.material;
        // 根据Blender中用的透明方式选择对应设置
        
        // 情况1：Blender用Alpha透明
        mat.transparent = true;
        mat.depthWrite = false; // 关闭深度写入，避免透明水体遮挡后方内容
        mat.blending = THREE.NormalBlending; // 适配多数透明场景的混合模式
        // 若导出的alpha值未生效，可手动设置
        // mat.opacity = 0.7;

        // 情况2：Blender用Transmission透射
        // mat.transmission = 0.9; // 匹配Blender中设置的透射值
        // mat.roughness = 0.1; // 降低粗糙度模拟水体反光

        mat.needsUpdate = true; // 通知Three.js材质已更新
      }
    })
    scene.add(gltf.scene)
  },
  function (xhr) {
    console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
  },
  function (error) {
    console.log('An error occurred')
  }
)

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

额外注意事项 #

• 若水体模型面数较多出现渲染顺序问题，可调整模型的renderOrder属性，确保透明物体在不透明物体之后渲染。
• 不要在同一模型中混合透明与不透明材质，避免渲染冲突。

内容的提问来源于stack exchange，提问作者joco