babylon.js入门基础【创建babylon场景需要什么】【绘制球】【绘制正方形】【绘制平面】

已于 2023-04-07 14:14:49 修改
阅读量1.1k 收藏 2
点赞数
分类专栏： babylon.js 文章标签： javascript html css 前端
于 2023-04-07 12:53:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48203828/article/details/130009409
版权

前言

创建场景七大步

第一步: 引入在线的babylon包 ：

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

第二步:创建一个容器:

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

第三步:样式

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

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

第四步:获取到canvas的dom对象：😀😀固定写法

        var canvas = document.getElementById("renderCanvas");

第五步:实例化3d引擎😀😀固定写法

 var engine = new BABYLON.Engine(canvas, true);

第六步:创建场景并返回场景对象（场景包含有 场景(Scene),相机(FreeCamera),灯光(HemisphericLight)、绘制(CreateSphere),地面(CreateGround),）🥰🥰🥰这个地方很关键

 var createScene = function () {
            //    创建场景对象
            var scene = new BABYLON.Scene(engine);
            //  创建FreeCamera, 并把相机位置设置到(x:0, y:5, z:-10)
            var camera = new BABYLON.FreeCamera("camera1",
                new BABYLON.Vector3(0, 5, -10), scene);
            //    将相机朝向设置到原点
            camera.setTarget(BABYLON.Vector3.Zero());
            //  相机事件绑定到canvas对象上面
            camera.attachControl(canvas, true);
            // 创建一个平衡光，将灯光位置设置到0 1 0
            var light = new BABYLON.HemisphericLight("light",
                new BABYLON.Vector3(0, 1, 0), scene);
            // 把灯光 0-1
            light.intensity = 0.7;

            // 创建一个球题 支持六个配置项 名称, 分割段数, 直径, 放置的场景, updatable, sideOrientation
            var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);
            // 将球上调到原点以上
            sphere.position.y = 0.1;

            // 创建一个自定义的地面
            var myGround = BABYLON.MeshBuilder.CreateGround("myGround", {width: 6, height: 4, subdivsions: 4}, scene);//subdivsions:将地面分成的几块
            // 返回场景
            return scene;
        };

第六步:获取到创建的场景并渲染出来😀😀固定写法

        var scene = createScene(); //获取到创建的场景
        // 循环渲染，性能最大没秒六十帧
        engine.runRenderLoop(function () {
            scene.render();
        });

第七步:浏览器大小变动时，触发引擎的重载状态😀😀固定写法

 window.addEventListener("resize", function () {
            engine.resize();
        });

1、绘制一个小球

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建基础的模型</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #idcanvas {
            width: 100%;
            height: 100%;
            /* 禁用元素上的所有手势 */
            touch-action: none;
        }
    </style>
</head>

<body>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <canvas id="idcanvas"></canvas>
 
</body>
<script>
    // 1-获取canvas 的dom对象
    var canvas = document.querySelector('#idcanvas');
    // console.log(canvas,'111111');
    // 2-实例化3d引擎
    var engine = new BABYLON.Engine(canvas, true);
    // console.log(engine,'222');
    // 3-创建场景并返回场景对象
    var createScene = function () {
        // 3-1 创建场景对象---(把实例化3d引擎放入里边)
        var scene = new BABYLON.Scene(engine)
        // 3-2 创建相机(FreeCamera)，并把相机位置设置到(x:0,y:5,z:-10)  new BABYLON.Vector3(x, y, z)的对象来表示模型网格的位置、旋转以及缩放
        var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), scene)
        // 3-3 :将相机朝向设置到原点
        camera.setTarget(BABYLON.Vector3.Zero());
        // 3-4:相机事件绑定到canvas对象上面
        camera.attachControl(canvas, true);
        // 3-5 ：创建灯光，灯光为止设置到 0 1 0
        var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
        //  灯光调暗一点  0-1范围之间
        light.intensity = 0.7;
        // 3-6 绘制一个球，支持六个配置项 名称, 分割段数, 直径, 放置的场景, updatable,sideOrientation
        var sphere = new BABYLON.Mesh.CreateSphere("sphere1",16,2,scene);
        //  调高一点
         sphere.position.y = 2;
        // 3-7 创建一个自定义的地面
        var myGround = BABYLON.MeshBuilder.CreateGround("myGround", { width: 6, height: 4, subdivsions: 4 }, scene)//化悲愤度暖白分成几块
        // 3-8 返回场景
        return scene;

    }
    // 4- 获取到创建的场景
    var scene = createScene();
    // 4-1 循环渲染，性能最大每秒60帧
    engine.runRenderLoop(function () {
        scene.render();
    })
    // 5- 浏览器大小变动时,触发引擎的重载状态
    window.addEventListener("resize", function () {
        engine.resize();
    })
    engine
