【three.js学习笔记】渲染器

刘玉平发布于2019-08-22 16:04 / 3053人阅读

摘要：使用将能够利用硬件加速从而提高渲染性能。这个渲染器比渲染器有更好的性能。声明构造器是一个可选对象，包含用来定义渲染器行为的属性。所用的渲染上下文对象。设置背景色和背景色透明度渲染器渲染器不使用来绘制场景，而使用相对较慢的。

渲染器api WebGL渲染器（WebGLRenderer）

WebGL渲染器使用WebGL来绘制您的场景，如果您的设备支持的话。使用WebGL将能够利用GPU硬件加速从而提高渲染性能。这个渲染器比 Canvas渲染器(CanvasRenderer) 有更好的性能。

声明

var renderer = new THREE.WebGLRenderer();

构造器（Constructor）

WebGLRenderer( parameters )

parameters 是一个可选对象，包含用来定义渲染器行为的属性。当没有设置该参数时，将使用默认值。

canvas: 一个用来绘制输出的 Canvas 对象。
context: 所用的渲染上下文(RenderingContext) 对象。
precision : 着色器的精度。可以是"highp", "mediump" 或 "lowp". 默认为"highp"，如果设备支持的话。
alpha : 是否可以设置背景色透明 , 默认为 false.
premultipliedAlpha — Boolean, 默认为 true.
antialias: 是否开启反锯齿, 默认为 false.
stencil — Boolean, 默认为 true.
preserveDrawingBuffer: 是否保存绘图缓冲, 默认为 false.
depth — Boolean, 默认为 true.
logarithmicDepthBuffer — Boolean, 默认为 false.

  var renderer=new THREE.WebGLRenderer({  
        antialias:true,       //是否开启反锯齿  
        precision:"highp",    //着色精度选择  
        alpha:true,           //是否可以设置背景色透明  
        premultipliedAlpha:false,  
        stencil:false,  
        preserveDrawingBuffer:true, //是否保存绘图缓冲  
        maxLights:1           //maxLights:最大灯光数  
    });

常用属性 domElement

一个用来绘制输出的 Canvas 对象。
该对象通过构造函数中的渲染器所自动创建（如果没有提供的话）；你只需要将其添加到您的网页中。

常用方法 render

渲染器最重要的方法，使用相机渲染一个场景。

render ( scene, camera, renderTarget, forceClear )

如果指定了renderTarget，则渲染到上面，否则渲染到通常的canvas上。
如果forceClear为true, 颜色、深度和模板绘制缓冲将在渲染前被清除，即使渲染器的autoClear属性为false。
即使forceClear被设置为true，我们仍然可以通过设置.autoClearColor, .autoClearStencil 或 .autoClearDepth 属性为false来阻止特定的缓存被清除。

setSize ( width, height, updateStyle )

调整输出canvas尺寸（宽度，高度），要考虑设备像素比，并且设置视口（viewport）以匹配该尺寸。如果设置 updateStyle 为true，则显式添加像素到输出canvas的样式中。

 var renderer = new THREE.WebGLRenderer();

    renderer.setSize(window.innerWidth,window.innerHeight);

    document.body.appendChild(renderer.domElement);

setClearColor ( color, alpha )

设置清除的颜色和透明度。

// 创建一个具有红色背景的渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize( 200, 100 );
renderer.setClearColor( 0xff0000 );

应用

//开启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,       //是否开启反锯齿
        precision:"highp",    //着色精度选择
        alpha:true,           //是否可以设置背景色透明
        premultipliedAlpha:false,
        stencil:false,
        preserveDrawingBuffer:true, //是否保存绘图缓冲
        maxLights:1           //maxLights:最大灯光数
    });
    
    //指定渲染器的高宽（和画布框大小一致）
    renderer.setSize(width, height );
    //追加canvas 元素到canvas3d元素中。
    document.getElementById("canvas3d").appendChild(renderer.domElement);
    //设置canvas背景色(clearColor)和背景色透明度（clearAlpha）
    renderer.setClearColor(0x000000,0.5);
}

Canvas渲染器（CanvasRenderer）

Canvas渲染器不使用WebGL来绘制场景，而使用相对较慢的Canvas 2D Context API。兼容性高

var renderer = new THREE.CanvasRenderer();

检查浏览器兼容性

function webglAvailable() {
        try {
            var canvas = document.createElement( "canvas" );
            return !!( window.WebGLRenderingContext && (
                canvas.getContext( "webgl" ) ||
                canvas.getContext( "experimental-webgl" ) )
            );
        } catch ( e ) {
            return false;
        }
    }

    if ( webglAvailable() ) {
        renderer = new THREE.WebGLRenderer();
    } else {
        renderer = new THREE.CanvasRenderer();
    }

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94016.html

Three.js学习笔记

摘要：和使用的坐标系是右手坐标系。与都是指到照相机位置在深度平面的位置，而照相机不应该拍摄到其后方的物体，因此这两个值应该均为正值。 Three.js是一个3D JavaScript库。Three.js封装了底层的图形接口，使得程序员能够在无需掌握繁冗的图形学知识的情况下，也能用简单的代码实现三维场景的渲染。一个典型的Three.js程序至少要包括渲染器（Renderer）、场景（Sc...

20171112 2019-08-21 15:12 评论0 收藏0
WebGL three.js学习笔记创建three.js代码的基本框架

摘要：学习学习笔记介绍是一种绘图协议，它把和结合在一起，通过增加的一个绑定，可以为提供硬件加速渲染。环境搭建为了以后的学习方便，首先是搭建一个万能框架，所有的开发都可以在此框架上进行。 WebGL学习----Three.js学习笔记（1） webgl介绍 WebGL是一种3D绘图协议，它把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个Ja...

mtunique 2019-08-23 17:06 评论0 收藏0
three.js笔记——（1）入门

摘要：入门这部分内容的目标是简单地介绍，我们首先讲如何用来实现一个旋转的立方体。具体的实例将会给出，以防你卡住或者需要帮助。透视投影照相机的构造函数是，其中是可视角度为，通常是容器的宽高比是近断距离，是远端距离。入门这部分内容的目标是简单地介绍three.js，我们首先讲如何用three.js来实现一个旋转的立方体。具体的实例将会给出，以防你卡住或者需要帮助。在html文件中引入thr...

ephererid 2019-08-20 14:36 评论0 收藏0
WebGL three.js学习笔记使用粒子系统模拟时空隧道（虫洞）

摘要：学习笔记使用粒子系统模拟时空隧道本例的运行结果如图时空隧道演示地址的粒子系统的粒子系统主要是依靠精灵体来创建的，要实现中的粒子系统创建，一般有两种方式。 WebGL three.js学习笔记使用粒子系统模拟时空隧道本例的运行结果如图：showImg(https://img-blog.csdnimg.cn/20190426222855492.png?x-oss-process=ima...

Guakin_Huang 2019-08-23 17:10 评论0 收藏0