Blender Cycles渲染材质如何导出至Three.js？

阿华AIGC实验室

2026-5-15

解决Blender Cycles材质导出到Three.js的问题

首先得说，Blender自带的JSON导出器对Cycles材质的支持确实很有限——它只能导出基础颜色这类简单属性，因为Cycles的节点材质体系和Three.js的材质模型差异太大了。不过有几种靠谱的方法能解决这个问题：

1. 优先用glTF格式替代JSON（最推荐）

glTF是3D领域的标准交换格式，Blender和Three.js对它的支持都非常完善，而且能很好地兼容Cycles的核心材质（比如Principled BSDF节点）。步骤如下：

在Blender里确保你的Cycles材质用的是Principled BSDF节点（这是glTF支持的核心材质节点，避免用Cycles特有的节点比如Volume Scatter，这类Three.js暂时不支持）。
导出时选择File > Export > glTF 2.0，在导出设置里勾选「导出材质」，如果有纹理的话也要勾选对应的纹理导出选项。
在Three.js里用GLTFLoader加载，代码示例：

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const loader = new GLTFLoader();
loader.load('你的模型路径.gltf', function(gltf) {
  // 加载完成后直接把场景添加到你的Three.js场景里
  scene.add(gltf.scene);
});

这种方法几乎不需要额外处理，材质的金属度、粗糙度、纹理等属性都会被正确导出和加载。

2. 自定义Blender导出脚本（适合必须用JSON的场景）

如果你因为某些原因必须用JSON格式，那可以写Blender Python脚本，手动提取Cycles材质的节点属性，把这些信息注入到导出的JSON文件里，然后在Three.js里解析这些自定义数据来重建材质。

示例脚本（Blender端）

这个脚本会提取Principled BSDF的基础色、金属度、粗糙度：

import bpy
import json

# 获取当前选中的物体和它的材质
obj = bpy.context.active_object
if not obj or not obj.active_material:
    print("请选中带材质的物体")
    exit()

material = obj.active_material
principled_node = None

# 遍历节点树，找到Principled BSDF节点
for node in material.node_tree.nodes:
    if node.type == 'BSDF_PRINCIPLED':
        principled_node = node
        break

if principled_node:
    # 提取属性
    base_color = principled_node.inputs['Base Color'].default_value
    metallic = principled_node.inputs['Metallic'].default_value
    roughness = principled_node.inputs['Roughness'].default_value
    
    # 把这些属性存为自定义数据，你可以把它合并到原生JSON导出的材质部分
    custom_material_data = {
        'baseColor': [base_color[0], base_color[1], base_color[2], base_color[3]],
        'metallic': metallic,
        'roughness': roughness
    }
    
    # 这里可以继续写导出JSON的逻辑，把custom_material_data注入到材质的userData里
    # 省略原生JSON导出代码，核心是把自定义属性加进去

Three.js端解析代码

加载JSON模型后，遍历网格，用自定义数据替换材质：

var loader = new THREE.ObjectLoader();
loader.load("path_to.json", addModelToScene);

function addModelToScene(model) {
  // 遍历所有子物体，处理材质
  model.traverse((child) => {
    if (child.isMesh && child.material.userData) {
      const matData = child.material.userData;
      // 创建Three.js的PBR材质
      const newMaterial = new THREE.MeshStandardMaterial({
        color: new THREE.Color().fromArray(matData.baseColor),
        metalness: matData.metallic,
        roughness: matData.roughness
      });
      child.material = newMaterial;
    }
  });
  scene.add(model);
}