分享babylon.js实现Web三维场景

// 引入Babylon.js库
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script src="https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
<link rel="stylesheet" href="https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.css">

// HTML 容器元素
<div id="renderCanvas" style="width: 100%; height: 100%;"></div>

<script>
    const canvas = document.getElementById('renderCanvas');
    const engine = new BABYLON.Engine(canvas, true);

    // 当浏览器窗口大小变化时，调整引擎大小
    window.addEventListener('resize', function () {
        engine.resize();
    });

    // 创建一个基本的三维场景
    const createScene = function () {
        const scene = new BABYLON.Scene(engine);
        const camera = new BABYLON.ArcRotateCamera('camera', -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0), scene);
        const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0, 1, 0), scene);
        camera.attachControl(canvas, false);

        // 创建一个立方体
        const box = BABYLON.MeshBuilder.CreateBox('box', { size: 1 }, scene);

        // 创建一个地面
        const ground = BABYLON.MeshBuilder.CreateGround('ground', { width: 5, height: 5 }, scene);

        return scene;
    };

    // 创建并启动Web调试器
    const scene = createScene();
    const inspector = new BABYLON.Inspector(scene, engine, canvas);
    engine.runRenderLoop(function () {
        scene.render();
    });
</script>