案例展示

通过相机控制实现模型聚焦和视角切换效果

<template>
    <div style="position: relative">
        <div id="TO"></div>

        <el-button type="primary" size="small" id="btn1" @click="focusOn(0)">聚焦ABB机器人</el-button>
        <el-button type="primary" size="small" id="btn2" @click="focusOn(1)">聚焦数字机床</el-button>
        <el-button type="primary" size="small" id="btn3" @click="lookAt(2)">观察精雕机床</el-button>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { ElButton, ElInput, ElCard } from 'element-plus'
import { Camera } from '@element-plus/icons-vue'
let TO

let modelList = [
    {
        modelType: 'gltf', //模型类型
        modelName: 'ABB机器人-1', //模型名称
        position: {
            //模型位置
            x: 0,
            y: 0,
            z: 0
        },
        base: {
            //模型地址
            modelUrl: 'https://124.70.30.193:8443/model2/loadFileAsId/56201403'
        }
    },
    {
        rotation: {
            x: 3.14,
            y: 0,
            z: 3.14
        },
        modelType: 'gltf',
        modelName: '数字机床-1',
        position: {
            x: 46,
            y: 0,
            z: -4
        },
        base: {
            modelUrl: 'https://124.70.30.193:8443/model2/loadFileAsId/878966042'
        }
    },
    {
        rotation: {
            x: 0,
            y: 3.14,
            z: 0
        },
        modelType: 'gltf',
        modelName: '精雕机床-1',
        position: {
            x: -6,
            y: 0,
            z: -24
        },
        base: {
            modelUrl: 'https://124.70.30.193:8443/model2/loadFileAsId/701730674'
        }
    },
    {
        modelType: 'gltf',
        modelName: '非皮带传送带-1',
        position: {
            x: -22.421823174685755,
            y: 0,
            z: 19.607374310745982
        },
        base: {
            modelUrl: 'https://124.70.30.193:8443/model2/loadFileAsId/258642254'
        }
    },
    {
        modelType: 'gltf',
        modelName: '非皮带传送带-2',
        position: {
            x: 39.53851617816624,
            y: 0,
            z: 19.794253654138004
        },
        base: {
            modelUrl: 'https://124.70.30.193:8443/model2/loadFileAsId/258642254'
        }
    }
]

onMounted(() => {
    initScene()
})

function initScene() {
    // 初始化场景
    TO = new ThingOrigin('fileModel', document.getElementById('TO'), {
        helper: {
            // 辅助工具
            axes: {
                active: false
            },
            grid: {
                active: false
            }
        },
        camera: {
            // 相机配置
            position: {
                // 相机位置
                x: 0,
                y: 50,
                z: 200
            }
        }
    })

    //导入模型
    //使用批量加载方法
    TO.model.loadMultipleModels(modelList, (model, index) => {
        console.log(`模型 ${model.name} 加载完成，添加到场景`)
        TO.scene.add(model) //添加到场景
    })
}

function focusOn(index) {
    let model = TO.scene.getObjectByProperty('name', modelList[index].modelName) //获取模型
    TO.camera.focusOn(model) //聚焦模型
    console.log(TO.camera)
}

function lookAt(index) {
    TO.camera.lookAt(modelList[index].modelName, 2000, 2) //观察模型
}
</script>

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

#btn1 {
    position: absolute;
    top: 10px;
    right: 10px;
}

#btn2 {
    position: absolute;
    top: 10px;
    right: 125px;
}

#btn3 {
    position: absolute;
    top: 10px;
    right: 230px;
}
</style>

API 介绍

camera.focusOn

方法签名	返回值	描述
focusOn(model: Object3D)		聚焦模型

参数说明：

参数名	说明	类型	必填	默认值
model	模型	Object3D	是	-

camera.lookAt

方法签名	返回值	描述
lookAt(modelName: string, time: number, scaleRadius: number = 1)		相机观察某物体

参数说明：

参数名	说明	类型	必填	默认值
modelName	模型名称	string	是	-
time	动画时长	number	是	-
scaleRadius	相机观察距离	number	否	1