ThingOrigin.js

案例展示 ​

水波纹材质

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

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

onMounted(() => {
    //初始化场景
    new ThingOrigin(
        'fileModel',
        document.getElementById('TO'),
        {
            scene: {
                ground: {
                    //设置地面
                    active: false
                },
                background: {
                    type: 'color', //设置背景颜色
                    color: {
                        alpha: 1, // 透明度 取值范围0~1
                        color: '#000000' // 背景颜色
                    }
                },
                // 文档要求：水材质使用 NoToneMapping
                renderQuality: {
                    toneMapping: {
                        type: 'NoToneMapping'
                    }
                }
            },
            camera: {
                // 相机配置
                position: {
                    // 相机位置
                    x: 0,
                    y: 50,
                    z: 200
                }
            },
            helper: {
                //辅助工具
                axes: {
                    active: false
                },
                grid: {
                    active: false
                }
            }
        },
        (TO) => {
            //创建平面缓冲几何体
            const waterGeometry = TO.model.initPlaneGeometry(200, 200)
            let water = TO.material.setWaterSkin(
                waterGeometry,
                200,
                200,
                `${import.meta.env.BASE_URL}img/materials/waternormals.jpg`,
                '#0bcbfa'
            )
            water.rotation.x = -Math.PI / 2
            TO.scene.add(water)
            // WebGL 下 Water 需手动推进 time uniform；WebGPU 下 WaterMesh 用 TSL time 自动更新，无需 push
            if (!TO.renderer.isWebGPU) {
                TO.toUpdate.material.push(water.material)
            }
        }
    )
})
</script>

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

API 介绍 ​

material.setWaterSkin ​

方法签名返回值描述
setWaterSkin(geometry: PlaneGeometry, width: number, height: number, url: string, waterColor?: string | number | Color, sunDirection?: Vector3, sunColor?: string | number | Color)Water给模型设置水波纹材质（需要将色调映射设置为 NoToneMapping）

参数说明：

参数名说明类型必填默认值
geometry模型PlaneGeometry是-
width纹理宽度number是-
height纹理高度number是-
url纹理图片urlstring是-
waterColor水颜色string | number | Color--
sunDirection太阳方向Vector3--
sunColor太阳颜色string | number | Color--