当前位置：首页 > news >正文

Threejs之WebGLRenderer渲染器

news 2025/7/15 10:21:17

本文目录

前言
一、渲染器基础配置
- 1.1 canvas
- 1.2 抗锯齿

前言

渲染器作为Web 3D开发中的核心组件，WebGLRenderer深度集成了WebGL的所有功能，包括但不限于对复杂材质（如金属、玻璃等）、多种光源类型（点光源、平行光、环境光等）、精细阴影以及逼真反射的支持。本文将会记录渲染的基础用法。

一、渲染器基础配置

我们通过const renderer = new THREE.WebGLRenderer();创建渲染器。

1.1 canvas

在WebGLRenderer( parameters : Object )我们接受对象参数，对象参数中就有canvas这个配置项，一个供渲染器绘制其输出到哪个canvas。如果没有传这个参数，会创建一个新canvas。例如如下代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html,body {margin: 0;padding: 0;width: 100%;height: 100%;}.cas-container {display: flex;}.cas1, .cas2 {margin: 20px;width: 400px;height: 400px;border: 1px solid #eeeeee;}</style>
</head><body><div class="cas-container"><canvas class="cas1"></canvas><canvas class="cas2"></canvas></div><script type="module">import * as THREE from "three";// 创建场景const scene = new THREE.Scene();const loader = new THREE.TextureLoader();loader.load('../images/cute.png', function(texture) {scene.background = texture;});// 创建相机const camera = new THREE.PerspectiveCamera( // 透视相机45, // 视角 角度数1, // 宽高比 占据屏幕0.1, // 近平面（相机最近能看到物体）1000, // 远平面（相机最远能看到物体）);camera.position.set(0, 4, 10);camera.lookAt(0, 0, 0);// 创建渲染器const renderer = new THREE.WebGLRenderer({canvas: document.querySelector(".cas1")});// 设置渲染器宽高// renderer.setSize(window.innerWidth, window.innerHeight);// renderer（渲染器）的dom元素添加到我们的HTML文档中// document.body.appendChild(renderer.domElement)// 设置Mesh（网格），网格包含一个几何体以及作用在此几何体上的材质const cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: 0x00ff00 }));const cube2 = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: 0x004200 }));cube2.position.x = 2;// 将网格对象放入到我们的场景中scene.add(cube, cube2);// 默认情况下，当我们调用scene.add()的时候，//物体将会被添加到(0,0,0)坐标。但将使得摄像//机和立方体彼此在一起。为了防止这种情况的发生，//我们只需要将摄像机稍微向外移动一些即可。let angle = 0; // 设置角度一开始是0// 渲染循环动画function animate() {// 在这里我们创建了一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环（在大多数屏幕上，刷新率一般是60次/秒）requestAnimationFrame(animate);cube.rotation.x += 0.01;cube.rotation.y += 0.01;// 设置半径为3const radius = 3;angle += 0.01;// 相机坐标camera.position.x = radius * Math.cos(angle);camera.position.z = radius * Math.sin(angle);camera.lookAt(0, 0, 0);renderer.render(scene, camera);};// 执行动画animate();</script>
</body></html>

可以看到有两个画布，我们渲染到第一个画布：
请添加图片描述

1.2 抗锯齿

通过上图我们可以看到物体的边缘非常的模糊，所以我们可以配置渲染器的antialias: true，开启抗锯齿：

        // 创建渲染器const renderer = new THREE.WebGLRenderer({canvas: document.querySelector(".cas1"),  // 决定画布antialias: true, // 抗锯齿});

关于配置还有很多，比较常用的还是shadowMap物体阴影，之后再介绍还要配合后期的光影知识点。
还有render，renderer.render(scene, camera);是将场景和相机结合渲染出来，它只会执行一次，所以在贴图加载进来后在异步方法里需要再执行一次才会显示出来。以及在动画的时候需要添加进去才会实时看到动画效果。一次会执行60次。