0


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()

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

low

high

setSize(width, height)

改变渲染器尺寸。

基础线条材质 (LineBasicMaterial)

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

属性
color

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

fog

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

true

linewidth

控制线宽。默认值为

1

linecap

定义线两端的样式。可选值为

butt

,

round

square

。默认值为

round

linejoin

定义线连接节点的样式。可选值为

round

,

bevel

miter

。默认值为

round

代码

<!DOCTYPEhtml><htmllang="zh"><head><title></title><metacharset="UTF-8"><scriptsrc="ThreeJS/three.js"></script><scriptsrc="ThreeJS/jquery.js"></script><scriptsrc="ThreeJS/Projector.js"></script><scriptsrc="ThreeJS/SVGRenderer.js"></script></head><body><p><buttonid="myButton1">启用SVG渲染器</button><buttonid="myButton2">启用WebGL渲染器</button></p><divid="myContainer"></div><script>// 初始化一个变量,用于决定是否使用SVG渲染器let isSVGRenderer =true;// 创建SVG渲染器,并设置其大小为窗口大小const myRenderer1 =newTHREE.SVGRenderer();
    myRenderer1.setSize(window.innerWidth, window.innerHeight);// 创建WebGL渲染器,开启抗锯齿功能,并设置其大小为窗口大小const myRenderer2 =newTHREE.WebGLRenderer({antialias:true});
    myRenderer2.setSize(window.innerWidth, window.innerHeight);// 创建一个透视相机,设置其视场角度和位置const myCamera =newTHREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight,0.1,1000);
    myCamera.position.z =4;// 创建一个场景,并设置其背景色为白色const myScene =newTHREE.Scene();
    myScene.background =newTHREE.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 =newTHREE.BufferGeometry();
    myGeometry.setAttribute('position',newTHREE.Float32BufferAttribute(myVertices,3));// 创建三个线段,设置其材质、大小和旋转属性,并将它们添加到场景中for(i =1; i <=3; i++){const myMaterial =newTHREE.LineBasicMaterial({color: Math.random()*0xffffff,linewidth:20});let myLine =newTHREE.Line(myGeometry, myMaterial);
        myLine.scale.setScalar(i /3);
        myScene.add(myLine);}// 调用animate函数来渲染图形animate();// animate函数用于更新和渲染场景中的物体,并启动动画循环functionanimate(){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>

演示链接

示例链接

标签: threejs svg webgl

本文转载自: https://blog.csdn.net/m0_51180924/article/details/135976660
版权归原作者 MossGrower 所有, 如有侵权,请联系我们删除。

“8. Threejs案例-SVG渲染器和WEBGL渲染器对比”的评论:

还没有评论