案例展示

创建面板

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

<script setup>
import { onMounted } from 'vue'
let TO = null;
onMounted(() => {
  //初始化场景
  TO = new ThingOrigin("fileModel", document.getElementById("TO"), {
    scene: {//场景
      background: { //背景颜色
        type: 'color',
        color: {
          alpha: 1,
          color: '#000000'
        }
      },
      ground: { //地面
        active: false
      }
    },
    camera: { // 相机配置
      position: { // 相机位置
        x: 0,
        y: 50,
        z: 200
      }
    }
  });
  createPlaneHelper();
})

function createPlaneHelper() {
  //创建面板
  let planeHelper = TO.helper.initPlaneHelper(
    {
      position: {//位置
        x: 0,
        y: 120,
        z: 0,
      },
      rotation: {//旋转(弧度)
        x: -Math.PI / 2,
        y: 0,
        z: 0,
      },
      base: {
        //法向量
        normal: {
          x: 0,
          y: 1,
          z: 1,
        },
        distance: 0, //平面到原点的距离
        size: 120,//大小
      },
      material: {//材质
        color: "#f00"
      },
    }
  )
  //添加到场景中
  TO.scene.add(planeHelper);
}


</script>

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

API 介绍

helper.initPlaneHelper

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

参数说明：

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