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,一经查实,立即删除!

相关文章

《拳皇97》中的人物性格——麻宫雅典娜

在充满热血与激情的《拳皇97》世界中,有一位身披粉红战袍、手持麦克风当武器的女性角色脱颖而出,她就是我们的甜美格斗家——麻宫雅典娜。这位看似柔弱却内藏坚韧的偶像歌手,以其独特的性格魅力和幽默生动的表现方式,在格斗场上演绎了一幕幕让人捧腹又感动的瞬间。 首先,让…

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

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

Flutter 解决ExpansionTile上下分割线问题,以及title撑满问题

文章目录 前言一、解决上下分割线问题二、使ExpansionTile的title撑满总结 前言 最近在做flutter项目&#xff0c;其中的一个功能用到了ExpansionTile的效果&#xff0c;奈何我们的设计师要求很高&#xff0c;展开的时候不能有上下一根线&#xff0c;而且我们是不需要展开的按…

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

数据库复试—SQL查询举例

数据库复试—SQL查询举例&#xff08;续&#xff09; 单表查询实例 查询年龄在20到23岁之间的学生信息 select * from student where sage between 20 and 30; ------------------------------------- | Sno | Sname | Ssex | Sage | Sdept | -------------------------…

【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项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 研究现状…

mysql - 笔记

对于C++开发者来说,连接MySQL数据库的库也有几个选择。以下是一些支持Windows和Linux的MySQL C++库: MySQL Connector/C++: MySQL Connector/C++是MySQL官方提供的C++连接器库,它提供了对MySQL数据库的高性能访问。它支持Windows和Linux系统,并提供了面向对象的API,使得与…

Flutter 各种Demo效果合集

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

Linux查询日志命令

Linux查询日志 常见的问题排查有&#xff0c;k8s、arthas、堡垒机… 找到本电脑的 longs 日志文件夹&#xff0c;里面有error 日志… 常见的错误日志查看命令有&#xff1a; -- 查询错误日志 所有的错误日志 cat error.2024-02-02 -- 指定过滤条件 cat error.2024-02-02…

考研经验总结——考试期间

文章目录 一、订房二、看考场三、休息四、考前带宾馆的书五、安全 一、订房 我刚刚看了看&#xff0c;是9.10号订的酒店。你们可以提前向学长学姐打听你的考场在哪个学校&#xff08;徐州的考生&#xff0c;考省外的学校是在矿大考试&#xff0c;考省内的学校是在江师大&#…

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

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

spring常用语法

etl表达式解析 if (rawValue ! null && rawValue.startsWith("#{") && entryValue.endsWith("}")) { // assume its spel StandardEvaluationContext context new StandardEvaluationContext(); context.setBeanResolver(new Be…

Task05:PPO算法

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

vs +cmake 开发的注意

vs自动生成的cmake 项目在项目顶目录会有 一个cmakepresets.json文件 在cmake文档里 该文件是对cmake的某些变量进行提前预设. 引入标头的问题: CMAKE_BUILD_TYPE 设置为Release vs不会自动给你找标头 甚至不会给你自动提示 设置为 Debug 即可 在cmake 项目里面 如果对某…

Redis的big key问题介绍以及监控手段

本文目录&#xff1a; 1、big key的定义及问题 2、2023年实际生产事故 3、监控手段 4、预防手段 &#xff08;一&#xff09;big key的定义及产生的问题 Redis 的big key是指value占用内存空间较大的键值。通常&#xff0c;针对不同的数据类型会用元素个数或者占用空间大小…

2024年混合云:趋势和预测

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

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

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

JRE和JVM的区别

JRE&#xff08;Java Runtime Environment&#xff0c;Java运行环境&#xff09;和JVM&#xff08;Java Virtual Machine&#xff0c;Java虚拟机&#xff09;是Java运行时环境的重要组成部分&#xff0c;它们之间主要有以下区别&#xff1a; 功能不同&#xff1a;JRE是Java运行…