由于公司要使用动画效果,分析了一段时间以后,决定使用Three.js,一般官网给的demo大部分都是在HTML静态界面中应用引用,但是自己想使用import引用,那么问题就来了,先上之前安装方法和引用方法:
npm install three --save
import * as THREE from "three";
项目引用上以后,发现问题还真不少,这里不上代码,只分析遇到的问题,勿喷
首先在引用完成以后,代码写完以后,在编译时出现警告:
"export ‘ParticleCanvasMaterial’ (imported as ‘THREE’) was not found in ‘three’
以为没有问题,直接运行,结果
分析错误,发现现在在这个问题上面给的资料不是很多,后来实在不行,就想尝试修改Three.js的代码,之后加上export default {THREE}
,然后放入代码中引用,
import THREE from "@js/three.min.js";
发现还是不行,项目还是报错,刚开始以为这样不可以,后来想着先先找下原因试试,然后代码分析,发现问题的所在,在使用的时候不能直接new THREE.ParticleCanvasMaterial而是要new THREE.THREE.ParticleCanvasMaterial再次刷新界面,效果达到了预期: