ThingOrigin.js

案例展示 ​

创建基础线条材质

<template>
    <div id="TO"></div>
  </template>
  
  <script setup>
  import { onMounted } from 'vue';
 
  
  onMounted(() => {
    let TO = new ThingOrigin("text",document.getElementById("TO"),{
      helper: {
        axes: {
          active: false,
        },
        grid: {
          active: false,
        },
      }}
    );

    var material_1 = TO.material.initMeshBasicMaterial("#73B5AE"); 
    var material_2 = TO.material.initMeshBasicMaterial("#78CFF6"); 
    var material_3 = TO.material.initMeshBasicMaterial("#459d93"); 
    var material_4 = TO.material.initMeshBasicMaterial("#808AF8"); 

    let materialList = [material_1, material_2, material_3, material_4];

    let carInfo = {
        modelType: "gltf",
        modelName: "car",
        base: {
            modelUrl: `${import.meta.env.BASE_URL}models/car.gltf`,
        },
        scale: {
            x: 12,
            y: 12,
            z: 12,
        },
    }
    TO.model.initFileModel(carInfo).then((model) => {
        TO.scene.add(model.scene);
        let car = TO.scene.getObjectByProperty("name", "car")
        let index = 0;
        car.traverse((child) => {
            if (child.isMesh) {
                child.material = materialList[index];
                index++;
            }
        })
    })

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

API 介绍 ​

material.initLineBasicMaterial ​

方法签名返回值描述
initLineBasicMaterial(color: string | number | Color, linecap?: string, linejoin?: string, map?: Texture)LineBasicMaterial创建基础线条材质

参数说明：

参数名类型是否必选默认值描述
colorstring | number | Color是-线条材质颜色
linecapstring否'round'线条两端样式，可选值为 'butt', 'round' 和 'square'
linejoinstring否'round'线连接节点样式，可选值为 'round', 'bevel' 和 'miter'
mapTexture否-纹理贴图