</script>

</html>

2-绘制一个正方形 box.position.y = 2 设置模型高低

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建基础的模型</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #idcanvas {
            width: 100%;
            height: 100%;
            /* 禁用元素上的所有手势 */
            touch-action: none;
        }
    </style>
</head>

<body>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <canvas id="idcanvas"></canvas>
 
</body>
<script>
    // 1-获取canvas 的dom对象
    var canvas = document.querySelector('#idcanvas');
    // console.log(canvas,'111111');
    // 2-实例化3d引擎
    var engine = new BABYLON.Engine(canvas, true);
    // console.log(engine,'222');
    // 3-创建场景并返回场景对象
    var createScene = function () {
        // 3-1 创建场景对象---(把实例化3d引擎放入里边)
        var scene = new BABYLON.Scene(engine)
        // 3-2 创建相机(FreeCamera)，并把相机位置设置到(x:0,y:5,z:-10)  new BABYLON.Vector3(x, y, z)的对象来表示模型网格的位置、旋转以及缩放
        var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), scene)
        // 3-3 :将相机朝向设置到原点
        camera.setTarget(BABYLON.Vector3.Zero());
        // 3-4:相机事件绑定到canvas对象上面
        camera.attachControl(canvas, true);
        // 3-5 ：创建灯光，灯光为止设置到 0 1 0
        var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
        //  灯光调暗一点  0-1范围之间
        light.intensity = 0.7;
    
        // 3-6-1 绘制正方形
        var box = BABYLON.MeshBuilder.CreateBox("BOX", {}, scene);
        box.position.y = 2
     
        // 3-7 创建一个自定义的地面
        var myGround = BABYLON.MeshBuilder.CreateGround("myGround", { width: 6, height: 4, subdivsions: 4 }, scene)//化悲愤度暖白分成几块
        // 3-8 返回场景
        return scene;

    }
    // 4- 获取到创建的场景
    var scene = createScene();
    // 4-1 循环渲染，性能最大每秒60帧
    engine.runRenderLoop(function () {
        scene.render();
    })
    // 5- 浏览器大小变动时,触发引擎的重载状态
    window.addEventListener("resize", function () {
        engine.resize();
    })
    engine
</script>

</html>

3-设置一个平面

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建基础的模型</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #idcanvas {
            width: 100%;
            height: 100%;
            /* 禁用元素上的所有手势 */
            touch-action: none;
        }
    </style>
</head>

<body>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <canvas id="idcanvas"></canvas>
 
</body>
<script>
    // 1-获取canvas 的dom对象
    var canvas = document.querySelector('#idcanvas');
    // console.log(canvas,'111111');
    // 2-实例化3d引擎
    var engine = new BABYLON.Engine(canvas, true);
    // console.log(engine,'222');
    // 3-创建场景并返回场景对象
    var createScene = function () {
        // 3-1 创建场景对象---(把实例化3d引擎放入里边)
        var scene = new BABYLON.Scene(engine)
        // 3-2 创建相机(FreeCamera)，并把相机位置设置到(x:0,y:5,z:-10)  new BABYLON.Vector3(x, y, z)的对象来表示模型网格的位置、旋转以及缩放
        var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), scene)
        // 3-3 :将相机朝向设置到原点
        camera.setTarget(BABYLON.Vector3.Zero());
        // 3-4:相机事件绑定到canvas对象上面
        camera.attachControl(canvas, true);
        // 3-5 ：创建灯光，灯光为止设置到 0 1 0
        var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
        //  灯光调暗一点  0-1范围之间
        light.intensity = 0.7;
    

        // 3-6-4 绘制一个配置项的平面
        var myplane = BABYLON.MeshBuilder.CreatePlane("myplane",{width:5,height:2,},scene);
        var sourcePlane = new BABYLON.Plane(0,0,1);
        sourcePlane.normalize();
        myplane.position.y = 3
        // 3-7 创建一个自定义的地面
        var myGround = BABYLON.MeshBuilder.CreateGround("myGround", { width: 6, height: 4, subdivsions: 4 }, scene)//化悲愤度暖白分成几块
        // 3-8 返回场景
        return scene;

    }
    // 4- 获取到创建的场景
    var scene = createScene();
    // 4-1 循环渲染，性能最大每秒60帧
    engine.runRenderLoop(function () {
        scene.render();
    })
    // 5- 浏览器大小变动时,触发引擎的重载状态
    window.addEventListener("resize", function () {
        engine.resize();
    })
    engine
