ThingOrigin.js

案例展示 ​

基础纹理贴图

<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: 200
            }
        },
        helper: {
            //辅助工具
            axes: {
                active: false
            },
            grid: {
                active: false
            }
        }
    })

    //等待初始化材质贴图完成
    //加载贴图纹理图像
    let texture1 = await TO.material.initTextureMap({
        url: `${import.meta.env.BASE_URL}img/materials/brick_diffuse.webp`, //红砖
        mapType: 'map'
    })
    //创建材质
    const material = TO.material.initBasicMaterial({
        color: 0xffffff,
        map: texture1
    })

    //创建网格模型
    const mesh = TO.model.initSphere({
        name: 'Mesh1',
        base: {
            radius: 30,
            widthSegments: 30,
            heightSegments: 30
        },
        position: { x: -70, y: 20, z: 0 }
    })
    mesh.material = material
    TO.scene.add(mesh)

    //加载贴图纹理图像
    let texture2 = await TO.material.initTextureMap({
        url: `${import.meta.env.BASE_URL}img/materials/raw_plank_wall_diff_2k.webp`, //木质地板
        mapType: 'map'
    })
    //创建材质
    const material2 = TO.material.initBasicMaterial({
        color: 0xffffff,
        map: texture2
    })

    //创建网格模型
    const mesh2 = TO.model.initSphere({
        name: 'Mesh2',
        base: {
            radius: 30,
            widthSegments: 30,
            heightSegments: 30
        },
        position: { x: 0, y: 20, z: 0 }
    })
    mesh2.material = material2
    TO.scene.add(mesh2)

    //加载贴图纹理图像
    let texture3 = await TO.material.initTextureMap({
        url: `${import.meta.env.BASE_URL}img/materials/FloorTile_S.webp`, //木质地板
        mapType: 'map'
    })
    //创建材质
    const material3 = TO.material.initBasicMaterial({
        color: 0xffffff,
        map: texture3
    })

    //创建网格模型
    const mesh3 = TO.model.initSphere({
        name: 'Mesh3',
        base: {
            radius: 30,
            widthSegments: 30,
            heightSegments: 30
        },
        position: { x: 70, y: 20, z: 0 }
    })
    mesh3.material = material3
    TO.scene.add(mesh3)
})
</script>

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

API 介绍 ​

material.initTextureMap ​

方法签名返回值描述
initTextureMap(params: BaseMapParams | NormalMapParams)Texture创建基础纹理贴图

BaseMapParams 参数说明：

参数名说明类型必填默认值
url贴图urlstring--
mapType贴图类型：map | normal | roughness | metalness | ao | emissive | displacement | alpha | bumpstring--

NormalMapParams 参数说明：

url 与 mapType 参数与 BaseMapParams 参数一致

参数名说明类型必填默认值
normalScale法线贴图特定参数（范围0-1）Vector2|number--