案例展示

创建 Group

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

<script setup>
import { onMounted } from 'vue'

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

    //创建Group
    const group = TO.model.initGroup()
    //创建圆柱体
    const cylinder = TO.model.initCylinder({
        position: {
            x: 10,
            y: 0,
            z: 0
        },
        material: {
            color: 0xff0000
        }
    })
    //创建立方体
    const cube = TO.model.initCube({
        position: {
            x: -20,
            y: 0,
            z: 0
        },
        material: {
            color: 0x0000ff
        }
    })
    //填加到组内
    group.add(cylinder, cube)
    group.position.set(0, 10, 0)
    //添加到场景内
    TO.scene.add(group)
    //创建变换控制器
    TO.controls.initTransform()
    //设置变换器模式-移动
    TO.controls.setTransformMode(group, 'translate')
})
</script>

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

API 介绍

model.initGroup

方法签名	返回值	描述
initGroup(modelInfo?: modelInfoParams)	Object3D	创建 Group

参数说明：

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