three.js报错集锦

1、KeyframeTrack 帧动画

报错：
THREE.Matrix3: .getInverse() can’t invert matrix, determinant is 0
代码：

// 此处是一个缩放动画
let times = [0, 1]
let scales = [0, 0, 0, 1, 1, 1]
let scaleKeyframeTrack = new THREE.KeyframeTrack('circle.scale', times, scales)

由上可知，缩放从x,y,z坐标的0倍到1倍变化，导致0倍时报错，没有逆矩阵。
改为如下即可：

let times = [0, 1]
let scales = [1, 1, 1, 2, 2, 2]
let scaleKeyframeTrack = new THREE.KeyframeTrack('circle.scale', times, scales)

将缩放变化改为，从x,y,z坐标的1倍到2倍变化即可。

2、EffectComposer 效果组合器

报错：
THREE.EffectComposer is not a constructor
‘THREE.EffectComposer不是构造函数’
因为：EffectComposer不包含在three.js的包中，需要单独导入，并且配置webpack导入导出变量。
和其他非官方的three.js模块，如OrbitControls引入的方法一致。
正确配置引用代码如下：

// webpack.base.conf.js中配置
module.exports = {
	……
	module: {
		rules: [
			……
			{
				test: require.resolve("three/examples/js/postprocessing/EffectComposer"),
				use: "imports-loader?THREE=three"
			},
			{
				test: require.resolve("three/examples/js/postprocessing/EffectComposer"),
				use: "exports-loader?THREE.EffectComposer"
			}
		]
	}
}
// 引入和使用
import EffectComposer from 'three/examples/js/postprocessing/EffectComposer'
composer = new EffectComposer(ren