案例展示

节点材质效果（WebGPU + initNodeMaterial / TSL）

TIP

仅 WebGPU 模式可用（renderer: 'webgpu'）。WebGL 下 NodeMaterial 不会编译，需改用 initShaderMaterial / initRawShaderMaterial。
TSL 函数由 initNodeMaterial 回调注入，无需单独 import 'three/tsl'。

<template>
    <div id="TO"></div>
</template>

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
    // NodeMaterial + TSL 仅兼容 WebGPU
    new ThingOrigin(
        'fileModel',
        document.getElementById('TO'),
        {
            scene: {
                renderQuality: {
                    renderer: 'webgpu' // 渲染器
                },
                ground: {
                    active: false // 地面
                },
                background: {
                    type: 'color', // 背景颜色
                    color: {
                        alpha: 1,
                        color: '#000000' // 黑色
                    }
                }
            },
            camera: {
                position: {
                    x: 0, // x轴
                    y: 5, // y轴
                    z: 20 // z轴
                }
            },
            helper: {
                axes: {
                    active: false // 轴线
                },
                grid: {
                    active: false // 网格
                }
            }
        },
        (TO) => {
            // 节点材质效果（WebGPU）
            const mat = TO.material.initNodeMaterial(
                ({ Fn, vec3, time, sin, uv, mix, positionLocal }) => ({
                    colorNode: Fn(() => {
                        const pulse = sin(time.mul(0.8)).add(1).mul(0.5) // 脉冲
                        const c1 = vec3(0.1, 0.6, 1.0) // 颜色1
                        const c2 = vec3(1.0, 0.3, 0.5) // 颜色2
                        return mix(c1, c2, uv().x).mul(pulse.mul(0.5).add(0.5))
                    })(),
                    positionNode: Fn(() => {
                        const p = positionLocal // 位置
                        const wave = sin(time.mul(2).add(p.y.mul(1.5))).mul(0.15)
                        return p.add(vec3(0.0, wave, 0.0)) // 位置
                    })()
                }),
                { transparent: true }
            )

            // 初始化一个立方体
            const cube = TO.model.initCube(
                {
                    scale: { x: 2.8, y: 2.8, z: 2.8 },
                    position: { x: 0, y: 0, z: 0 }
                },
                mat // 材质
            )
            TO.scene.add(cube)
        }
    )
})
</script>

<style scoped>
#TO {
    width: 100%;
    height: 400px;
    position: relative;
}
</style>

API 介绍

material.initNodeMaterial

方法签名	返回值	描述
initNodeMaterial(buildFn, params?)	NodeMaterial	创建节点材质（TSL），回调返回 *Node 槽位

buildFn 参数说明：

回调第一个参数为引擎内置 TSL 工具集，常用字段：

名称	说明
Fn	构建节点函数
vec3	三维向量
time	时间 uniform
sin	正弦
uv	UV 坐标
mix	混合
positionLocal	局部顶点坐标

buildFn 返回值： 凡以 Node 结尾的字段都会写入材质对应槽位（如 colorNode、positionNode、opacityNode 等）。

params 参数说明：

参数名	说明	类型	必填	默认值
transparent	是否开启透明度	boolean	否	false
opacity	透明度	number	否	1
side	渲染面	number	否	-
depthWrite	是否写入深度	boolean	否	-
depthTest	是否深度测试	boolean	否	-