ThingOrigin.js

案例展示 ​

标准网格材质

<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",// 背景颜色
        },
      },
    },
    lights: [ //设置环境光
      {
        name: "light1",
        type: "AmbientLight",
        color: '#eeeeee',
        intensity: 1,
        visible: true,
        position: {
          x: 150,
          y: 150,
          z: 150,
        },
      },
    ],
    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: 32,
                heightSegments: 32,
              }
            });
            //创建材质
            const material = TO.material.initStandardMaterial(
                {
                    color: colors[i * matrixSize + j]
                }
            );
            //设置材质
            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