案例展示

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

<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';
const isActive = ref(false);
let TO;

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


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

function initScene() {
    // 初始化场景
    TO = new ThingOrigin("fileModel", document.getElementById("TO"), {
        helper: { // 辅助工具
            axes: {
                active: false,
            },
            grid: {
                active: false,
            },
        }
    })

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

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

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

案例展示 ​

API 介绍 ​

camera.focusOn ​

camera.lookAt ​

案例展示

API 介绍

camera.focusOn

camera.lookAt