建设工程人员锁定网站豆瓣wordpress主题
目录
Three.js封装的渲染器
.domElement属性
.setSize(width, height)方法
帧缓冲区的相关封装
渲染器方法.clear(color,depth,stencil)
渲染器方法.clearDepth()
渲染器属性.autoClear
Three.js封装的渲染器
.domElement属性
如果想通过WebGL渲染一个三维场景，需要HTML的Canvas画布元素实现，通过渲染器构造函数WebGLRenderer创建一个渲染器对象 ，如果构造函数参数没有设置canvas对象，系统会自动创建一个Cnavas元素。
通过canvas元素返回WebGL上下文gl对象才能调用相关的WebGL API
//通过getElementById()方法获取canvas画布
var canvas=document.getElementById('webgl');
//通过方法getContext()获取WebGL上下文
var gl=canvas.getContext('webgl');
...
gl.enableVertexAttribArray(aposLocation);
...
gl.drawArrays(gl.LINE_LOOP,0,4);
... WebGLRenderer.js源码对.domElement属性的相关封装
function WebGLRenderer(parameters) {
...
parameters = parameters || {};
//如果canvas画布没有通过参数对象parameters的canvas属性设置，通过API创建一个
var _canvas = parameters.canvas !== undefined ? parameters.canvas : document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas'),
...
把_canvas赋值给WebGL渲染器对象的domElement属性
this.domElement = _canvas;} 通过渲染器.domElement属性，可以把Three.js的canvas画布插入到html任何一个元素中，可以在整个body页面上全局显示，也可以插入一个div元素中局部显示，注意canvas画布尺寸设置。
// 创建渲染器对象var renderer = new THREE.WebGLRenderer();renderer.setSize(width, height);//body元素中插入Threejs创建的包含canvas对象document.body.appendChild(renderer.domElement);.setSize(width, height)方法
WebGLRenderer.js源码对.setSize()方法的相关封装
...
// pixelRatio：像素比率
_pixelRatio = 1,
...
this.setSize = function(width, height, updateStyle) {
..._canvas.width = width * _pixelRatio;_canvas.height = height * _pixelRatio;if (updateStyle !== false) {
_canvas.style.width = width + 'px';
_canvas.style.height = height + 'px';}
...
};全屏设置，也就是canvas画布宽高度和窗口尺寸一样
var width = window.innerWidth; //窗口宽度var height = window.innerHeight; //窗口高度var renderer = new THREE.WebGLRenderer();// 设置渲染尺寸，本质就是设置canvas元素宽高度renderer.setSize(width, height);局部渲染，通过.setSize()方法设置canvas画布的宽高度像素
var width = window.innerWidth; //窗口宽度var height = window.innerHeight; //窗口高度var renderer = new THREE.WebGLRenderer();// 设置渲染尺寸，本质就是设置canvas元素宽高度renderer.setSize(300, 300);帧缓冲区的相关封装
帧缓冲区包含颜色缓冲区、深度缓冲区、模板缓冲区，颜色缓冲区存储片元的颜色数据，也就是像素数据，深度缓冲存储片元的深度数据，用于WebGL渲染流程中的深度测试环节，被遮挡的片元会被剔除，不会显示在canvas画布上。
渲染器方法.clear(color,depth,stencil)
原生WebGL方法gl.clear()用来清除帧缓冲区数据
// 清除颜色缓冲区数据
gl.clear(gl.COLOR_BUFFER_BIT)
// 清除深度缓冲区数据
gl.clear(gl.DEPTH_BUFFER_BIT)
// 清除模板缓冲区数据
gl.clear(gl.STENCIL_BUFFER_BIT)// 清除帧缓冲区的颜色、深度和模板缓冲中数据
gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT | gl.STENCIL_BUFFER_BIT); WebGLRenderer.js源码对渲染器方法.clear()的封装
this.clear = function(color, depth, stencil) {// “&” 和 “|” 是位运算操作符var bits = 0;if (color === undefined || color) bits |= _gl.COLOR_BUFFER_BIT;if (depth === undefined || depth) bits |= _gl.DEPTH_BUFFER_BIT;if (stencil === undefined || stencil) bits |= _gl.STENCIL_BUFFER_BIT;_gl.clear(bits);}; 渲染器方法.clearDepth()
清除帧缓冲区中深度缓冲区中的片元深度数据
renderer.clearDepth()
// WebGLRenderer.js源码
this.clearDepth = function() {this.clear(false, true, false);
};
渲染器属性.autoClear
Three.js渲染器默认情况下，本次执行render方法之前，会把上次执行render方法后帧缓冲区中的数据清除
autoClear默认值true，设置为false，执行render方法的时候不会自动清除上次渲染帧缓冲区中的数据
renderer.autoClear = false;