![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
ThreeJS源码学习
以前端小白视角,逐步深入解析three.js源码
专注GIS三十年
这个作者很懒,什么都没留下…
展开
-
ThreeJS源码学习10Light
light解析lightlight灯光是三维场景必不可少的元素。threeJS中light是所有灯光的父类,它又继承自Object3D。function Light(color, intensity) { Object3D.call(this); this.type = 'Light'; this.color = new Color(color); this.intensity = intensity !== undefined ? intensity : 1; } Light.原创 2021-06-09 17:44:08 · 254 阅读 · 0 评论 -
ThreeJS源码学习9Pass
后处理通道解析PassShaderPassRenderPassPass可以看到pass最核心的部分如下,创建一个平铺屏幕的平面作为RTT最终效果呈现的载体,再创建一个正交相机作为观察相机。THREE.Pass.FullScreenQuad = ( function () { var camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 ); var geometry = new THREE.PlaneBufferGeometry(原创 2021-06-09 17:21:22 · 611 阅读 · 0 评论 -
ThreeJS源码学习8PlaneGeometry
PlaneGeometry解析解析var PlaneGeometry = /*#__PURE__*/function (_Geometry) { _inheritsLoose(PlaneGeometry, _Geometry); function PlaneGeometry(width, height, widthSegments, heightSegments) { var _this; _this = _Geomet原创 2021-06-09 11:01:50 · 515 阅读 · 0 评论 -
ThreeJS源码学习7Camera
Cameracameracamerathree.js中的camera是object3D的子类。function Camera() { Object3D.call(this); this.type = 'Camera'; this.matrixWorldInverse = new Matrix4(); this.projectionMatrix = new Matrix4(); this.projectionMatrixInverse = new Matrix4(); }从代码原创 2021-06-09 10:41:00 · 249 阅读 · 0 评论 -
ThreeJS源码学习6Object3D
Object3D这是threejs里重要的一个父类。几乎常用的方法(例如:scene、camera、geometry等)都继承于此。原创 2021-06-08 14:19:22 · 144 阅读 · 0 评论 -
ThreeJS源码学习5WebGLRenderer
代码1300多行,就不贴了,逐行分析。。。canvas判断在开头,主要是一些内置属性的定义,还有一小段canvas创建判断,如下,如果没有主动创建画布,则内部创建补上。_canvas = parameters.canvas !== undefined ? parameters.canvas : createCanvasElement()获取像素比通过getTargetPixelRatio方法获取设置的像素比function getTargetPixelRatio() {原创 2021-06-02 20:47:40 · 548 阅读 · 0 评论 -
ThreeJS源码学习4EffectComposer
可参考原创 2021-06-01 15:34:04 · 156 阅读 · 0 评论 -
ThreeJS源码学习3Texture
Texture先贴第一段代码。通过这段时间学习,可以基本摸索出ThreeJS的代码风格。定义一个新方法,首先在主函数中确定必要属性function Texture(image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding) { Object.defineProperty(this, 'id', { value: textureId++ }); this.uuid = Ma原创 2021-06-01 10:10:27 · 328 阅读 · 0 评论 -
ThreeJS源码学习2WebGLRenderTarget
继承方法threejs中通过 Object.assign方法向对象添加属性和方法等以实现继承。WebGLRenderTarget离屏渲染,是获取深度图,构建主渲染的必要方法。也是实现后处理过程的核心方法。原创 2021-05-27 10:39:56 · 447 阅读 · 0 评论 -
ThreeJS源码学习1
整体结构版本功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入版本我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:全新的界面设计 ,原创 2021-05-26 16:30:02 · 283 阅读 · 1 评论