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: true,
      },
      grid: {
        active: true,

      },
    }
  })
  //创建圆形的平面
  let circle = TO.model.initCircle(
    {
      position: {
        x: 0,
        y: 0,
        z: 0,
      },
      scale: {
        x: 1,
        y: 1,
        z: 1,
      },
      rotation: {
        x: Math.PI / 2,
        y: 0,
        z: 0,
      },
      base: {
        radius: 25,
        segments: 32,
        thetaStart: 0,
        thetaLength: Math.PI * 2,
      },
      material: {
        color: "#ff0",
        doubleSide: true,
      },
    }
  );
  TO.scene.add(circle);

  //创建平面
  let plane = TO.model.initPlane(
    {
      position: {
        x: 0,
        y: 20,
        z: 0,
      },
      scale: {
        x: 2,
        y: 2,
        z: 2,
      },
      rotation: {
        x: 0,
        y: 0,
        z: 0,
      },
      base: {
        width: 10,
        height: 10,
        widthSegments: 32,
        heightSegments: 32,
      },
      material: {
        color: "#f00",
        type: "MeshBasicMaterial",
      },
    }
  )
   TO.scene.add(plane);

  //创建正方形的面板
    let planeHelper=TO.model.initPlaneHelper(
        {
          position: {
            x: 20,
            y: 20,
            z: 20,
          },
          scale: {
            x: 2,
            y: 2,
            z: 2,
          },
          rotation: {
            x: 0,
            y: 0,
            z: 0,
          },

          base: {
            face: {
              x: 0,
              y: 0,
              z: 0,
            },

            distance: 30,
            size: 100,
          },
          material: {
                color: "#ff0",
               },
        }
    );
   TO.scene.add(planeHelper)


})
</script>

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

API 介绍 ​

model.initCircle ​

方法签名返回值描述
initCircle(modelInfo?: any)Object3D (Mesh)创建圆形（平面）

参数说明：

参数名类型是否必选描述
modelInfomodelInfoParams否模型参数

model.initPlane ​

方法签名返回值描述
initPlane(modelInfo?: modelInfoParams)any (Object3D)创建平面

参数说明：

参数名类型是否必选描述
modelInfomodelInfoParams否模型参数

model.initPlaneHelper ​

方法签名返回值描述
initPlaneHelper(modelInfo?: modelInfoParams)Object3D创建面板

参数说明：

参数名类型是否必选描述
modelInfomodelInfoParams否模型参数