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

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>


演示链接

示例链接

转载请说明出处内容投诉
CSS教程_站长资源网 » 8. Threejs案例-SVG渲染器和WEBGL渲染器对比

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买