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,
            },
        }
    })

    const colors = [0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff, 0x00ffff, 0xffffff, 0x888888,
        0x336699, 0x993366, 0x669933, 0x999933, 0x339933, 0x993399, 0x339999, 0x000000];
    const matrixSize = 4;
    const spacing = 22;
    for (let i = 0; i < matrixSize; i++) {
        for (let j = 0; j < matrixSize; j++) {
            const sphereGeometry = TO.model.initSphere();
            const material = TO.material.initPhysicalMaterial(
                colors[i * matrixSize + j],
                null,
                null,
                0,
                1,
                0,
                0,
                0,
                2
            );
            sphereGeometry.material = material;
            sphereGeometry.position.x = (i - (matrixSize - 1) / 2) * spacing;
            sphereGeometry.position.y = (j - (matrixSize - 1) / 2) * spacing;
            TO.scene.add(sphereGeometry);
        }
    }
});


</script>

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

API 介绍 ​

material.initPhysicalMaterial ​

方法签名返回值描述
initPhysicalMaterial(color: string | number | Color, map?: Texture, envMap?: Texture, metalness?: number, roughness?: number, clearcoat?: number, clearcoatRoughness?: number, envMapIntensity?: number, side?: number)MeshPhysicalMaterial创建物理网格材质

参数说明：

参数名类型是否必选默认值描述
colorstring | number | Color是-材质的颜色
mapTexture否-颜色贴图
envMapTexture否-环境贴图
metalnessnumber否-金属度，范围从 0.0（非金属）到 1.0（金属）
roughnessnumber否1.0粗糙度，范围从 0.0（平滑镜面）到 1.0（完全漫反射）
clearcoatnumber否0.0Clear coat 层强度，范围从 0.0 到 1.0
clearcoatRoughnessnumber否0.0Clear coat 层粗糙度，范围从 0.0 到 1.0
envMapIntensitynumber否-环境贴图强度缩放因子
sidenumber否0（正面）渲染面：正面(0)，背面(1)，双面(2)