渲染器

这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战」

渲染器

渲染器在three.js里面充当的是渲染页面的角色，就相当于在电影放映的过程中充当了放映的设备，这个设备我们可以控制它放映的位置，分辨率，颜色通道，渲染的大小等等。我们渲染器中也是有属性操作这些值的。

渲染器的使用

WebGLRenderer( parameters : Object )

WebGLRenderer构造函数有几个参数

parameters - (可选) 该对象的属性定义了渲染器的行为。也可以完全不传参数。
在所有情况下，当缺少参数时，它将采用合理的默认值。 以下是合法参数：

canvas：一个供渲染器绘制其输出的canvas，它和WebGLRenderer.domElement属性对应。
如果没有传这个参数，会创建一个新canvas。
context：可用于将渲染器附加到已有的渲染环境RenderingContext中。默认值是null
precision：着色器精度. 可以是 "highp" ,"mediump"或者"lowp". 如果设备支持，默认为"highp". 
alpha：canvas是否包含alpha (透明度)。默认为false
premultipliedAlpha：renderer是否假设颜色有premultiplied alpha 默认为true。
antialias：是否执行抗锯齿。默认为false.
stencil：绘图缓存是否有一个至少8位的模板缓存(stencil buffer)。默认为true
preserveDrawingBuffer：是否保留缓直到手动清除或被覆盖。 默认false.
powerPreference：提示用户代理怎样的配置更适用于当前WebGL环境。可能是"high-performance" , "low-power"或 "default" 。默认是 "default" . 
depth；绘图缓存是否有一个至少6位的深度缓存(depth buffer)。 默认是true.
logarithmicDepthBuffer：是否使用对数深度缓存。如果要在单个场景中处理巨大的比例差异，就有必要使用。 默认是false。

下面我们使用旋转正方形的例子来使用一下渲染器的一些参数

<html>
	<head>
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
		<canvas id="oCanvas"></canvas>
		<script src="three.js"></script>
		<script>
			var oCanvas = document.getElementById('oCanvas');
			//创建场景
			var scene = new THREE.Scene();
			// 创建相机
			var orgCamera = new THREE.OrthographicCamera( window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2,window.innerHeight / -2,100, 1000 );
			// 渲染器
			var renderer = new THREE.WebGLRenderer({
				canvas: oCanvas,
				antialias: true,// 是否执行抗锯齿
				alpha:true,// canvas是否透明
				premultipliedAlpha:false,// 是否有预乘透明度，默认开
				
			});
			renderer.setSize( window.innerWidth, window.innerHeight );
			// document.body.appendChild( renderer.domElement );

			var geometry = new THREE.BoxGeometry( 100, 100, 100);
			var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
			var cube = new THREE.Mesh( geometry, material );
			scene.add( cube );

			orgCamera.position.z = 700;

			var animate = function () {
				requestAnimationFrame( animate );

				cube.rotation.x += 0.01;
				cube.rotation.y += 0.01;

				renderer.render( scene, orgCamera );
			};

			animate();
		</script>
	</body>
</html>

我们可以发现使用antialias后图像变平滑，使用alpha画布变透明了，关掉premultipliedAlpha后，它的颜色有误差，而有预乘透明度的话它的颜色就比较均匀。

three.js使用指南(3）

渲染器

渲染器

渲染器的使用