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做成一个单独的模块。