WithCoderWithCoderWithCoder

在vscode中使用typescript和webpack开发threejs项目引入threejs examples中的类

在vscode中,使用typescript和webpack开发threejs项目时,通过yarn或者npm引入threejs后,发现只能使用threejs库中明确导出export的类.对于threejs examples中的类,正常情况下没有办法直接使用.本文介绍项目中如何导入threejs examples中的类并使用.

导入examples中的类,使用的方法是通过module.exports导出配置对象进行设置.具体的做法就是先匹配到examples目录中的js,然后将THREE对象前置插入到匹配的文件内.当运行webpack时,配置好的对象就会构建.

具体的配置如下:

1-200224145346350.png

然后,我们可以通过resolve.alias,创建别名,让模块在使用的时候引入变得更简单.

具体的配置如下:    

1-200224150204C6.png

通过以上的配置,就可以在ts文件头部正常引入examples中的类了.

举例

想使用threejs 0.95.0版本中的特殊光源镜头光晕类(Lensflare),但是这个类已经被移动到examples/objects/目录下了.直接调用程序会提示这个类已经被移到examples目录了.但是通过上面的配置,我们就可以在ts文件中方便的使用Lensflare类.

代码如下:  

1-20022415103D20.png

欢迎分享交流,转载请注明出处:WithCoder » 在vscode中使用typescript和webpack开发threejs项目引入threejs examples中的类