向量乘以标量：three.js与bobylon.js的差别

最新推荐文章于 2025-06-11 11:03:34 发布

原创最新推荐文章于 2025-06-11 11:03:34 发布 · 1.3k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

类库使用

babylon.js

three.js

这篇博客探讨了在three.js和babylon.js中向量乘以标量操作的不同，通过代码示例展示了babylon.js在计算时丢失数值的问题，并分析了其原因。经过修改代码，使用babylon.js的multiplyByFloats方法，最终得到了正确结果。

向量和标量的计算，babylon.js和three,js的区别。

代码：

//three.js
var THREE = require('./js/libs/three.js')

//babylon.js
var BABYLON = require('./js/libs/babylon.js')

//threeVector

var threeVector = new THREE.Vector3(1, 1, 1)

console.log("threeVector before multiplyScalar", threeVector)

var threeVector = threeVector.multiplyScalar(2)

console.log("threeVector after multiplyScalar", threeVector)

//babylonVector

var babylonVector = new BABYLON.Vector3(1, 1, 1)

console.log("babylonVector before multiplyByFloats", babylonVector)

var babylonVector = babylonVector.multiplyByFloats(2)

console.log("babylonVector after multiplyByFloats", babylonVector)

结果：

threeVector before multiplyScalar Vector3 {x: 1, y: 1, z: 1}
threeVector after multiplyScalar Vector3 {x: 2, y: 2, z: 2}
babylonVector before multiplyByFloats d {x: 1, y: 1, z: 1}
babylonVector after multiplyByFloats d {x: 2, y: NaN, z: NaN}

babylon丢了2个数？

分析原因：

three.js的方法是multiplyScalar，是单数。babylon.js的方法是multiplyByFloats，是复数。

修改代码，把

var babylonVector = babylonVector.multiplyByFloats(2)

改成

var babylonVector = babylonVector.multiplyByFloats(2, 2, 2)

再次运行：

threeVector before multiplyScalar Vector3 {x: 1, y: 1, z: 1}
threeVector after multiplyScalar Vector3 {x: 2, y: 2, z: 2}
babylonVector before multiplyByFloats d {x: 1, y: 1, z: 1}
babylonVector after multiplyByFloats d {x: 2, y: 2, z: 2}

结果正确了。