分享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>

这段代码创建了一个简单的Babylon.js 3D场景，包括一个立方体和一个地面。代码中还包含了一个简单的Web调试器，可以用来检查场景中的所有对象。这个例子可以作为开发者学习和实践如何使用Babylon.js的起点。