8. Threejs案例-SVG渲染器和WEBGL渲染器对比

8. Threejs案例-SVG渲染器和WEBGL渲染器对比

实现效果

效果

知识点

SVG渲染器 (SVGRenderer)

SVGRenderer 被用于使用 SVG 来渲染几何数据,所产生的矢量图形在以下几个方面十分有用:

  • 动画标志 logo 或者图标 icon
  • 可交互的 2D3D 图表或图形
  • 交互式地图
  • 复杂的或包含动画的用户界面

SVGRenderer 具有很多优势。它产生清晰并且锐利的图像输出,它和实际视口分辨率无关。
SVG 元素可以通过 CSS 来控制样式;并且由于它可以添加诸如标题或者描述文字之类的元数据 (
对于搜索引擎或者屏幕阅读器十分有用) ,因此它具有十分良好的可访问性。

然而,SVG 也有一些十分重要的限制:

  • 没有高级的着色器
  • 不支持纹理
  • 不支持阴影
方法
clear()

告诉渲染器来清除其绘图表面。

getSize()

返回一个包含有渲染器宽和高的对象。

render(scene, camera)

使用 camera 来渲染一个 scene

setClearColor(color, alpha)

设置 clearColor 以及 clearAlpha

setPrecision(precision)

设置用于创建路径的数据的精度。

setQuality()

设置渲染质量。可能的值有 lowhigh

setSize(width, height)

改变渲染器尺寸。

基础线条材质 (LineBasicMaterial)

一种用于绘制线框样式几何体的材质。

属性
color

材质的颜色,默认值为白色。

fog

材质是否受雾影响。默认为 true

linewidth

控制线宽。默认值为 1

linecap

定义线两端的样式。可选值为 butt, roundsquare。默认值为 round

linejoin

定义线连接节点的样式。可选值为 round, bevelmiter。默认值为 round

代码

<!DOCTYPE html>
<html lang="zh">
<head><title></title><meta charset="UTF-8"><script src="ThreeJS/three.js"></script><script src="ThreeJS/jquery.js"></script><script src="ThreeJS/Projector.js"></script><script src="ThreeJS/SVGRenderer.js"></script></head>
<body>
<p><button id="myButton1">启用SVG渲染器</button><button id="myButton2">启用WebGL渲染器</button>
</p>
<div id="myContainer"></div>
<script>// 初始化一个变量,用于决定是否使用SVG渲染器let isSVGRenderer = true;// 创建SVG渲染器,并设置其大小为窗口大小const myRenderer1 = new THREE.SVGRenderer();myRenderer1.setSize(window.innerWidth, window.innerHeight);// 创建WebGL渲染器,开启抗锯齿功能,并设置其大小为窗口大小const myRenderer2 = new THREE.WebGLRenderer({antialias: true});myRenderer2.setSize(window.innerWidth, window.innerHeight);// 创建一个透视相机,设置其视场角度和位置const myCamera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);myCamera.position.z = 4;// 创建一个场景,并设置其背景色为白色const myScene = new THREE.Scene();myScene.background = new THREE.Color(0xffffff);// 创建一个用于存储顶点坐标的数组const myVertices = [];let i;// 通过循环生成顶点坐标,并存储到myVertices数组中for (i = 0; i <= 150; i++) {const v = (i / 150) * (Math.PI * 2);const x = Math.sin(v);const z = Math.cos(v);myVertices.push(x, 0, z);}// 创建一个几何体,并设置其位置属性const myGeometry = new THREE.BufferGeometry();myGeometry.setAttribute('position', new THREE.Float32BufferAttribute(myVertices, 3));// 创建三个线段,设置其材质、大小和旋转属性,并将它们添加到场景中for (i = 1; i <= 3; i++) {const myMaterial = new THREE.LineBasicMaterial({color: Math.random() * 0xffffff,linewidth: 20});let myLine = new THREE.Line(myGeometry, myMaterial);myLine.scale.setScalar(i / 3);myScene.add(myLine);}// 调用animate函数来渲染图形animate();// animate函数用于更新和渲染场景中的物体,并启动动画循环function animate() {let myOffset = 0;const myTime = performance.now() / 1000; // 获取当前时间并计算出时间差myScene.traverse(function (child) { // 遍历场景中的每个物体,更新其旋转属性child.rotation.x = myOffset + (myTime / 3); // 在x轴上旋转物体,并随时间变化产生动画效果child.rotation.z = myOffset + (myTime / 4); // 在z轴上旋转物体,并随时间变化产生动画效果myOffset++; // 每次循环时增加旋转角度,以产生连续的动画效果});let myRenderer = myRenderer1; // 根据isSVGRenderer变量的值选择渲染器,默认为SVG渲染器$("#myContainer").html(''); // 清空指定的容器元素的内容,以便将渲染器的DOM元素添加进去if (isSVGRenderer) { // 如果选择SVG渲染器,则使用myRenderer1渲染器进行渲染myRenderer = myRenderer1;} else { // 如果选择WebGL渲染器,则使用myRenderer2渲染器进行渲染myRenderer = myRenderer2;}$("#myContainer").append(myRenderer.domElement); // 将渲染器的DOM元素添加到指定的容器中,以便在网页上显示渲染结果myRenderer.render(myScene, myCamera); // 使用指定的渲染器和相机渲染场景,并将结果输出到DOM元素中requestAnimationFrame(animate); // 使用requestAnimationFrame函数启动动画循环,继续下一帧的渲染和动画效果生成}//响应单击“启用SVG渲染器”按钮$("#myButton1").click(function () {isSVGRenderer = true;});//响应单击“启用WebGL渲染器”按钮$("#myButton2").click(function () {isSVGRenderer = false;});
</script>
</body>
</html>

