第174期：threejs中的渲染器

前端那些年
823 阅读3分钟

封面图

image.png

顾名思义，渲染器主要是用来渲染我们前面创建的场景的。

WebGLRenderer

在threejs中，常用的渲染器WebGLRenderer。通常情况下使用WebGLRenderer非常简单，我们直接对它进行实例化即可，然后调用其render方法进行渲染：

const renderer = new THREE.WebGLRenderer()
renderer.render(scene,camera)

当然，在实例化渲染器的时候，我们也可以根据实际情况添加对应的参数，以便达到我们想要的效果，WebGLRenderer常用的参数有下面这些：

  • canvas 。这个参数用来置顶渲染器在什么地方绘制内容，如果不传这个参数，默认会生成一个新的canvas元素。
  • precision。着色器精度。可选值有：highp、mediump、lowp" 默认为highp。
  • antialias 。是否消除锯齿。默认为false。
  • powerPreference。功耗提示。向用户提供提示，指示哪种GPU配置适合此WebGL上下文。可以是“high-performance”、“low-power”或“default”。默认为“default”。

当然还有很多其他的参数，这里简单介绍这么几个，有兴趣的小伙伴可以自行到官网上查看。

在基本的使用过程中，我们通常遵循下面的逻辑：创建场景-->创建相机-->创建渲染器-->执行渲染器的render方法-->将渲染器所创建的画布添加到页面中去。

import * as THREE from 'three';
// 场景
const scene = new THREE.Scene();
  //相机
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
// 渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
// 添加到页面
document.body.appendChild( renderer.domElement );

WebGL1Renderer

如果我们打开官方文档查找渲染器，会发现还有一个名叫WebGL1Renderer的渲染器。文档中的解释是：

Since r118 WebGLRenderer automatically uses a WebGL 2 rendering context. When upgrading an existing project to => r118, applications might break because of two reasons:

Custom shader code needs to be GLSL 3.0 conform.

WebGL 1 extension checks have to be changed.

If you can't afford the time to upgrade your code but still want to use the latest version, you can use WebGL1Renderer. This version of the renderer will enforce a WebGL 1 rendering context.

从r118开始，渲染器默认使用WebGL 2 去渲染内容。当你升级现有的项目到r118的时候，应用程序可能会出错，因为自定义着色器代码需要符合GLSL 3.0标注，同时必须更改WebGL 1扩展检查。

如果没时间升级到最新版本，我们就可以使用WebGL1Renderer。

r118是threejs的版本名称，我们打开github，可以看到threejs的版本名称都是用r加数字来表示的：

WebGL 2说的是threejs所基于的webgl版本为2.0。我们可以在webgl的官网查到相关版本信息：

  • 2.0

  • 1.0

2.0使用了opengl es 3.0的API ，1.0使用了opengl es 2.0的API。

其他渲染器

CSS2DRenderer

2D渲染器，主要用来渲染一些html标签，将这些标签和3D对象相结合。比如：

我们可以使用下面的方式引入项目进行使用，其使用的基本流程为：创建html标签-->将其转化为2d对象-->使用CSS2DRenderer进行渲染，如下代码所示：

    import { CSS2DRenderer } from 'three/addons/renderers/CSS2DRenderer.js';
	// 创建html标签
    const moonDiv = document.createElement( 'div' );
    moonDiv.className = 'label';
    moonDiv.textContent = 'Moon';
    moonDiv.style.backgroundColor = 'transparent';
  // 将其转化为2d对象
    const moonLabel = new CSS2DObject( moonDiv );
    moonLabel.position.set( 1.5 * MOON_RADIUS, 0, 0 );
    moonLabel.center.set( 0, 1 );
    moon.add( moonLabel );
  // 使用CSS2DRenderer进行渲染
    labelRenderer = new CSS2DRenderer();
    labelRenderer.setSize( window.innerWidth, window.innerHeight );
    labelRenderer.domElement.style.position = 'absolute';
    labelRenderer.domElement.style.top = '0px';
    document.body.appendChild( labelRenderer.domElement );
CSS3DRenderer

CSS3Renderer主要用于通过CSS3的转换属性将3D效果应用于DOM元素。如果我们想在没有画布的情况下将3D效果应用于网站，这个渲染器将会显示出它特有的能力。当然，它也可以用于将DOM元素与WebGL内容相结合。

threejs官网的示例中有个分子的示例：

这种效果的实现就是使用CSS3Renderer生成的三维场景，其基本实现过程是：加载分子结构数据--->实现各个原子的效果-->使用CSS3Renderer进行渲染。

avatar
文章
阅读
粉丝