合集-babylon.js
摘要：
简单来说，babylon.js 是一个能跑在浏览器上的(3D)游戏渲染引擎，而且官方提供了一个友好在线交互学习平台Playground，其开源项目在github上star数截止2023.05.14高达20.6K。下面是官方文档的学习笔记 ： 一、hello world 强烈建议新手通过Playgro
阅读全文
简单来说，babylon.js 是一个能跑在浏览器上的(3D)游戏渲染引擎，而且官方提供了一个友好在线交互学习平台Playground，其开源项目在github上star数截止2023.05.14高达20.6K。下面是官方文档的学习笔记 ： 一、hello world 强烈建议新手通过Playgro
阅读全文
摘要：如何在网页中嵌入设计好的模型？ 接上回继续，我们设计好精美的模型后，最终总要展示给客户，比如利用playground画了1个方块： const createScene = () => { const scene = new BABYLON.Scene(engine); const camera =
阅读全文
如何在网页中嵌入设计好的模型？ 接上回继续，我们设计好精美的模型后，最终总要展示给客户，比如利用playground画了1个方块： const createScene = () => { const scene = new BABYLON.Scene(engine); const camera =
阅读全文
摘要：一、理解babylon.js 坐标系 const createScene = function () { const scene = new BABYLON.Scene(engine); const camera = new BABYLON.ArcRotateCamera("camera", -Ma
阅读全文
一、理解babylon.js 坐标系 const createScene = function () { const scene = new BABYLON.Scene(engine); const camera = new BABYLON.ArcRotateCamera("camera", -Ma
阅读全文
摘要：按上回继续，上节知道了如何用 『方块+三棱柱+贴图』结合起来，画一个简单的小房子，实际应用中可以把这3个打包在一起，组成1个house对象，这样更方便一些 const buildHouse = () => { const box1 = buildBox(); const roof1 = buildR
阅读全文
按上回继续，上节知道了如何用 『方块+三棱柱+贴图』结合起来，画一个简单的小房子，实际应用中可以把这3个打包在一起，组成1个house对象，这样更方便一些 const buildHouse = () => { const box1 = buildBox(); const roof1 = buildR
阅读全文
摘要：前面我们画的小房子，基本上都是用内置的标准形状组合而成，但并非所有对象都这么简单，今天我们来画一个小汽车，汽车由多个零件组成，控制这些零件的缩放、位置、旋转，如果每个都单独用代码来修改position/roration/scaling，未免太复杂，幸好babylon.js中，对象有所谓的child/
阅读全文
前面我们画的小房子，基本上都是用内置的标准形状组合而成，但并非所有对象都这么简单，今天我们来画一个小汽车，汽车由多个零件组成，控制这些零件的缩放、位置、旋转，如果每个都单独用代码来修改position/roration/scaling，未免太复杂，幸好babylon.js中，对象有所谓的child/
阅读全文
摘要：接上回继续，今天继续捣腾动画，上一节咱们让汽车的轮子动了起来，回顾一下核心代码： //轮子转动 const wheelAnimation = (scene, wheels) => { //定义一个动画，每秒30帧，绕y轴转动 const animWheel = new BABYLON.Animati
阅读全文
接上回继续，今天继续捣腾动画，上一节咱们让汽车的轮子动了起来，回顾一下核心代码： //轮子转动 const wheelAnimation = (scene, wheels) => { //定义一个动画，每秒30帧，绕y轴转动 const animWheel = new BABYLON.Animati
阅读全文
摘要：前面我们学习了如何画一堆房子（如下图），显然这单调的绿色大地，看上去效果并不好。 babylon.js中，可以用图片模拟出地势高低不同的效果，比如下面这张图片： 颜色越深的地方，表示地势越低（即：盆地），而颜色越浅的地方，地势越高（即：高山），可以参考下面的代码： const createScene
阅读全文
前面我们学习了如何画一堆房子（如下图），显然这单调的绿色大地，看上去效果并不好。 babylon.js中，可以用图片模拟出地势高低不同的效果，比如下面这张图片： 颜色越深的地方，表示地势越低（即：盆地），而颜色越浅的地方，地势越高（即：高山），可以参考下面的代码： const createScene
阅读全文
摘要：接上回继续，现在的村庄已经有点象样了，但是远处的背景仍比较单调(如下图），今天来学习如何处理天空背景。 babylon.js中，把整个空间假象成一个巨大的立方体(称为SkyBox)，然后依次给立方体的6个面，贴上天空的背景图(如下图) 在代码中只要指定这6张图的rootUrl即可，babylon.j
阅读全文
接上回继续，现在的村庄已经有点象样了，但是远处的背景仍比较单调(如下图），今天来学习如何处理天空背景。 babylon.js中，把整个空间假象成一个巨大的立方体(称为SkyBox)，然后依次给立方体的6个面，贴上天空的背景图(如下图) 在代码中只要指定这6张图的rootUrl即可，babylon.j
阅读全文
摘要：接上回继续，做为一个游戏引擎，怎能没有Sprite(精灵)? 下面是基本示例： const createScene = function () { const scene = new BABYLON.Scene(engine); const camera = new BABYLON.ArcRotat
阅读全文
接上回继续，做为一个游戏引擎，怎能没有Sprite(精灵)? 下面是基本示例： const createScene = function () { const scene = new BABYLON.Scene(engine); const camera = new BABYLON.ArcRotat
阅读全文
摘要：今天来学习下车床(lathe)建型及粒子系统，babylon.js有一个很强大的函数CreateLathe，可以将一段路径经过旋转后，形成1个shape，这么说有点抽象，比如下面这张图： 其中的关键点坐标为： const fountainProfile = [ new BABYLON.Vector3
阅读全文
今天来学习下车床(lathe)建型及粒子系统，babylon.js有一个很强大的函数CreateLathe，可以将一段路径经过旋转后，形成1个shape，这么说有点抽象，比如下面这张图： 其中的关键点坐标为： const fountainProfile = [ new BABYLON.Vector3
阅读全文
