案例展示

创建基础模型

<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
            }
        }
    })

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

function createCube() {
    //创建立方体
    let cube = TO.model.initCube({
        position: {
            //位置
            x: -50,
            y: 5,
            z: 0
        },
        scale: {
            //缩放
            x: 15,
            y: 15,
            z: 15
        },
        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	-	-