8. Threejs案例-SVG渲染器和WEBGL渲染器对比
实现效果
知识点
SVG渲染器 (SVGRenderer)
SVGRenderer 被用于使用 SVG 来渲染几何数据，所产生的矢量图形在以下几个方面十分有用：
- 动画标志
logo或者图标icon - 可交互的
2D或3D图表或图形 - 交互式地图
- 复杂的或包含动画的用户界面
SVGRenderer 具有很多优势。它产生清晰并且锐利的图像输出，它和实际视口分辨率无关。SVG 元素可以通过 CSS 来控制样式；并且由于它可以添加诸如标题或者描述文字之类的元数据 (
对于搜索引擎或者屏幕阅读器十分有用) ，因此它具有十分良好的可访问性。
然而，SVG 也有一些十分重要的限制：
- 没有高级的着色器
- 不支持纹理
- 不支持阴影
方法
clear()
告诉渲染器来清除其绘图表面。
getSize()
返回一个包含有渲染器宽和高的对象。
render(scene, camera)
使用 camera 来渲染一个 scene。
setClearColor(color, alpha)
设置 clearColor 以及 clearAlpha。
setPrecision(precision)
设置用于创建路径的数据的精度。
setQuality()
设置渲染质量。可能的值有 low 和 high。
setSize(width, height)
改变渲染器尺寸。
基础线条材质 (LineBasicMaterial)
一种用于绘制线框样式几何体的材质。
属性
color
材质的颜色，默认值为白色。
fog
材质是否受雾影响。默认为 true。
linewidth
控制线宽。默认值为 1。
linecap
定义线两端的样式。可选值为 butt, round 和 square。默认值为 round。
linejoin
定义线连接节点的样式。可选值为 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>
演示链接
示例链接
