【温故知新】——BABYLON.js学习之路·前辈经验（一）

最新推荐文章于 2023-10-29 21:29:13 发布

原创

最新推荐文章于 2023-10-29 21:29:13 发布 · 2.5k 阅读

本文是关于BABYLON.js学习的经验分享，涵盖了旋转相机与漫游相机的转换、材质、动画、粒子系统、mesh操作、场景优化等方面。重点讨论了动画的创建与管理，包括各种动画模式及其注意事项，以及如何进行性能优化，如冻结材质、调整设备适应性和使用SceneOptimizer。

【温故知新】——BABYLON.js学习之路·前辈经验（一）

前言：公司用BABYLON作为主要的前端引擎，同事们在长时间的项目实践中摸索到有关BABYLON的学习路径和问题解决方法，这里只作为温故知新。

一、快速学习BABYLON




1. 阅读Babylon[基础教程](http://doc.babylonjs.com/babylon101/)
2. 阅读[一些BABYLON的新特性](http://doc.babylonjs.com/features/)
3. 阅读[代码片段](http://doc.babylonjs.com/samples)
4. 一些[更深入的教程详解](http://doc.babylonjs.com/how_to/)
5. [在游乐场玩耍](http://doc.babylonjs.com/playground/)

二、需要掌握的基本技能




1. engine,scene等创建，抗锯齿，像素比，深度缓冲区等配置项
2. 灯光的创建，基本属性，作用域
3. 相机的创建，基本属性，多相机的切换，绑定等
4. 材质的创建，不同纹理类型等
5. 场景中的元素，雾化，天空盒，阴影，地形图，世界坐标系，本地坐标系等
6. 事件，actionManager,onPointerDownObservable,pick,pickWithRay,
   onViewMatrixChangedObservable,onLightRemovedObservable等基本事件
7. UI

三、项目开发中遇到的一些问题及重点功能

# 灯光

//设置作用物体
light.includedOnlyMeshes
//设置排除物体
light.excludedMeshes

# 相机
1、相机多个动画的正确顺序

targetScreenOffet->target->beta->alpha->radius

2、相机运动触发的事件

camera.onViewMatrixChangedObservable

3、漫游相机定制跳跃转向碰撞等功能

//有两种方法可以根据世界矢量进行碰撞位移
//1.
camera._collideWithWorld(camera.getFrontPosition(10).subtract(camera.position))
//2.
camera.cameraDirection.addInPlace(camera._transformedDirection);
 
//如跳跃，则相对世界向上
scene.activeCamera.cameraDirection.addInPlace(new BABYLON.Vector3(0, 4, 0));
//重力回到地面
camera._needMoveForGravity = true;
//定制位移方向
var speedXX=camera._computeLocalCameraSpeed()*(左右惯性因子*panel) 
var speed=camera._computeLocalCameraSpeed()*(前后惯性因子*panel) 
camera._localDirection.copyFromFloats(speedX, 0, speedZ);
camera.getViewMatrix().invertToRef(camera._cameraTransformMatrix);
BABYLON.Vector3.TransformNormalToRef(camera._localDirection, camera._cameraTransformMatrix, camera._transformedDirection);
camera.cameraDirection.addInPlace(camera._transformedDirection);
//定制旋转方向
camera.rotation.x=(beta惯性因子*panel)
camera.rotation.y=(alpha惯性因子*panel)

 
# 重力

//添加重力
scene.gravity = new BABYLON.Vector3(0, -9.81, 0);
camera.applyGravity = true;
//添加碰撞
scene.collisionsEnabled = true;
camera.checkCollisions = true;
ground.checkCollisions = true;
box.checkCollisions = true;
//相机碰撞椭圆体
camera.ellipsoid = new BABYLON.Vector3(.5, 1, .5);
//arcRotateCamera的碰撞椭圆体
camera.collisionRadius =new BABYLON.Vector3(0.5, 0.5, 0.5)
//防止向上跳后无法落地
camera._needMoveForGravity = true;
//物体碰撞
mesh.moveWithCollisions(vec3);
//使用webworker运行碰撞检测
scene.workerCollisions = true|false

## 第二视图

var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 0, BABYLON.Vector3.Zero(), scene);
camera.setPosition();
var followCamera = new BABYLON.FollowCamera("follow", new BABYLON.Vector3(400, 500, 1000), scene, ground)
followCamera.radius = 0
followCamera.heightOffset = 400;
scene.activeCameras.push(followCamera);
scene.activeCameras.push(camera);

followCamera.viewport = new BABYLON.Viewport(0, 0, 0.3, 0.3)
camera.viewport = new BABYLON.Viewport(0, 0.3, 1, 0.7)

## 四元数转换为欧拉角

sphere2.lookAt(sphere.position)
camera.position=sphere2.position;
camera.rotation.x=-sphere2.rotationQuaternion.toEulerAngles().x;
camera.rotation.y=sphere2.rotationQuaternion.toEulerAngles().y+Math.PI;
camera.rotation.z=sphere2.rotationQuaternion.toEulerAngles().z;


## 漫游相机和旋转相机的转换

旋转相机 -> 漫游相机

var radiusv3 = pickInfo.pickedPoint
var radius = radiusv3.length();
var alpha = Math.acos(radiusv3.x / Math.sqrt(Math.pow(radiusv3.x, 2) + Math.pow(radiusv3.z, 2)));
 if (radiusv3.z < 0) {
      alpha = 2 * Math.PI - alpha;
}
var beta = Math.acos(radiusv3.y / radius);

漫游相机-> 旋转相机

var radiusv3 = zxz.camera2.position;
var radius = radiusv3.length();
var alpha = Math.acos(radiusv3.x / Math.sqrt(Math.pow(radiusv3.x, 2) + Math.pow(radiusv3.z, 2)));
if (radiusv3.z < 0) {
    alpha = 2 * Math.PI - alpha;
}
var beta = Math.acos(radiusv3.y / radius);

# 材质

1、材质特殊参数

material.maxSimultaneousLights //最多可接受灯光个数，默认4个
material.useLogarithmicDepth 
material.needDepthPrePass      //深度判断
material.transparencyMode=2;

2、 dynamicTexture

最低0.47元/天解锁文章