本文目录
前言
渲染器作为
Web 3D开发中的核心组件，
WebGLRenderer深度集成了
WebGL的所有功能，包括但不限于对复杂材质（如金属、玻璃等）、多种光源类型（点光源、平行光、环境光等）、精细阴影以及逼真反射的支持。本文将会记录渲染的基础用法。
一、渲染器基础配置
我们通过
const renderer = new THREE.WebGLRenderer();
创建渲染器。
1.1 canvas
在
WebGLRenderer( parameters : Object )
我们接受对象参数，对象参数中就有
canvas
这个配置项，一个供渲染器绘制其输出到哪个
canvas
。 如果没有传这个参数，会创建一个新
canvas
。例如如下代码：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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><divclass="cas-container"><canvasclass="cas1"></canvas><canvasclass="cas2"></canvas></div><scripttype="module">import*asTHREEfrom"three";// 创建场景const scene =newTHREE.Scene();const loader =newTHREE.TextureLoader();
loader.load('../images/cute.png',function(texture){
scene.background = texture;});// 创建相机const camera =newTHREE.PerspectiveCamera(// 透视相机45,// 视角 角度数1,// 宽高比 占据屏幕0.1,// 近平面（相机最近能看到物体）1000,// 远平面（相机最远能看到物体）);
camera.position.set(0,4,10);
camera.lookAt(0,0,0);// 创建渲染器const renderer =newTHREE.WebGLRenderer({canvas: document.querySelector(".cas1")});// 设置渲染器宽高// renderer.setSize(window.innerWidth, window.innerHeight);// renderer（渲染器）的dom元素添加到我们的HTML文档中// document.body.appendChild(renderer.domElement)// 设置Mesh（网格），网格包含一个几何体以及作用在此几何体上的材质const cube =newTHREE.Mesh(newTHREE.BoxGeometry(1,1,1),newTHREE.MeshBasicMaterial({color:0x00ff00}));const cube2 =newTHREE.Mesh(newTHREE.BoxGeometry(1,1,1),newTHREE.MeshBasicMaterial({color:0x004200}));
cube2.position.x =2;// 将网格对象放入到我们的场景中
scene.add(cube, cube2);// 默认情况下，当我们调用scene.add()的时候，//物体将会被添加到(0,0,0)坐标。但将使得摄像//机和立方体彼此在一起。为了防止这种情况的发生，//我们只需要将摄像机稍微向外移动一些即可。let angle =0;// 设置角度一开始是0// 渲染循环动画functionanimate(){// 在这里我们创建了一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环（在大多数屏幕上，刷新率一般是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次。
在学习的路上，如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。
本文转载自: https://blog.csdn.net/weixin_44103733/article/details/141679512
版权归原作者 你华还是你华 所有， 如有侵权，请联系我们删除。
版权归原作者 你华还是你华 所有， 如有侵权，请联系我们删除。