angular项目中引入three.js

版权声明：本文为作者的原创文章，未经允许不得转载。 https://blog.csdn.net/lin5165352/article/details/89085291

angular three.js Outline Pass

安装three.js

1. 把three.js作为全局资源文件，放在html文件的头部

    <script src="./assets/js/three.min.js"></script>
    //在添加下面一行代码，就可以使用全局的THREE了。
    declare var THREE: any;
   

2. npm方式安装

    import * as THREE from "three"
   

安装three.js插件

three.js有很多插件，不在three.js核心包中，需要自己额外安装。比如相机控制器、后期处理通道等等：

	<script src="js/controls/OrbitControls.js"></script>
	<script src="js/loaders/OBJLoader.js"></script>
	<script src="js/WebGL.js"></script>
	<script src="js/shaders/CopyShader.js"></script>
	<script src="js/shaders/FXAAShader.js"></script>
	<script src="js/postprocessing/EffectComposer.js"></script>
	<script src="js/postprocessing/RenderPass.js"></script>
	<script src="js/postprocessing/ShaderPass.js"></script>
	<script src="js/postprocessing/OutlinePass.js"></script>
	<script src="js/libs/stats.min.js"></script>
	<script src='js/libs/dat.gui.min.js'></script>

这次插件可以放在html模板文件中，当做全局使用，没什么问题。但是这样不是模块化的方式，会增加首页加载的速度。
可以把这些文件改成安装包的方式，或者自己改造。像three-orbitcontrols 在npm就可以直接安装，但是后期通道没有，需要自己修改。outlinepass后期效果npm中也有，npm i three-outlinepass。
修改起来也方便，下面以outline后期通道为案例修改一下js文件。

• 引入three: import * as THREE from “three”

• 把各种js文件拷贝到一个ts文件中，

• 修改函数的定义方式

• 导出模块export {EffectComposer,RenderPass,OutlinePass }

   //js中写法
   THREE.OutlinePass = function () {}
   THREE.OutlinePass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {}）
   //ts中写法
   var OutlinePass:any = function (）{}
   OutlinePass.prototype = Object.assign( ……）
  
   // 也可以改成class的方式
   class OutlinePass extends Pass {}
  

OutlinePass是继承Pass，js原写法中prototype就是js实现继承的一种方法。简单的修改方式是直接定义一个新的变量，用varOutlinePass:any 代替THREE.OutlinePass 。因为THREE是导入的模块，不能去改变他原有的属性，所以需要把OutlinePass做成一个单独的模块。