出识babylonjs

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("", "./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不一定能做。