Threejs之WebGLRenderer渲染器
你华还是你华 2024-10-03 14:33:02 阅读 78
本文目录
前言一、渲染器基础配置1.1 canvas1.2 抗锯齿
前言
渲染器作为<code>Web 3D开发中的核心组件，
WebGLRenderer深度集成了WebGL的所有功能，包括但不限于对复杂材质（如金属、玻璃等）、多种光源类型（点光源、平行光、环境光等）、精细阴影以及逼真反射的支持。本文将会记录渲染的基础用法。
一、渲染器基础配置
我们通过const renderer = new THREE.WebGLRenderer();创建渲染器。
1.1 canvas
在WebGLRenderer( parameters : Object )我们接受对象参数，对象参数中就有canvas这个配置项，一个供渲染器绘制其输出到哪个canvas。 如果没有传这个参数，会创建一个新canvas。例如如下代码：
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<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">code>
<canvas class="cas1"></canvas>code>
<canvas class="cas2"></canvas>code>
</div>
<script type="module">code>
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;
// 设置半径为3
const 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 抗锯齿
通过上图我们可以看到物体的边缘非常的模糊，所以我们可以配置渲染器的<code>antialias: true，开启抗锯齿：
// 创建渲染器
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector(".cas1"), // 决定画布
antialias: true, // 抗锯齿
});
关于配置还有很多，比较常用的还是shadowMap物体阴影，之后再介绍还要配合后期的光影知识点。
还有render，renderer.render(scene, camera);是将场景和相机结合渲染出来，它只会执行一次，所以在贴图加载进来后在异步方法里需要再执行一次才会显示出来。以及在动画的时候需要添加进去才会实时看到动画效果。一次会执行60次。
在学习的路上，如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。