Three.js - 渲染器(WebGLRenderer)（二）

简介

在three.js中内置了很多渲染器，选择什么渲染器都是根据需求来判断的。本节我们详细了解最常用的渲染器 WebGLRenderer

渲染器(WebGLRenderer)

除了实例化的默认配置，我们也可以通过它的属性来控制渲染器。常用属性：

有了参数和属性的控制就还有方法的控制。常用方法：

上面只是列举了一些常用的属性和方法，想更觉灵活的使用WebGLRenderer还需要去熟悉其他属性和方法。

开始使用

渲染器绑定已存在的canvas节点。

    const canvas = document.querySelector('#c2d')// 渲染器 实例化const renderer = new THREE.WebGLRenderer({ canvas:canvas })

渲染器自定义节点

  // 渲染器 实例化const renderer = new THREE.WebGLRenderer()// 设置 画布宽高renderer.setSize(1000, 500)// 加入htmldocument.body.appendChild(renderer.domElement)

两种方式实现的效果都是一样的

获取上下文

console.log('getContext()', renderer.getContext())

设置背景颜色和透明度

renderer.setClearColor(0xeeeeee, 0.5)

渲染器绘制图片。使用.render()绘制图片到画布上，每当场景发生变换都需要重新执行一次，绘制最新的图片。在绘制过程就它会根据配置信息去判断是否有缓存，来快速绘制。当然不是所有缓存都开启最好，缓存是需要内存空间的，当空间不足时程序就会出错。

  function render(time) {time *= 0.001sunMesh.rotation.y = timesunMesh.rotation.x = time// 加载渲染器renderer.render(scene, camera)// 开始动画requestAnimationFrame(render)}

总结

渲染器(WebGLRenderer) 简单理解就是，把我们绘制的场景图，通过相机视椎体的范围来截取，转化为一张图片。然后去绑定页面上canvas元素把这张图片绘制到元素上。动画效果就是不断的生成新的图片替换原来的图片来实现的。渲染器上有很多属性和方法，都是配合其他内容一起使用的，比如阴影就需要灯光和几何体来配合才能展示。

Three.js - 渲染器(WebGLRenderer)（二）相关推荐

three.js 渲染器更改背景色的几种方法
有两种渲染器 : var renderer=new THREE.CanvasRenderer(); 几何级别的渲染,兼容性更好 var renderer=new THREE.WebGLRen ...
Three.js之渲染器
本篇文章将详细讲解three.js中渲染器(renderer)的设置方法. three.js文档中渲染器的分支如下: Renderers CanvasRenderer DOMRenderer SVGR ...
node.js 学习笔记（二）模板引擎和C/S渲染
node.js 学习笔记(二)模板引擎和C/S渲染文章目录 node.js 学习笔记(二)模板引擎和C/S渲染一.初步实现Apache功能 1.1 使用模板引擎 1.2 在 node 中使用模板引 ...
深入学习SAP UI5框架代码系列之二：UI5 控件的渲染器
这是Jerry 2020年的第79篇文章,也是汪子熙公众号总共第261篇原创文章. 系列目录 (0) SAP UI5应用开发人员了解UI5框架代码的意义 (1) UI5 module懒加载机制 (2) ...
Three.js-CSS渲染器（CSS2DRenderer）
在Three中提供2D和3Dcss渲染器供用户使用,如果你希望将二维或三维物体和基于HTML的标签相结合,则这一渲染器将十分有用.在这里,各个DOM元素也被包含到一个CSS2DObject或CSS3D ...
解决three.js渲染gltf 模型与gltfViewer网站效果不一致问题 krpano发黑问题 three.js gltf模型渲染发黑问题
解决使用three.js渲染gltf模型与gltfViewer网站上预览不一致的问题: 原因灯光和环境贴图直接上代码 function init(e) { //声明初始化函数$("#pr ...
three.js渲染带动画的glb文件（内附源码，保姆级）
今日份的下午格外的懒惰,本来不想写辣么长长的一串文字了和解释说明的, 但是发文助手提醒我篇幅较短,曝光比较少,该说不说,这有点过分了. 那就一步步来吧哎最底下附带了案例源文件 1.准备好three. ...
画个球啊(下)——Three.js渲染素描风格场景
工具链:建模软件3dsmax + WebGL三维图形库three.js + 记事本notepad++ 外部素材:3张笔触贴图素材参照文章:使用 WebGL实现素描效果的渲染源码:sphere-sk ...
Three.js杂记（十二）—— VR全景效果制作·中
文章目录序正文开始引入threeJs 材料收集实现原理实现步骤基础的全景完成完整Vue代码总结序在web的前端发展过程中,对于视觉化的要求已经越来越高有关于VR全景的效果也同样可 ...
Three.js渲染Dom元素到3D场景
效果中间两个swiper部分用dom方式实现,再将其转化成为Three中的CSS3DObject对象添加到3D场景中, 代码需要创建两个场景与渲染器(普通渲染器,CSS3Render) 通过两个场 ...

Three.js - 渲染器(WebGLRenderer)（二）

简介

渲染器(WebGLRenderer)

开始使用

总结

Three.js - 渲染器(WebGLRenderer)（二）相关推荐

最新文章

热门文章