乐趣区

关于前端:babylonjs-从入门到放弃

理解 babylonjs,入门:

要害链接篇:
入门例子篇
重要 api 例子篇
api 文档篇
图片压缩
查看模型

1. 入门篇

a. 开始一个例子,
https://doc.babylonjs.com/
b. 理解搭建一个场景,必需元素有哪些
canvas, engine, scene, camera, light
c. 开始浏览文档,比照介绍和 api 开始学习之旅
https://doc.babylonjs.com/exa…
https://doc.babylonjs.com/api…
d. 与模型师搭档,开始模型和 js 联合之旅

e. 相熟模型文件类型,把握各种模型引入形式

f. 获取模型元素, 扭转某元素的地位,大小

g. 减少高空反光,陶冶整体环境气氛;减少环境贴图,减少环境亮度

h. 相熟材质类型,扭转材质的办法,例子:扭转材质色彩

i. 相熟模型动画,把握动画根本的解决办法,例如:扭转动画速率

j. 相熟模型点击事件,进行交互操作,例如:点击弹出信息

k. 减少操作杆,减少设施辨认

l. 墙面贴视频贴图,减少趣味性

m. 做盒子碰撞检测,用户交互更敌对

n. 减少锚点点击,锚点是带动画成果的
// Create a sprite manager

    const spriteManagerPlayer = new BABYLON.SpriteManager("playerManager", "../textures/sprite_test.png", 1, 80);
    const player = new BABYLON.Sprite("player0", spriteManagerPlayer);
    player.playAnimation(0, 17, true, 100);

n.GUI 立体实现

问题篇

a. 画面抖动

b. 动画的开始,完结和重置,动画速率

e. 控制杆实际,从 babylon 的原生控制杆到起初引入的 nipple.js

d. 模型的点击事件,从 dom 操作点击事件到 actionManager

f. 视频墙增加在 pc 端能失常播放,在微信端不反对,须要独自关上一个新弹窗

g. 模型盒子如果有碰撞检测,须要有厚度而不是一层板

f. 白膜减少须要有一个定位点,这样能够通过点的定位始终显示在固定地位上

h. 创立盒子时,不要用 BABYLON.Mesh.createBox 去创立,碰撞检测不失效;须要用 BABYLON.MeshBuilder.createBox 创立;如果碰撞检测时,发现相机可能透视进入盒子里,但又没有齐全进入,则设置 camera.minZ 属性

i. 页面底部呈现黑底或者是碰撞检测时透过盒子看到外面的内容设置 camera.minZ 属性

退出移动版