WebGL BabylonJS 如何创建场景

最新推荐文章于 2024-07-20 10:36:53 发布

Axlxhxx

最新推荐文章于 2024-07-20 10:36:53 发布

阅读量273

点赞数 10

文章标签： webgl javascript 前端开发语言 3d

本文链接：https://blog.csdn.net/creatlh/article/details/137277601

版权

介绍babylon场景创建的基本流程

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Babylon Template</title>

        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
        </style>

        <script src="https://cdn.babylonjs.com/babylon.js"></script>

    </head>

   <body>

	<canvas id="renderCanvas"></canvas>

	<script>
	//获取canvas对象
        const canvas = document.getElementById("renderCanvas");
    //创建渲染引擎
        const engine = new BABYLON.Engine(canvas, true); 
        const createScene = function () {
            // 创建场景
            const scene = new BABYLON.Scene(engine);
            // 创建相机
            const camera = new BABYLON.FreeCamera("camera1", 
                new BABYLON.Vector3(0, 5, -10), scene);
            // 设置相机目标
            camera.setTarget(BABYLON.Vector3.Zero());
            // 允许控制相机
            camera.attachControl(canvas, true);
            // 创建平行光，不然模型没有反射颜色
            const light = new BABYLON.HemisphericLight("light", 
                new BABYLON.Vector3(0, 1, 0), scene);
            // 设置灯光亮度
            light.intensity = 0.7;
            // 创建球体
            const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", 
                {diameter: 2, segments: 32}, scene);
            // 设置球体位置
            sphere.position.y = 1;
            // 创建一个平面
            const ground = BABYLON.MeshBuilder.CreateGround("ground", 
                {width: 6, height: 6}, scene);
            return scene;
        };
        const scene = createScene();
        // 循环渲染场景
        engine.runRenderLoop(function () {
                scene.render();
        });
        // 监听窗口尺寸变化
        window.addEventListener("resize", function () {
                engine.resize();
        });
	</script>

   </body>

</html>