案例展示

法线纹理贴图

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

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

onMounted(async () => {
    //初始化场景
    let TO = new ThingOrigin('fileModel', document.getElementById('TO'), {
        scene: {
            ground: {
                //设置地面
                active: false
            },
            background: {
                type: 'color', //设置背景颜色
                color: {
                    alpha: 1, // 透明度 取值范围0~1
                    color: '#999999' // 背景颜色
                }
            }
        },
        camera: {
            // 相机配置
            position: {
                // 相机位置
                x: 0,
                y: 50,
                z: 400
            }
        },
        helper: {
            //辅助工具
            axes: {
                active: false
            },
            grid: {
                active: false
            }
        }
    })
    let maps = null
    //等待初始化材质贴图完成
    await initTextureMaps()
    async function initTextureMaps() {
        // 批量创建材质贴图
        maps = await TO.material.initTextureMaps({
            map: { url: `${import.meta.env.BASE_URL}img/materials/gray_rocks_diff_2k.webp` }, //基础贴图
            displacement: { url: `${import.meta.env.BASE_URL}img/materials/gray_rocks_disp_2k.webp` } //位移贴图
        })
    }
    //创建高光材质
    const material = TO.material.initPhongMaterial({
        map: maps.map, //贴图
        displacementMap: maps.displacement //位移贴图
    })

    //创建网格模型
    TO.model
        .initPlane({
            name: 'wallMesh',
            base: {
                width: 500, //平面在 X 轴方向的宽度
                height: 500 //平面在 Y 轴方向的高度
            }
        })
        .then((mesh) => {
            mesh.material = material
            //添加到场景中
            TO.scene.add(mesh)
        })
})
</script>

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

API 介绍

material.initTextureMaps

方法签名	返回值	描述
initTextureMaps(params: MaterialMapsParams)	Texture	批量创建纹理贴图

MaterialMapsParams 参数说明：

参数名	说明	类型	必填	默认值
map	基础贴图	Omit<BaseMapParams, "mapType">	-	-
normal	通过法线向量模拟表面细节，比 bumpMap 更精确	Omit<NormalMapParams, "mapType">	-	-
roughness	控制表面粗糙度，影响高光大小和反射清晰度	Omit<BaseMapParams, "mapType">	-	-
metalness	控制表面金属属性，影响反射和环境映射效果	Omit<BaseMapParams, "mapType">	-	-
ao	环境光遮蔽贴图，增强模型立体感，不影响光照方向	Omit<BaseMapParams, "mapType">	-	-
emissive	自发光贴图，使物体表面发光，不受光照影响	Omit<BaseMapParams, "mapType">	-	-
displacement	通常用于更强烈的表面变形	Omit<BaseMapParams, "mapType">	-	-
alpha	控制材质透明度，黑色透明，白色不透明，需配合 transparent: true 使用	Omit<BaseMapParams, "mapType">	-	-
bump	通过明暗差异模拟表面凹凸，计算量小于法线贴图	Omit<BaseMapParams, "mapType">	-	-