Babylon.js学习笔记（简单物体、STL文件导入、简单拖拽）

最新推荐文章于 2024-05-07 08:53:02 发布

yznlemon

最新推荐文章于 2024-05-07 08:53:02 发布

阅读量2.3k

点赞数 2

分类专栏： web前端 JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/yznlemon/article/details/106546525

版权

无需前端框架基础，快速搭建网页版3D效果

一、关于库文件
二、新建页面，并加载babylon
三、在html中添加div区域
四、创建画布
五、初始化引擎
六、添加光源
七、添加地面
八、添加物体
九、导入CAD文件（.stl）
十、拖拽操作
十一、Demo下载

Babylon.js的介绍就不赘述了，大牛们的文章一抓一大把，这里主要记录从零开始学习Babylon.js的过程。

看了很多帖子，但大部分是面向有基础的前端人员。由于笔者不是专业前端人员，只是对前端略有了解，对于现在什么vue等框架也是完全不懂，所以写这个学习笔记，旨在面向不懂前端框架，但又想简单并快速使用网页版3D效果的童鞋们。

一、关于库文件

Babylon需要调用“Babylon.js”文件，下载文件有两种方式（如果在线使用，则跳过该步骤）：

如果是使用npm命令，直接输入下面命令行：

npm install babylonjs --save

这样可以在本地项目文件夹中保存

直接下载文件，放在项目文件夹中，官网地址：Babylon官网
据说是可在官网定制功能，但本人才疏学浅，没找到地方……

二、新建页面，并加载babylon

新建立一个html页面，在<head>处添加引入文件的语句：

本地调用

<script type="text/javascript" src="node_modules/babylonjs/babylon.js"></script>

在线调用

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

三、在html中添加div区域

在准备工作结束后，就可以开始写demo了。
首先，在html文件中添加显示3D的div区域：

<div id="babylonJS" style=" float: left; width: 1200px; height: 700px; ">
    <canvas id="renderCanvas" style="width: 100%; height: 100%;" ></canvas>
</div>

这里需要使用<canvas>标签，作为3D画布。

四、创建画布

为了省事，js代码直接在html中添加。
首先创建画布，ID对应上面的<canvas>标签：

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

五、初始化引擎

最低0.47元/天解锁文章

yznlemon

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
Babylon.js学习笔记（简单物体、STL文件导入、简单拖拽）

无需前端框架基础，快速搭建网页版3D效果一、关于库文件二、新建页面，并加载babylon三、在html中添加div区域四、创建画布五、初始化引擎六、添加光源七、添加地面八、添加物体九、导入CAD文件（.stl）拖拽操作Babylon.js的介绍就不赘述了，大牛们的文章一抓一大把，这里主要记录从零开始学习Babylon.js的过程。看了很多帖子，但大部分是面向有基础的前端人员。由于笔者不是专业前端人员，只是对前端略有了解，对于现在什么vue等框架也是完全不懂，所以写这个学习笔记，旨在面向不懂前端框架，但又
复制链接

扫一扫

专栏目录