出識babylonjs

麦块程序猿發表於2024-05-22
JS

babylon.js初識程式碼

<template>
    <div style="width:100%;height:100%;overflow: hidden;" class="_Main_">

        <div id="babylonJS" style=" float: left; width: 100%; height: 100%; ">
            <canvas ref="renderCanvas" id="renderCanvas" style="width: 100%; height: 100%;" ></canvas>
        </div>

    </div>
</template>

<script lang="ts">

    ...省略無數程式碼

import * as BABYLON from "babylonjs";
import 'babylonjs-loaders';

@VueComponent("Main")
class Main {
    props = {}

    $refs:{
        renderCanvas: HTMLCanvasElement
    }
    $nextTick:(callback: () => void) => void

    ...省略無數程式碼
    
    mounted() {
        this.$nextTick(() => {
            let canvas = this.$refs.renderCanvas;
        
            // 建立引擎
            var engine = new BABYLON.Engine(canvas, true);
            var createScene = function () {
                // 建立場景
                var scene = new BABYLON.Scene(engine);

                // 建立燈光
                var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(2000,4000,5000), scene);

                // 建立視角相機並設定位置
                var camera = new BABYLON.ArcRotateCamera("Camera", (Math.PI / 2), (Math.PI / 2), 0, new BABYLON.Vector3(200, 800, -900), scene);
                // 提交相機控制權給使用者輸入，使用者可以透過滑鼠滑動介面
                camera.attachControl(canvas, false);//(畫布,阻止預設事件)

                // 匯入模型（名稱，地址，檔名，場景，匯入完成的回撥）
                BABYLON.SceneLoader.ImportMesh("xxx.babylon", "./misc/", "xxx.babylon", scene, function (newMeshes) {
                    // 模型展示體積過大按比例縮小
                    newMeshes[0].scaling = new BABYLON.Vector3(0.1, 0.1, 0.1);
                    // 設定相機視線的向量
                    camera.target = new BABYLON.Vector3(200, 400, 0);
                });

                // 每一幀渲染都呼叫
                scene.registerBeforeRender(function () {
                    // 燈光追隨相機位置
                    light.position = camera.position;
                });

                return scene;
            }
            
            var scene = createScene(); // 首先呼叫它並賦值給一個變數
            // 註冊一個渲染迴圈來重複渲染場景
            engine.runRenderLoop(function () { 
                scene.render();
            });

            this._WebEvents.addWindowResizeListener("babylonEngineResize",()=>{
                // 觀察瀏覽器畫布的“resize”事件，也就是大小出現調整的事件
                engine.resize();
            });
        })
    }
    
    ...省略無數程式碼
}

export default defineComponent(new Main() as any)

    
</script>

<style scoped>
    
</style>

注：

1、SolidWorks匯出模型為.STL檔案後，再透過Babylon.js Sandbox將.STL匯出為.babylon檔案，就可以給babylonjs使用了。

2、threejs能做的，babylonjs都能做，babylonjs能做的threejs不一定能做。

相關文章