案例展示

创建 Group

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

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

onMounted(() => {
    let group

    // 初始化场景
    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
                }
            }
        },
        () => {
            // 渲染器 domElement 就绪后再挂载变换控制器
            TO.controls.setTransformMode(group, 'translate')
        }
    )

    //创建Group
    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
        },
        scale: {
            x: 15,
            y: 15,
            z: 15
        },
        material: {
            color: 0x0000ff
        }
    })
    //填加到组内
    group.add(cylinder, cube)
    group.position.set(0, 10, 0)
    //添加到场景内
    TO.scene.add(group)
})
</script>

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

API 介绍

model.initGroup

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

参数说明：

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