babylon.js 問題集

透明度盡量使用 material.alpha 控制
當正在操作 mesh 時，使用 mesh.visibility 有機會讓 mesh.position 錯誤

babylon.js 內建的 particle system 會在 position y > 1000 的地方消失
不使用則正常

camera 的工作方式
position { x, y, z }
rotation { alpha, beta, gamma }

camera --> watching --> target
(position) --> (target)

操作 position 若為物件參考 = 則會因為物件位置改變影響 camera 位置
若不想改成定焦鏡頭需用 new BABYLON.Vector3

camera.setPosition(newPos)

運鏡方式

cameraTo(sec = 1, camEndPos = new BABYLON.Vector3(0, 0, 0), tarPos = new BABYLON.Vector3(0, 0, 0)) {

const { camera } = this

const cam = camera

const speed = (1 / sec) * 60

const frameCount = 120

var ease = new BABYLON.CubicEase();

ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT)

try {

BABYLON.Animation.CreateAndStartAnimation(`at${Date.now()}`, cam, 'position', speed, frameCount, cam.position, camEndPos, 0, ease);

BABYLON.Animation.CreateAndStartAnimation(`at${Date.now()}`, cam, 'target', speed, frameCount, cam.target, tarPos, 0, ease);

} catch (e) { console.log(e) }

}

運鏡 target 需要切換不同座標 才會動作
情境:

camera.setTarget(player.mesh) // 看著玩家

camera.setPosition(new BABYLON.Vector3(300, 3000, -500)) // 調整鏡頭

camera.setTarget(player.mesh) // 再看玩家 (不會動？)

var newPos = {...player.mesh.position}

newPos.x += .1

camera.setTarget(newPos) // 再看玩家 (ok)

camera.radius 與 cameraTo 衝突，會讓 cameraTo 的 zoom 跳一下

const { camera } = this

const cam = camera

const speed = (1 / sec) * 60

const frameCount = 120

var ease = new BABYLON.CubicEase();

ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT)

try {

BABYLON.Animation.CreateAndStartAnimation(`at${Date.now()}`, cam, 'position', speed, frameCount, cam.position, camEndPos, 0, ease);

BABYLON.Animation.CreateAndStartAnimation(`at${Date.now()}`, cam, 'target', speed, frameCount, cam.target, tarPos, 0, ease);

} catch(e) { console.log(e) }

attachToBone 後
stopAnimation 不能用
改用 beginAnimation(obj, 1, 1, flase) 才可以

boy.meshes[0].position

const skeleton = assets.boy.skeletons[0]

var boneIndex = skeleton.getBoneIndexByName('Bone003')

var bone = skeleton.bones[boneIndex]

rHead.mesh.attachToBone(bone, assets.boy.meshes[0])

rHead.mesh.rotation = new BABYLON.Vector3(-180 * Math.PI / 180, 15 * Math.PI / 180, -90 * Math.PI / 180);

scene.beginAnimation(boy.meshes[0], 1, 1, false)

//

boy.meshes[0].position = new BABYLON.Vector3(-1014, 250, 0)

attachToBone vs mesh.parent = mesh
attachToBone 對齊一次
mesh.parent 會隨時對齊

BABYLON.js 不支援透明會 glow
所以emissiveColor 會讓 material.alpha or mesh.visibility 失效
變成一個不透明色塊
解決辦法是在 貼圖上面做好 光暈 在使用 opacityTexture 模擬
characterAMat.opacityTexture = assets["a"].texture characterAMat.diffuseTexture.hasAlpha = true

暈光
new GlowLayer 會讓 iphone7 1g 記憶體耗盡 導致 browser crash

角度
相對角度(會累加) body.meshes[0].rotation = new BABYLON.Vector3(0, 0, 30)
絕對角度 body.meshes[0].rotationQuaternion = BABYLON.Quaternion.RotationYawPitchRoll(0, 0, 30)