技术标签: svg webgl threejs WebGLRenderer 渲染器 Threejs SVGRenderer
SVGRenderer
被用于使用 SVG
来渲染几何数据,所产生的矢量图形在以下几个方面十分有用:
logo
或者图标 icon
2D
或 3D
图表或图形SVGRenderer
具有很多优势。它产生清晰并且锐利的图像输出,它和实际视口分辨率无关。
SVG
元素可以通过 CSS
来控制样式;并且由于它可以添加诸如标题或者描述文字之类的元数据 (
对于搜索引擎或者屏幕阅读器十分有用) ,因此它具有十分良好的可访问性。
然而,SVG
也有一些十分重要的限制:
告诉渲染器来清除其绘图表面。
返回一个包含有渲染器宽和高的对象。
使用 camera
来渲染一个 scene
。
设置 clearColor
以及 clearAlpha
。
设置用于创建路径的数据的精度。
设置渲染质量。可能的值有 low
和 high
。
改变渲染器尺寸。
一种用于绘制线框样式几何体的材质。
材质的颜色,默认值为白色。
材质是否受雾影响。默认为 true
。
控制线宽。默认值为 1
。
定义线两端的样式。可选值为 butt
, round
和 square
。默认值为 round
。
定义线连接节点的样式。可选值为 round
, bevel
和 miter
。默认值为 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>
文章浏览阅读2w次,点赞7次,收藏51次。四个步骤1.创建C++ Win32项目动态库dll 2.在Win32项目动态库中添加 外部依赖项 lib头文件和lib库3.导出C接口4.c#调用c++动态库开始你的表演...①创建一个空白的解决方案,在解决方案中添加 Visual C++ , Win32 项目空白解决方案的创建:添加Visual C++ , Win32 项目这......_c#调用lib
文章浏览阅读4.6k次。苹方字体是苹果系统上的黑体,挺好看的。注重颜值的网站都会使用,例如知乎:font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, W..._ubuntu pingfang
文章浏览阅读159次。表单表单概述表单标签表单域按钮控件demo表单标签表单标签基本语法结构<form action="处理数据程序的url地址“ method=”get|post“ name="表单名称”></form><!--action,当提交表单时,向何处发送表单中的数据,地址可以是相对地址也可以是绝对地址--><!--method将表单中的数据传送给服务器处理,get方式直接显示在url地址中,数据可以被缓存,且长度有限制;而post方式数据隐藏传输,_html表单的处理程序有那些
文章浏览阅读1.2k次。使用说明:开启Google的登陆二步验证(即Google Authenticator服务)后用户登陆时需要输入额外由手机客户端生成的一次性密码。实现Google Authenticator功能需要服务器端和客户端的支持。服务器端负责密钥的生成、验证一次性密码是否正确。客户端记录密钥后生成一次性密码。下载谷歌验证类库文件放到项目合适位置(我这边放在项目Vender下面)https://github.com/PHPGangsta/GoogleAuthenticatorPHP代码示例://引入谷_php otp 验证器
文章浏览阅读4.3k次,点赞5次,收藏11次。matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距
文章浏览阅读2.2k次。①Storage driver 处理各镜像层及容器层的处理细节,实现了多层数据的堆叠,为用户 提供了多层数据合并后的统一视图②所有 Storage driver 都使用可堆叠图像层和写时复制(CoW)策略③docker info 命令可查看当系统上的 storage driver主要用于测试目的,不建议用于生成环境。_docker 保存容器
文章浏览阅读834次,点赞27次,收藏13次。网络拓扑结构是指计算机网络中各组件(如计算机、服务器、打印机、路由器、交换机等设备)及其连接线路在物理布局或逻辑构型上的排列形式。这种布局不仅描述了设备间的实际物理连接方式,也决定了数据在网络中流动的路径和方式。不同的网络拓扑结构影响着网络的性能、可靠性、可扩展性及管理维护的难易程度。_网络拓扑csdn
文章浏览阅读1.8k次,点赞5次,收藏8次。IOS系统Date的坑要创建一个指定时间的new Date对象时,通常的做法是:new Date("2020-09-21 11:11:00")这行代码在 PC 端和安卓端都是正常的,而在 iOS 端则会提示 Invalid Date 无效日期。在IOS年月日中间的横岗许换成斜杠,也就是new Date("2020/09/21 11:11:00")通常为了兼容IOS的这个坑,需要做一些额外的特殊处理,笔者在开发的时候经常会忘了兼容IOS系统。所以就想试着重写Date函数,一劳永逸,避免每次ne_date.prototype 将所有 ios
文章浏览阅读5.3k次。方法一:用PLSQL Developer工具。 1 在PLSQL Developer的sql window里输入select * from test for update; 2 按F8执行 3 打开锁, 再按一下加号. 鼠标点到第一列的列头,使全列成选中状态,然后粘贴,最后commit提交即可。(前提..._excel导入pl/sql
文章浏览阅读83次。Git常用命令速查手册1、初始化仓库git init2、将文件添加到仓库git add 文件名 # 将工作区的某个文件添加到暂存区 git add -u # 添加所有被tracked文件中被修改或删除的文件信息到暂存区,不处理untracked的文件git add -A # 添加所有被tracked文件中被修改或删除的文件信息到暂存区,包括untracked的文件...
文章浏览阅读202次。分享119个ASP.NET源码总有一个是你想要的_千博二手车源码v2023 build 1120
文章浏览阅读1.8k次。版权声明:转载请注明出处 http://blog.csdn.net/irean_lau。目录(?)[+]1、缺省构造函数。2、缺省拷贝构造函数。3、 缺省析构函数。4、缺省赋值运算符。5、缺省取址运算符。6、 缺省取址运算符 const。[cpp] view plain copy_空类默认产生哪些类成员函数