演示链接

示例链接

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/662807.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C++11(一)】列表初始化and右值引用

一、 统一的列表初始化 1.1 &#xff5b;&#xff5d;初始化 在C98中&#xff0c;标准允许 使用花括号{}对数组或者结构体元素 进行统一的列表初始值设定 C11扩大了用大括号 括起的列表(初始化列表)的使用范围 使其可用于所有的内置类型和 用户自定义的类型 使用初始化列表时…

nginx反向代理----->微服务网关----->具体微服务

今天&#xff0c;做项目的时候做项目的时候配路由出现bug&#xff0c;特此理顺一下从nginx到微服务网关再到微服务这一过程。 nginx配置 upstream admin-gateway{server localhost:21217; }server {listen 8803;location / {root F:/develop/admin-web/;index index.html;}…

十六、Vben框架table内部合并行

在vben项目中合并内部的行是一个常规的操作,以前我们说过如果是一条数据内部只需要分割拿高撑开就可以实现,在第三章的时候我们已经讲过了,那么如果是不定的条数合并为一条数据呢,怎么能够实现呢,下面我们就来讲讲。 先看效果图 如图,能看到是三条数据,其实是…

【Django-ninja】django ninja中使用查询过滤器FilterSchema

Django ORM中过滤器 filter的基本用法 filter() 是 QuerySet 对象的一个方法&#xff0c;用于从数据库中过滤数据。它接受一个或多个关键字参数&#xff0c;每个参数都表示一个查询条件&#xff0c;它们之间是 AND 关系。 以下是 filter() 方法的基本用法示例&#xff1a; fr…

基于springboot+vue的旅游管理系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 研究现状…

Flutter 各种Demo效果合集

Flutter 各种Demo实现效果&#xff1a; github&#xff1a;GitHub - PangHaHa12138/FlutterDemo: Flutter 各种Demo效果合集 1&#xff1a;2种 仿朋友圈 效果,顶部拉伸 和 不拉伸 2&#xff1a;仿抖音上下滑动视频播放 3&#xff1a;视频直播&#xff08;使用的电视台的m3u…

Apache SeaTunnel (不含web) Window11 本机搭建(非源码)

启动环境 需要提前准备的(只提供作者试过且可行的方案) window11ubuntu20(wsl2) window11内置ubuntu的方式自行百度&#xff0c;此处不做陈述jdk8mysql8navicatvscode 环境准备不做过多陈述&#xff0c;以下是正式的安装启动步骤 SeaTunnel 2.3.3 资源准备 第一步: 创建文件…

Task05:PPO算法

