vue3 + Babylon.js 构建Web 3D场景

<script setup>

import { ref, getCurrentInstance, onMounted, beforeUnmount } from 'vue'

import * as BABYLON from '@babylonjs/core/Legacy/legacy' // 全部引入

import '@babylonjs/loaders' // 模型加载loader

import * as GUI from '@babylonjs/gui/2D' // 交互组件

const { proxy } = getCurrentInstance()

const emit = defineEmits(['customChange'])

let engine = ref(null)

let scene = ref(null)

let camera = ref(null)



// 模型加载进度百分比

let progress = ref(0)

// 是否完成模型渲染

let isRendering = ref(false)

// 是否展示视频

let showVideo = ref(false)



// 自适应渲染

const engineResize = ()=> {

    engine.resize();

}

// 重置模型

const reset = ()=> {

    scene.activeCamera.restoreState();

}

let activeModel = null;
let activeColor = null;
let sprite1 = null;

//Animation Camera position
        const animateCameraToPosition = (speed, frameCount, newPos)=> {
            let ease = new BABYLON.CubicEase();
            ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
            //BABYLON.Animation.CreateAndStartAnimation = function(name, mesh, targetProperty, framePerSecond, totalFrame, from, to, loopMode);
            BABYLON.Animation.CreateAndStartAnimation('a1', scene.activeCamera, 'position', speed, frameCount, this.scene.activeCamera.position, newPos, 0, ease);
            //scene.activeCamera.setPosition(newPos);
        }
        const animateCameraTargetToPosition = (speed, frameCount, newPos)=> {
            let ease = new BABYLON.CubicEase();
            ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
            BABYLON.Animation.CreateAndStartAnimation('a2', scene.activeCamera, 'target', speed, frameCount, scene.activeCamera.target, newPos, 0, ease);
            //scene.activeCamera.setTarget(newPos);
        }
        const onPointerDown =(e)=>{
            let pickResult = scene.pick(scene.pointerX, scene.pointerY,
            null, false, null, (p0, p1, p2, ray) => {
                let p0p1 = p0.subtract(p1);
                let p2p1 = p2.subtract(p1);
                let normal = BABYLON.Vector3.Cross(p0p1, p2p1);
                return (BABYLON.Vector3.Dot(ray.direction, normal) < 0);
            });
            if(pickResult.hit) {
                if(pickResult.pickedMesh.name.includes("Box")){

                    // ** Disable all before apply Outline Render  **
                    scene.meshes.forEach((mesh)=>{
                        if(mesh.name.indexOf("") != -1){
                            mesh.renderOverlay = false;
                        }
                    });

//let pbr = pickResult.pickedMesh.material
//pbr.albedoColor = new BABYLON.Color3(0.71, 0.67, 0.61) // 反射颜色
//pbr.metallic = 1 // 金属
//pbr.roughness = 0.5 // 粗糙

                    // Outline Render
                    let StudyArea = scene.getMeshByName(pickResult.pickedMesh.name);
                    StudyArea.renderOverlay = true;
                    
                    let oldPivotTranslation = pickResult.pickedMesh.getBoundingInfo().boundingBox.centerWorld.clone();

                    let postion = new BABYLON.Vector3(oldPivotTranslation._x+30,oldPivotTranslation._y+30,oldPivotTranslation._z+30)
                    let speed1 = 500;
                    let speed2 = 500;
                    let frameCount = 200;
                    animateCameraToPosition(speed1, frameCount, postion);
                    animateCameraTargetToPosition(speed2, frameCount, oldPivotTranslation);