</script>

</html>
战斗中的老段
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WebGL：BabylonJS入门——初探：注入活力
iZaix的博客
09-03 2255
webgl实践，BabylonJS入门，通过位置变换矢量（向量）定位，旋转，缩放等操作，让世界动起来
Babylonjs 基础教程与填坑①入门常用网址
热门推荐
04-12 1万+
入坑babylon.js一段时间了，现在项目上线了，整理一下基础的入坑姿势和部分填坑技巧，记录一下遇到过的一些问题。 babylonjs大法好，在webgl领域，国内社区活跃度还比不过three，入坑时好多东西只能自己研究。 目录 先说总结： 以下网址中，只是我先做一下简单概括笼统的整合网址链接，具体拓展放在之后章节（大概不咕） 常用网址（国内）4.1版本 非最新版本 有playground基本表示就有源码了 这点非常非常关键，babylon这点比three好非常多 可以在线运行和ins.
Babylon.js 7.0开发入门教程
最新发布
新缸中之脑
05-07 1567
Babylon.js 是一个功能强大的开源 3D 引擎，能够使用 JavaScript 渲染交互式 3D 和 2D 图形。它是为 Web 甚至 VR 创建游戏、演示、可视化和其他 3D 应用程序的绝佳选择。Babylon.js最新版本是7.0。Babylon.js 是免费、开源和跨平台的，是 Unity 和 Unreal Engine 等专有 3D 引擎的绝佳替代品。
Babylon.js 一个专注web端的3D引擎，飞一般的感觉
xiao_bin_shen的博客
05-27 4493
2011年发布的 WebGL 到今年发布的 WebGPU，Web端的渲染在高速的发展中，做为一个前端你要是错过了 WebRTC， WebGL 千万别错过了 WebGPU，再不卷 3D 就老了一、Babylon是什么？世界上最强大、最漂亮、最简单的 Web 渲染引擎之一。对所有人完全开放和免费。尽可能简单，让每个人都能将他们的想法变为现实。优势：1、基于 typescript 开发，轻量，功能丰富，文档清晰，社区活跃，运营团队热情。
Babylon.js入门教程：探索3D世界的新维度
weixin_43073383的博客
06-02 2091
但它的性能较低，缺乏社区支持。相比之下，Babylon.js更适合开发3D游戏和交互式应用程序，而Three.js更适合开发3D可视化和数据可视化应用程序。Babylon.js提供了丰富的工具和插件，包括场景编辑器、物理引擎、粒子系统等，可以帮助开发者更快地创建复杂的3D场景和游戏。在工具和插件方面，Babylon.js更加丰富，提供了更多的工具和插件，可以帮助开发者更快地创建复杂的3D场景和游戏。总之，Babylon.js和Three.js都是优秀的3D框架，开发者可以根据自己的需求选择适合自己的框架。
Spot CEO：我们为什么选择Babylon.js而不是Three.js
新缸中之脑
05-08 2071
为现代网络开发令人兴奋的事情之一是底层平台的快速发展。WebAssembly、WebGL、WebGPU、Web Worker 等正在解锁以前典型 Web 产品无法想象的体验。在过去的几年里，我们看到像 Figma 这样的产品利用这一点创造了极具吸引力的业务和产品。推荐：用快速搭建可编程3D场景。一般而言，WebGL、WebGPU 和 3D 是最有可能将 Web 推向新水平的这些基本功能之一。然而，直接使用这些技术可能相当复杂。在大多数情况下，使用 3D Web 框架来加快开发过程是有意义的。
babylonjs使用笔记
sixam的博客
07-19 5666
目录一、关于二级目录三级目录参考资料 一、关于 babylonjs是用于3D网页游戏开发的WEBGL插件，微软开发和维护的web端3D引擎。 官网地址 中文地址 babylonjs提供了很多很好用的工具， 二级目录 三级目录 参考资料 真是要加油学习呢~ [1]: 基于babylon.js的3D网页游戏从零教程 [2]: 举个例子网：babylonjs教程 ...
分享babylon.js实现Web三维场景
通达的博客
04-22 1680
使用 Babylon.js 为混合现实体验创建 3D 对象和交互。
Babylon.JS开发基础英文版 Babylon.JS.Essentials包含示例代码
12-28
Babylon.JS是一款强大的开源JavaScript库，专为构建3D游戏和应用程序而设计。它利用WebGL技术，使得在浏览器中实现高质量的三维图形变得轻而易举。本资源"babylon.js开发基础英文版 - Babylon.JS.Essentials"提供了...
BabylonNative：使用Babylon.js JavaScript框架的功能构建跨平台的本机应用程序
01-28
该项目的目标是允许支持Web上Babylon.js应用程序的同一JavaScript在Windows，macOS，iOS，Android和Linux上的本机应用程序中相同地工作。 请查看和以获取更多信息。 注意：该项目正在大量开发中，并且当前并非...
Exporters:Babylon.js和gltf文件格式的导出器
05-10
有关3ds Max导出器的文档，请参见： : 从3ds Max导出到glTF的文档位于此处： ://doc.babylonjs.com/resources/3dsmax_to_gltf 有关Maya导出器的文档，请访问： : 从Maya导出到glTF的文档可在以下位置找到： ://doc...
Babylon.JS.Essentials.pdf
08-30
《Babylon.JS.Essentials》是一本深入探讨Babylon.js的书籍，它针对JavaScript游戏开发和3D交互式应用提供了详尽的基础知识。Babylon.js是一款强大的开源3D图形引擎，广泛用于Web上的游戏开发和可视化项目。本书的...
Babylon.js绘制的圆形材料和阴影反光动画特效源码.zip
10-31
通过研究源码，开发者可以学习到如何初始化Babylon.js场景，创建和操作3D对象，以及如何通过JavaScript控制3D动画。 总的来说，这个资源提供了一个学习和研究Babylon.js高级特性的实例，包括圆形材质的创建、阴影和...
学习babylon.js --- [2] 项目工程搭建
爱就是是恒久忍耐的专栏
07-16 2000
本文讲述了如何搭建babylonjs的项目工程，也是参考的官方文档，略有改动。
Babylonjs学习笔记(七)——相机行为
localhost
11-01 390
Babylonjs学习笔记
Babylon.js 第16章 灯光
m0_73334402的博客
09-07 905
半球灯是一种模拟环境光的简单方法。半球光由一个方向定义，通常“向上”朝向天空。然而，正是通过设置颜色属性才能实现完整的效果。以弧度为单位的角度定义了聚光灯锥形光束的大小（照明场），指数定义了光随距离（范围）衰减的速度。聚光灯由位置、方向、角度和指数定义。这些值定义了一个从该位置开始向该方向发射的光锥。灯光的三个属性会影响颜色。适用于所有四种类型的光，第三种是。六、可设定需要和不需要照亮的网格。
初学babylonjs
PG5的博客
05-30 278
【代码】初学babylonjs。
mapbox+babylon加载三维模型
Noah277的博客
10-19 293
mapbox+babylon加载三维模型
Babylon.js 第七节 相机+重力
m0_73334402的博客
09-05 1231
网格碰撞需要先为网格定义一个ellipsoid属性，随后为这个网格添加方法moveWithCollisions（position）方法，称为移动碰撞，其中的position是一个Vector3矢量，就是方向向量，如果其移动距离太大，可以使用position.scale(0.5)，当网格沿着这个方向移动，遇到设置了碰撞检查的网格时就会停下。DeviceOrientationCamera专门设计用于对设备方向事件做出反应，例如现代移动设备向前、向后、向左或向右倾斜。（7）VR设备方向相机。
我需要babylon.js 教程
05-21
好的，以下是一些学习 Babylon.js 的资源和教程： 1. 官方文档：Babylon.js官方网站上有详细的文档，涵盖了从入门到进阶的所有内容。可以访问 https://doc.babylonjs.com/ 进行查看。 2. Youtube 教程：在 Youtube 上有很多关于 Babylon.js 的教程视频，其中一些内容包括入门教程、游戏开发教程等。可以搜索 "Babylon.js tutorial" 或 "Babylon.js game development" 等相关关键词查找。 3. Udemy 课程：Udemy 上也有一些付费的 Babylon.js 课程。如果你愿意为学习投入一些钱财，那么这些课程可能会更加深入和详细。可以搜索 "Babylon.js course" 查找相关课程。 4. Github 示例代码：Babylon.js 在 Github 上有很多示例代码，可以帮助你更好地了解其工作原理和实现方法。可以访问 https://github.com/BabylonJS/Babylon.js 进行查看。 希望这些资源能够帮助你快速入门 Babylon.js。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值