本篇博客是本人参加Datawhale组队学习第五次任务的笔记 【教程地址】https://github.com/datawhalechina/joyrl-book 【强化学习库JoyRL】https://github.com/datawhalechina/joyrl/tree/main 【JoyRL开发周报】 https://datawhale.feishu.cn/docx/OM8fdsNl0o5omoxB5nXcyzsInGe…

2024年混合云:趋势和预测

混合云环境对于 DevOps 团队变得越来越重要&#xff0c;主要是因为它们能够弥合公共云资源的快速部署与私有云基础设施的安全和控制之间的差距。这种环境的混合为 DevOps 团队提供了灵活性和可扩展性&#xff0c;这对于大型企业中的持续集成和持续部署 (CI/CD) 至关重要。 在混…

基于springboot+vue的阿博图书馆管理系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目背景…

Pandas 数据结构 – Pandas CSV 文件

Pandas CSV 文件 CSV&#xff08;Comma-Separated Values&#xff0c;逗号分隔值&#xff0c;有时也称为字符分隔值&#xff0c;因为分隔字符也可以不是逗号&#xff09;&#xff0c;其文件以纯文本形式存储表格数据&#xff08;数字和文本&#xff09;。 CSV 是一种通用的、…

06. 【Linux教程】终端工具

Linux 终端工具 前面介绍了如何安装虚拟机&#xff0c;还介绍了如何在虚拟机上安装 CentOs 操作系统&#xff0c;并且给 CentOs 配置了局域网固定 ip&#xff0c;那么此时的 CentOs 相当于是在局域网的一台服务器了&#xff0c;虚拟机上面已经自带终端工具&#xff0c;实际业务…

上传upload及显示img图片预览、删除

上传图片文件a-upload html部分 <div className="clearfix"><a-upload:custom-request="customRequest"listType="picture-card":fileList="fileList":onPreview="handlePreview":on-remove="del">&…

day39_mysql

今日内容 0 复习昨日 1 DML 2 约束 3 DQL 0 复习昨日 1 什么是数据库(Database)? 用来组织,存储,管理数据的仓库 2 什么是数据库管理系统(Database Management System-DBMS)? 用来管理数据库的一个软件 3 数据库分类 关系型数据库,Oracle,Mysql,SqlServer,DB2非关系数据库,Re…

【android】 android->profile 查看内存泄露

目录 实例讲解 各字段解释 实例讲解 各字段解释 在 Android Studio 的 Profile 视图中&#xff0c;Arrange by Stack 用于对内存分配和释放事件进行堆栈排列&#xff0c;以便更好地了解内存使用情况。以下是表上各列的一般含义&#xff1a; 1. **Call Chart (调用图)**: …

【Qt】—— Qt Creator 创建项目

目录 &#xff08;一&#xff09;Qt Creator概览 &#xff08;二&#xff09;使⽤Qt Creator新建项⽬ &#xff08;一&#xff09;Qt Creator概览 从开始菜单或者快捷⽅式打开Qt Creator集成开发环境&#xff0c;启动之后看到类似下⾯的界⾯&#xff1a; 【解释说明】 菜单栏…

ES6中新增Array.from()函数的用法详解

目录 Map对象的转换 Set对象的转换 字符串的转换 类数组对象的转换 Array.from可以接受三个参数 ES6为Array增加了from函数用来将其他对象转换成数组。当然&#xff0c;其他对象也是有要求&#xff0c;也不是所有的&#xff0c;可以将两种对象转换成数组。 1、部署了Iter…

代码安全审计经验集(下)

对HTTP加密请求参数的测试 对于HTTP请求体加密&#xff0c;如果直接使用明文的请求参数&#xff0c;是无法进行正常的安全测试的。但通常还是有办法分析出加解密的策略&#xff0c;如果能把加解密算法还原&#xff0c;就可以先将安全测试的payload添加到原始明文参数&#xff0…

SpringBoot统一功能处理,拦截器,统一数据格式,捕捉异常

目录 拦截器:是Spring框架提供的核心功能之一&#xff0c;主要用来拦截用户的请求&#xff0c;在指定方法前后&#xff0c;根据业务需要执行预先设定的代码: 自定义拦截器 统一数据格式&#xff0c;要包含状态码&#xff0c;错误信息​编辑 出现针对String类型的错误​​​…

【Linux C | 网络编程】netstat 命令图文详解 | 查看网络连接、查看路由表、查看统计数据

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…