案例展示

创建平面圆形、 创建平面

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

<script setup>
import { onMounted } from 'vue'
let TO = null;
onMounted(() => {
  //初始化场景
  TO = new ThingOrigin("fileModel", document.getElementById("TO"));

  createCircle();
  createPlane();
})

function createCircle() {
  //创建平面的圆形
  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);
}

function createPlane() {
  //创建平面
  TO.model.initPlane(
    {
      position: {//位置
        x: 0,
        y: 20,
        z: 0,
      },
      scale: {//缩放
        x: 2,
        y: 2,
        z: 2,
      },
      material: {//材质
        color: {
          color: "#f00"
        }
      },
    }
  ).then((plane) => {  
     //添加到场景中
  TO.scene.add(plane);
})

}


</script>

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

API 介绍

model.initCircle

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

model.initPlane

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

参数说明：

参数名	说明	类型	必填	默认值
modelInfo	模型参数	modelInfoParams	-	-