案例展示

标准网格材质

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

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

onMounted(() => {
  //初始化场景
  let TO = new ThingOrigin("fileModel", document.getElementById("TO"), {
    scene: {
      ground:{
        active: false,
      },
      background: {
        type: 'color',//设置背景颜色
        color: {
          alpha: 1, // 透明度 取值范围0~1
          color: "#000000",// 背景颜色
        },
      },
    },
    camera: { // 相机配置
      position: { // 相机位置
        x: 0,
        y: 50,
        z: 200
      }
    },
    lights: [ //多光源设置以突出材质光泽
      {
        name: "ambient",
        type: "AmbientLight",
        color: '#666666',
        intensity: 0.8,
        visible: true,
      },
      {
        name: "mainLight",
        type: "DirectionalLight",
        color: '#ffffff',
        intensity: 1.5,
        visible: true,
        position: {
          x: 100,
          y: 200,
          z: 100,
        },
      },
      {
        name: "fillLight",
        type: "PointLight",
        color: '#ccddff',
        intensity: 0.8,
        visible: true,
        position: {
          x: -100,
          y: 100,
          z: -100,
        },
      },
      {
        name: "rimLight",
        type: "SpotLight",
        color: '#ffffff',
        intensity: 1.2,
        visible: true,
        position: {
          x: 0,
          y: 150,
          z: -200,
        },
        target: { x: 0, y: 0, z: 0 },
        angle: Math.PI / 6,
        penumbra: 0.5,
      },
    ],
    helper: {//辅助工具
      axes: {
        active: false,
      },
      grid: {
        active: false,
      },
    }
  })
//设置颜色
    const colors = [0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff, 0x00ffff, 0xf2f2f2, 0x888888,
        0x336699, 0x993366, 0x669933, 0x999933, 0x339933, 0x993399, 0x339999, 0x0d77ff];

    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({
              base:{
                widthSegments: 64,
                heightSegments: 64,
              }
            });
            //创建材质 - 光泽感 + 厚重感
            const material = TO.material.initStandardMaterial({
                color: colors[i * matrixSize + j],
                // 低粗糙度 = 高光泽感（镜面反射效果）
                roughness: 0.15,
                // 高金属度 = 厚重金属质感
                metalness: 0.85,
                // 清漆层增加额外的高光反射（类似车漆效果）
                clearcoat: 0.8,
                clearcoatRoughness: 0.1,
                // 增加环境光反射强度
                envMapIntensity: 1.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.initStandardMaterial

方法签名	返回值	描述
initStandardMaterial(params: Partial<MeshStandardMaterialParameters> = {})	MeshStandardMaterial	创建标准网格材质

MeshStandardMaterialParameters 参数说明：

参数名	说明	类型	必填	默认值
color	材质的颜色	string | number | Color	-	0x000000
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.0
roughness	粗糙度（范围 0.0-1.0）	number	-	1.0