基于Babylon.js的简易3D模型网页展示

// 引入Babylon.js库
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
 
<!-- 为Babylon.js准备一个HTML元素作为容器 -->
<canvas id="renderCanvas" style="width: 100%; height: 100%;"></canvas>
 
<script>
    const canvas = document.getElementById('renderCanvas');
    const engine = new BABYLON.Engine(canvas, true);
 
    // 当浏览器窗口大小变化时，相应调整Babylon.js引擎的大小
    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);
 
        // 加载3D模型
        BABYLON.SceneLoader.Append('./', 'model.babylon', scene);
 
        return scene;
    };
 
    // 创建并启动场景
    const scene = createScene();
    engine.runRenderLoop(function () {
        scene.render();
    });
</script>

这段代码展示了如何在网页中嵌入一个简易的3D模型展示。首先，我们引入了Babylon.js库和对应的模型加载器。然后，我们创建了一个canvas元素作为渲染的容器，并初始化了Babylon.js引擎。接着，我们创建了一个新的场景，并添加了一个旋转相机和一个半球光源。最后，我们使用SceneLoader.Append方法加载了一个名为'model.babylon'的3D模型，并启动了渲染循环。这个简易示例展示了如何在网页中集成基于Babylon.js的3D内容。