angular three.js Outline Pass
安装three.js
-
把three.js作为全局资源文件,放在html文件的头部
<script src="./assets/js/three.min.js"></script> //在添加下面一行代码,就可以使用全局的THREE了。 declare var THREE: any;
-
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做成一个单独的模块。