babylon101| 01. first steps （入门）

最新推荐文章于 2023-04-07 12:53:35 发布

酱肉包-

最新推荐文章于 2023-04-07 12:53:35 发布

阅读量206

点赞数

分类专栏： babylon101

本文链接：https://blog.csdn.net/weixin_40960487/article/details/125572286

版权

babylon101 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Babylonjs是利用HTML5中的canvas元素进行3D场景搭建的方法

Playground 游乐场

在线搭建babylon三维场景，快速简便，既可以构建自己的场景，也可以查看别人的实例

一个模板:

var createScene = function () {

    // Create the scene space 创建场景
    var scene = new BABYLON.Scene(engine);

    // Add a camera to the scene and attach it to the canvas 添加相机，把场景绑定到canvas元素上
    var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);

    // Add lights to the scene 添加光线
    var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene);
    var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(0, 1, -1), scene);

    // This is where you create and manipulate meshes 添加场景中的实体
    var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {}, scene);

    return scene;

};

在自己的HTML页面中使用babylonjs

构建自己的场景需要引用BabylonJS JavaScript 脚本，为了支持移动设备的操作还需要加载PEP事件系统

在<script>标签中的createScene()函数

一个html模板如下：

<!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>
        <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
        <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script><!--支持触屏操作-->
    </head>

   <body>

    <canvas id="renderCanvas" touch-action="none"></canvas> //touch-action="none" for best results from PEP

    <script>
        var canvas = document.getElementById("renderCanvas"); // Get the canvas element 
        var engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

        /******* Add the create scene function ******/
        /******* 添加场景构造函数 ******/
        var createScene = function () {

            // Create the scene space
            //创建场景空间
            var scene = new BABYLON.Scene(engine);
            //添加相机
            // Add a camera to the scene and attach it to the canvas
            var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, new BABYLON.Vector3(0,0,5), scene);
            camera.attachControl(canvas, true);

            // Add lights to the scene
            //添加光线
            var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene);
            var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(0, 1, -1), scene);

            // Add and manipulate meshes in the scene
            //添加实体
            var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter:2}, scene);

            return scene;
        };
        /******* End of the create scene function ******/    
        /******* 构造函数结束 ******/    

        var scene = createScene(); //Call the createScene function 调用场景构造函数

        // Register a render loop to repeatedly render the scene
        // 注册一个循环事件去重复渲染场景
        engine.runRenderLoop(function () { 
                scene.render();
        });

        // Watch for browser/canvas resize events
        //控制场景大小变换
        window.addEventListener("resize", function () { 
                engine.resize();
        });
    </script>

   </body>

</html>

效果如下：