案例展示

创建基础模型

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

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

  createCube();
  createSphere();
  createCone();
  createCylinder();
});

function createCube() {
  //创建立方体
  let cube = TO.model.initCube({
    position: {//位置
      x: -50,
      y: 5,
      z: 0,
    },
    material: {//材质
      color: "#f00",
    },
  });
  //添加到场景中
  TO.scene.add(cube);
}

function createSphere() {
  //创建球体
  let sphere = TO.model.initSphere({
    position: {//位置
      x: -20,
      y: 10,
      z: 0,
    },
    material: {//材质
      color: "#0000ff",
    },
  });
  //添加到场景中
  TO.scene.add(sphere);
}

function createCone() {
  //创建圆锥
  let cone = TO.model.initCone({
    position: {//位置
      x: 10,
      y: 10,
      z: 0,
    },
    material: {//材质
      color: "#ffff00",
    },
  });
  //添加到场景中
  TO.scene.add(cone);
}

function createCylinder() {
  //创建圆柱体
  let cylinder = TO.model.initCylinder({
    position: {//位置
      x: 40,
      y: 10,
      z: 0,
    },
    material: {//材质
      color: "#ff00ff",
    },
  });
  //添加到场景中
  TO.scene.add(cylinder);
}
</script>

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

API 介绍

model.initCube

方法签名	返回值	描述
initCube(modelInfo?: modelInfoParams, material?: Material)	Object3D	创建立方体

model.initSphere

方法签名	返回值	描述
initSphere(modelInfo?: modelInfoParams, material?: Material)	Object3D	创建球体

model.initCone

方法签名	返回值	描述
initCone(modelInfo?: modelInfoParams, material?: Material)	Object3D	创建圆锥

model.initCylinder

方法签名	返回值	描述
initCylinder(modelInfo?: modelInfoParams, material?: Material)	Object3D	创建圆柱体

参数说明：

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