babylon.js第一章01：第一个场景和模型

Only_city

已于 2023-07-18 12:04:52 修改

阅读量313

点赞数

分类专栏： babylon.js 文章标签： javascript 开发语言前端 3d 数据可视化

于 2023-07-18 10:40:53 首次发布

本文链接：https://blog.csdn.net/weixin_63007851/article/details/131781398

版权

babylon.js 专栏收录该内容

8 篇文章 3 订阅

订阅专栏

看完初识babylon.js这一章，或许没有接触过threejs或者web3d开发的初学者也有和我一样的疑问，那么就让我们从官方文档的第一章开始学期，逐渐深入babylon.js。

第一个场景和模型

无论你是在创建一个完整的世界，还是仅仅将一个模型放入一个网页，你都需要一个场景来包含这个世界或者模型，一个摄像机来观察它，一盏灯来照亮它，当然，至少一个可以观察的对象作为一个模型。所有的模型，不管是一个盒子还是一个复杂的字符，都是由一个三角形或方面的网格组成的。

向你的第一个世界问好：

为了方便大家开发，在这里给大家一个通用html模板方便编写代码，查看效果:

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

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>03.设置你的第一个web应用</title>

    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>

    <!-- 引入babylonjs -->
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <!-- 引入babylonjs加载器 -->
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <!-- 引入触摸屏控制js -->
    <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>
        const canvas = document.getElementById("renderCanvas"); // 获取canvas元素
        const engine = new BABYLON.Engine(canvas, true);// 创建3d渲染引擎

        // 创建场景函数
        const createScene = function () {
            // 创建引擎
            const scene = new BABYLON.Scene(engine);

            // 在这里编写你的代码




            // 返回场景
            return scene;
        }

        let scene = createScene();
        // 注册渲染循环以重复渲染场景
        engine.runRenderLoop(function () {
            scene.render();
        });

        // 监听窗口变化，改变渲染尺寸
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>

</html>

所有使用babylon.js引擎的项目都需要一个添加了摄像机和灯光的场景。然后我们可以创建我们的盒子。

等。。。你问巴比伦.js引擎是什么？很好的问题。下面看到的引擎变量是负责与较低级别的 API（如 WebGL、音频等）接口的类。创建巴比伦场景（将视觉对象呈现到屏幕的上下文）的构造函数需要引擎与这些较低级别的 API 通信。这就是创建场景时需要引擎变量的原因。

//创建引擎
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);
//将弧形相机绑定到canvas画布
camera.attachControl(canvas, true);

//创建一个灯光
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

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

以上的代码是一个基础的场景结构，那么我们需要将他放入到一个场景创建函数中，然后返回这个场景，方便调用整个场景。

//创建场景函数
const createScene = () => {
    //创建引擎
    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));
    camera.attachControl(canvas, true);
    //创建灯光
    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0));
    //创建立方体
    const box = BABYLON.MeshBuilder.CreateBox("box", {});
    //返回场景
    return scene; 
}

效果图如下:

1由于当前默认只有一个场景scene,所以你可已看到，相机，灯光，立方体的参数中并没有出现scene，因为默认为当前场景可以省略。

那么请打开编辑器试试吧。

Only_city

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
babylon.js第一章01：第一个场景和模型

看完初识babylon.js这一章，或许没有接触过threejs或者web3d开发的初学者也有和我一样的疑问，那么就让我们从官方文档的第一章开始学期，逐渐深入babylon.js。
复制链接

扫一扫