【three.js详解之二】渲染器篇

【three.js详解之二】渲染器篇

 

本篇文章将详细讲解three.js中渲染器(renderer)的设置方法。

three.js文档中渲染器的分支如下:

Renderers

可以看到three.js提供了很多的渲染方式,我们选择的当然是WebGLRenderer,但我们这里要将CanvasRenderer与WebGLRenderer两种渲染方式做一个比较。

在上篇文章的例子中,我们完全可以把WebGL渲染器:

renderer=new THREE.WebGLRenderer();

替换为Canvas渲染器:

renderer=new THREE.CanvasRenderer();

这样canvas就会以2d的方式渲染,以下是效果对比(前者用WebGLRenderer渲染):

很明显,WebGL在渲染效果上更胜一筹,WebGL的渲染能够最大程度表现你制作精美的场景,如果你的设备支持它,这个渲染器具有比CanvasRenderer更好的性能,相反地,CanvasRenderer则具有更好的兼容性。

复制代码
//开启Three.js渲染器:WebGLRenderer
       //声明全局变量 var renderer; function initThree() { //获取容器的宽高 width = document.getElementById('canvas3d').clientWidth;//获取画布「canvas3d」的宽 height = document.getElementById('canvas3d').clientHeight;//获取画布「canvas3d」的高 //声明渲染器对象:WebGLRenderer renderer=new THREE.WebGLRenderer({ antialias:true,//antialias:true/false是否开启反锯齿 precision:"highp",//precision:highp/mediump/lowp着色精度选择 alpha:true,//alpha:true/false是否可以设置背景色透明 premultipliedAlpha:false,//? stencil:false,//? preserveDrawingBuffer:true,//preserveDrawingBuffer:true/false是否保存绘图缓冲 maxLights:1//maxLights:最大灯光数 }); //指定渲染器的高宽(和画布框大小一致) renderer.setSize(width, height ); //追加 【canvas】 元素到 【canvas3d】 元素中。 document.getElementById('canvas3d').appendChild(renderer.domElement); //设置canvas背景色(clearColor)和背景色透明度(clearAlpha) renderer.setClearColor(0x000000,0.5); }
复制代码

这是我们上篇文章中设置渲染器的js代码,有以下流程:

1.声明渲染器对象,我们用new THREE.WebGLRenderer()来新建一个WebGL渲染器。

  其中WebGLRenderer()中有一些参数我们可以设置,以下这些参数来自于官方文档:

  antialias:

  值:true/false

  含义:是否开启反锯齿,设置为true开启反锯齿。

  precision:

  值:highp/mediump/lowp

  含义:着色精度选择。

  alpha:

  值:true/false

  含义:是否可以设置背景色透明。

  premultipliedAlpha:

  值:true/false

  含义:?

  stencil:

  值:true/false

  含义:?

  preserveDrawingBuffer:

  值:true/false

  含义:是否保存绘图缓冲,若设为true,则可以提取canvas绘图的缓冲。

  maxLights:

  值:数值int

  含义:最大灯光数,我们的场景中最多能够添加多少个灯光。

2.制定渲染器的宽高,我们用renderer.setSize(width,height)来设置;

3.追加生成的canvas元素到容器元素中。canvas对象的获取方法为renderer.domElement;

4.设置canvas背景色(clearColor)和背景色透明度(clearAlpha),renderer.setClearColor(clearColor,clearAlpha);

那么以上就是three.js渲染器的一些常用设置了,大家可以实际检验一下各种参数所起的作用。

原文地址:https://www.cnblogs.com/dh-hui/p/3918814.html