ThingOrigin.js

案例展示 ​

物理网格材质

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

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

onMounted(() => {
    //初始化场景
    let TO = new ThingOrigin("fileModel", document.getElementById("TO"), {
        helper: {//辅助工具
            axes: {
                active: false,
            },
            grid: {
                active: false,
            },
        }
    })

    //导入模型
    TO.model.initFileModel(
        {
            modelName: "fileModel-" + new Date().getTime(), //模型名称
            base: {
                modelUrl: `${import.meta.env.BASE_URL}models/emerald.obj`, //模型地址
            },
            modelType: "obj", //模型类型
            scale: { //缩放大小
                x: 3,
                y: 3,
                z: 3,
            },
            position:{
                y: 40
            }
        }
    ).then((model) => {
        //添加到场景中
        const material = TO.material.initPhysicalMaterial({
            color: 0x0000ff,
            metalness: 0,
            roughness: 0,
            opacity: 0.25,
            transparent: true,
            envMapIntensity: 10,
            premultipliedAlpha: true
        });
        model.traverse((child) => {
            if (child.isMesh) {
                // 设置材质
                child.material = material;
            }
        });
        TO.scene.add(model);
    });

})
</script>

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

API 介绍 ​

material.initPhysicalMaterial ​

方法签名返回值描述
initPhysicalMaterial(params: Partial<MeshPhysicalMaterialParameters> = {})MeshPhysicalMaterial创建物理网格材质

MeshPhysicalMaterialParameters 参数说明：

参数名说明类型必填默认值
color材质的颜色string | number | Color-0xffffff
transparent是否开启透明度boolean-false
opacity透明度（范围 0.0-1.0）number-1.0
side渲染面：FrontSide(正面)、BackSide(背面)、DoubleSide(双面)string-FrontSide
emissive放射（光）颜色string | number | Color-0x000000
emissiveIntensity放射光强度number-1
metalness金属度（范围 0.0-1.0）number-0
roughness粗糙度（范围 0.0-1.0）number-1.0
clearcoatClear coat 层强度（范围 0.0-1.0）number-0.0
clearcoatRoughnessClear coat 层粗糙度（范围 0.0-1.0）number-0.0