three.js 中 SVGObject 的完整指南把 SVG 图形接入 3D 场景并与渲染管线深度交错【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.js本文围绕 three.js 官方 API 文档 SVGObject 展开讲清这个 addon 类如何将任意 SVG 元素包装成可参与 3D 场景图的对象并深入剖析 SVGRenderer 源码中检测、投影、深度交错排序与 DOM 插入的完整渲染链路。读完后你可以独立实现“3D 场景 原生 SVG 图形混合渲染”的方案并理解renderOrder与视口剔除在这条链路中的具体作用。1. SVGObject 是什么定位与继承关系SVGObject 的官方定义是一句话Can be used to wrap SVG elements into a 3D object用于把 SVG 元素包装成 3D 对象。它存在的意义在于SVGRenderer本身只能把 three.js 的几何数据网格、线、精灵输出为 SVGpath而无法直接输出“任意的现成 SVG 图形”。SVGObject就是打通这一缺口的桥梁——它继承自Object3D因此拥有完整的 3D 变换能力position、rotation、scale、quaternion 等同时携带一个原始的 DOMSVGElement由渲染器在每帧将其投影到屏幕坐标后插入 SVG 画布。文档给出的继承链为EventDispatcher → Object3D → SVGObject从源码可以直接印证这一点SVGObject 类定义 位于 SVGRenderer.js 顶部class SVGObject extends Object3D { constructor( node ) { super(); // 类型测试标志默认为 true this.isSVGObject true; // 被包装的 SVG 元素 this.node node; } }注意它与SVGRenderer一起从同一个模块导出export { SVGObject, SVGRenderer }SVGRenderer.js 末尾。这也是为什么文档中它的 Source 指向SVGRenderer.js而不是独立文件。1.1 它解决的典型问题SVGRenderer的文档SVGRenderer.html.md列出了该渲染器的适用场景动画 logo 或图标、交互式 2D/3D 图表、交互式地图、复杂的动画用户界面其优势是输出矢量、锐利、与视口分辨率无关且 SVG 元素可通过 CSS 样式化、可附加 title/description 等无障碍元数据。在这些场景中往往需要把一段现成的 SVG比如 logo、图标、二维码矢量图与 3D 内容混合呈现——这正是SVGObject的用武之地。2. 导入方式SVGObject是一个 addon不在 three.js 核心构建中必须显式导入。官方文档给出的导入语句为import { SVGObject } from three/addons/renderers/SVGRenderer.js;three/addons/这个子路径需要由你的模块解析方案如 ESM import map 或打包器别名映射到实际的 addon 目录。仓库中的官方示例 svg_sandbox.html 给出了标准写法script typeimportmap { imports: { three: ../build/three.module.js, three/addons/: ./jsm/ } } /script其中three/addons/映射到仓库的examples/jsm/目录即 examples/jsm/ 下的各 addon 模块。3. 构造函数与属性3.1 new SVGObject( node : SVGElement )官方文档对构造函数的说明Constructs a new SVG object.node— The SVG element.要包装的 SVG 元素对应源码 constructor构造函数无参数校验直接把传入的 DOM 节点存为实例属性。这意味着node必须是真实的SVGElement如circle、g、image、path等通常用document.createElementNS(http://www.w3.org/2000/svg, tagName)创建节点上可携带任意的 SVG 属性与内联样式stroke、fill、r、stroke-width 等渲染器不做解析原样插入画布同一个node在 DOM 树中同一时刻只能有一个父节点批量创建多个对象时需要对节点做cloneNode()官方示例正是这样做的见第 6 节。3.2 属性一览属性类型默认值说明.isSVGObjectbooleanreadonlytrue类型测试标志。渲染器在场景遍历时靠它识别 SVGObject也是 you can use it for type testing 的用途.nodeSVGElement构造时传入被包装的 SVG 元素每帧渲染时会被写入transform属性并附加到 SVG 根元素由于继承自Object3D它还拥有全部标准 3D 对象属性position、rotation、scale、visible、renderOrder、matrixWorld等其中position和renderOrder对渲染结果有直接意义下面详解。4. 渲染链路深挖SVGObject 是如何被画出来的SVGObject本身只是数据容器真正的工作发生在SVGRenderer.render( scene, camera )中。阅读 render 方法 的源码可以把整条链路拆成五步4.1 场景遍历与标志位检测渲染器先通过Projector把常规几何投影为RenderableFace / RenderableLine / RenderableSprite随后对场景做一次可见性遍历来收集 SVGObjectscene.traverseVisible( function ( object ) { if ( object.isSVGObject ) { _vector3.setFromMatrixPosition( object.matrixWorld ); _vector3.applyMatrix4( _viewProjectionMatrix ); if ( _vector3.z - 1 || _vector3.z 1 ) return; // ... } } );SVGRenderer.js 第 370-394 行这里有三个关键事实识别机制检测的就是isSVGObject属性——这是该只读标志唯一的核心用途也是为什么它与Object3D家族统一的isXxx命名风格保持一致投影与裁剪取对象世界矩阵的位置乘上projectionMatrix * matrixWorldInverse得到裁剪空间坐标。当z超出[-1, 1]即位于视锥之外时直接跳过——这就是视口剔除被裁剪掉的 SVGObject 本帧不会进入输出坐标换算通过_vector3.x * _svgWidthHalf和- _vector3.y * _svgHeightHalf注意 Y 轴取负把 NDC 坐标换算为以视口中心为原点的 SVG 像素坐标其中宽高来自renderer.setSize( w, h )。4.2 深度交错排序每个 SVGObject 被封装为{ node, x, y, z, renderOrder }的记录加入统一渲染列表与常规几何元素并列。当场景中存在 SVGObject 且sortElements为 true 时渲染列表会重新排序function renderSort( a, b ) { const aOrder a.data.renderOrder ! undefined ? a.data.renderOrder : 0; const bOrder b.data.renderOrder ! undefined ? b.data.renderOrder : 0; if ( aOrder ! bOrder ) { return aOrder - bOrder; } else { const aZ a.data.z ! undefined ? a.data.z : 0; const bZ b.data.z ! undefined ? b.data.z : 0; return bZ - aZ; // Painters algorithm: far to near } }SVGRenderer.js 第 283-301 行即先按renderOrder升序相同则按深度远→近画家算法。源码注释明确写道常规元素已由 Projector 排好序只有当存在 SVGObject 需要“深度交错”depth-interleaving时才重新排序。由此得到两个实用结论SVGObject 的z裁剪空间深度会让它正确地“穿过”3D 网格之间前后遮挡关系按深度成立若需强制覆盖遮挡关系比如让一个 SVG logo 永远置顶可设置svgObject.renderOrder 999。4.3 transform 写入与 DOM 插入排序完成后按顺序输出。轮到svgObject类型的渲染项时if ( item.type svgObject ) { flushPath(); // Flush any accumulated paths before inserting SVG node const svgObject item.data; const node svgObject.node; node.setAttribute( transform, translate( svgObject.x , svgObject.y ) ); _svg.appendChild( node ); }SVGRenderer.js 第 415-422 行这解释了SVGObject的两个行为细节定位方式渲染器每帧覆写node的transform为translate(x,y)因此不要期望自己设置的transform属性能保留想缩放/平移内部图形应在节点内部子元素上做或利用 SVGObject 自身的object.scale影响不了 DOM 节点DOM 节点不经过 3D 变换矩阵内部尺寸由节点属性如circle的r控制插入顺序即绘制顺序SVG 是 DOM后插入的节点绘制在上方。渲染器先flushPath()把已累积的path一次性写入addPath会合并相同样式的 path 以减少 DOM 节点数见 flushPath再appendChild( node )从而保证与排序一致由于每帧会重建 SVG 子树autoClear默认true时先clear()移除全部子节点同一个node实例会被反复移除/插入这本身是安全的但再次印证了多实例必须cloneNode()。4.4 相关渲染器参数SVGObject的行为受所在SVGRenderer的几个属性影响这些在 SVGRenderer 文档 中均有定义源码默认值可对照 构造函数属性默认值与 SVGObject 相关的作用.autoCleartrue每帧清除画布子节点SVGObject 节点随之被重建.sortObjects/.sortElementstrue控制 Projector 排序及 SVGObject 深度交错排序是否生效.overdraw0.5范围[0,1]只作用于RenderableFace的抗锯齿间隙扩展不影响 SVGObject 节点.outputColorSpaceSRGBColorSpace影响path的颜色样式与背景色SVGObject 自带样式不受其影响.setQuality(low/high)—low会给 path 节点加shape-rendering: crispEdges提速仅针对生成的 path不作用于 SVGObject 节点5. 能力边界SVGRenderer 的限制SVGObject的能力上限受宿主渲染器约束。官方文档明确列出SVGRenderer的限制无高级着色No advanced shading无纹理支持No texture support无阴影支持No shadow support。从源码看着色模型仅支持MeshBasicMaterial的纯色/顶点色、MeshLambert/Phong/Standard的逐面片 Lambert 光照calculateLight用面片质心与法线计算见 renderFace3以及MeshNormalMaterial的法线可视化。而 SVGObject 节点本身不受此限——它的样式完全由 SVG 节点自己的属性决定这反而使其在“混合 3D 场景 精细矢量 UI 元素”的组合中非常灵活。6. 实战来自官方示例的两种接入模式仓库中的官方示例 examples/svg_sandbox.html 展示了把 SVGObject 混入常规 3D 场景的完整可运行代码其中两种接入模式值得直接借鉴。6.1 模式一程序化创建 SVG 节点并批量实例化// 创建一个 circle 作为模板 const node document.createElementNS( http://www.w3.org/2000/svg, circle ); node.setAttribute( stroke, black ); node.setAttribute( fill, red ); node.setAttribute( r, 40 ); for ( let i 0; i 50; i ) { // 注意 cloneNode同一 DOM 节点不能同时挂在两个父节点下 const object new SVGObject( node.cloneNode() ); object.position.x Math.random() * 1000 - 500; object.position.y Math.random() * 1000 - 500; object.position.z Math.random() * 1000 - 500; scene.add( object ); }对应 svg_sandbox.html 第 180-193 行6.2 模式二从 SVG 文件加载并用 DOMParser 解析仓库提供了多个测试用 SVG 资源如 hexagon.svg。示例中用FileLoader拉取文本后再解析const fileLoader new THREE.FileLoader(); fileLoader.load( models/svg/hexagon.svg, function ( svg ) { const node document.createElementNS( http://www.w3.org/2000/svg, g ); const parser new DOMParser(); const doc parser.parseFromString( svg, image/svgxml ); // 用 g 包裹文档根节点作为一个整体交给 SVGObject node.appendChild( doc.documentElement ); const object new SVGObject( node ); object.position.x 500; scene.add( object ); } );对应 svg_sandbox.html 第 197-210 行该示例还演示了与SVGRenderer的配套初始化第 221-228 行renderer new SVGRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.setQuality( low ); document.body.appendChild( renderer.domElement ); controls new OrbitControls( camera, renderer.domElement );注意两点renderer.domElement是渲染器自建的svg根元素需要手动 append 到页面示例还设置了scene.background new THREE.Color(0xf0f0f0)从 render 源码 可知当scene.background是Color时渲染器会直接把 SVG 根元素的backgroundColor设为该颜色。7. 使用要点与常见坑位小结结合前述源码分析整理出可直接落地的使用清单导入import { SVGObject } from three/addons/renderers/SVGRenderer.js并确保 import map / 打包器别名已配置three/addons/节点来源程序化createElementNS或DOMParser解析文件文本得到的是Element节点可直接传入构造函数批量使用必须克隆对同一模板节点反复cloneNode()否则节点会被appendChild从原位置“搬走”定位由渲染器接管每帧transform被覆写为translate(x,y)内部布局请在节点内部元素上表达遮挡控制默认按深度画家算法排序可用renderOrder强制覆盖视锥外的对象裁剪 z 超出[-1, 1]本帧不绘制可见性traverseVisible意味着visible false的对象及其子孙会被自动跳过宿主约束SVGRenderer不支持纹理、阴影与高级着色规划场景时把精细视觉交给 SVG 节点自身把体积感交给 3D 几何。8. 参考资料仓库内路径API 文档docs/pages/SVGObject.html.md、docs/pages/SVGRenderer.html.md核心实现examples/jsm/renderers/SVGRenderer.jsSVGObject 类L25-L54渲染遍历与排序L357-L422官方示例examples/svg_sandbox.html运行截图见 examples/screenshots/svg_sandbox.jpg示例用 SVG 资源examples/models/svg/含 hexagon.svg、emoji.svg、tiger.svg 等当前仓库版本0.185.0见 package.json以上 API 描述以该版本源码为准【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
three.js 中 SVGObject 的完整指南把 SVG 图形接入 3D 场景并与渲染管线深度交错【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.js本文围绕 three.js 官方 API 文档 SVGObject 展开讲清这个 addon 类如何将任意 SVG 元素包装成可参与 3D 场景图的对象并深入剖析 SVGRenderer 源码中检测、投影、深度交错排序与 DOM 插入的完整渲染链路。读完后你可以独立实现“3D 场景 原生 SVG 图形混合渲染”的方案并理解renderOrder与视口剔除在这条链路中的具体作用。1. SVGObject 是什么定位与继承关系SVGObject 的官方定义是一句话Can be used to wrap SVG elements into a 3D object用于把 SVG 元素包装成 3D 对象。它存在的意义在于SVGRenderer本身只能把 three.js 的几何数据网格、线、精灵输出为 SVGpath而无法直接输出“任意的现成 SVG 图形”。SVGObject就是打通这一缺口的桥梁——它继承自Object3D因此拥有完整的 3D 变换能力position、rotation、scale、quaternion 等同时携带一个原始的 DOMSVGElement由渲染器在每帧将其投影到屏幕坐标后插入 SVG 画布。文档给出的继承链为EventDispatcher → Object3D → SVGObject从源码可以直接印证这一点SVGObject 类定义 位于 SVGRenderer.js 顶部class SVGObject extends Object3D { constructor( node ) { super(); // 类型测试标志默认为 true this.isSVGObject true; // 被包装的 SVG 元素 this.node node; } }注意它与SVGRenderer一起从同一个模块导出export { SVGObject, SVGRenderer }SVGRenderer.js 末尾。这也是为什么文档中它的 Source 指向SVGRenderer.js而不是独立文件。1.1 它解决的典型问题SVGRenderer的文档SVGRenderer.html.md列出了该渲染器的适用场景动画 logo 或图标、交互式 2D/3D 图表、交互式地图、复杂的动画用户界面其优势是输出矢量、锐利、与视口分辨率无关且 SVG 元素可通过 CSS 样式化、可附加 title/description 等无障碍元数据。在这些场景中往往需要把一段现成的 SVG比如 logo、图标、二维码矢量图与 3D 内容混合呈现——这正是SVGObject的用武之地。2. 导入方式SVGObject是一个 addon不在 three.js 核心构建中必须显式导入。官方文档给出的导入语句为import { SVGObject } from three/addons/renderers/SVGRenderer.js;three/addons/这个子路径需要由你的模块解析方案如 ESM import map 或打包器别名映射到实际的 addon 目录。仓库中的官方示例 svg_sandbox.html 给出了标准写法script typeimportmap { imports: { three: ../build/three.module.js, three/addons/: ./jsm/ } } /script其中three/addons/映射到仓库的examples/jsm/目录即 examples/jsm/ 下的各 addon 模块。3. 构造函数与属性3.1 new SVGObject( node : SVGElement )官方文档对构造函数的说明Constructs a new SVG object.node— The SVG element.要包装的 SVG 元素对应源码 constructor构造函数无参数校验直接把传入的 DOM 节点存为实例属性。这意味着node必须是真实的SVGElement如circle、g、image、path等通常用document.createElementNS(http://www.w3.org/2000/svg, tagName)创建节点上可携带任意的 SVG 属性与内联样式stroke、fill、r、stroke-width 等渲染器不做解析原样插入画布同一个node在 DOM 树中同一时刻只能有一个父节点批量创建多个对象时需要对节点做cloneNode()官方示例正是这样做的见第 6 节。3.2 属性一览属性类型默认值说明.isSVGObjectbooleanreadonlytrue类型测试标志。渲染器在场景遍历时靠它识别 SVGObject也是 you can use it for type testing 的用途.nodeSVGElement构造时传入被包装的 SVG 元素每帧渲染时会被写入transform属性并附加到 SVG 根元素由于继承自Object3D它还拥有全部标准 3D 对象属性position、rotation、scale、visible、renderOrder、matrixWorld等其中position和renderOrder对渲染结果有直接意义下面详解。4. 渲染链路深挖SVGObject 是如何被画出来的SVGObject本身只是数据容器真正的工作发生在SVGRenderer.render( scene, camera )中。阅读 render 方法 的源码可以把整条链路拆成五步4.1 场景遍历与标志位检测渲染器先通过Projector把常规几何投影为RenderableFace / RenderableLine / RenderableSprite随后对场景做一次可见性遍历来收集 SVGObjectscene.traverseVisible( function ( object ) { if ( object.isSVGObject ) { _vector3.setFromMatrixPosition( object.matrixWorld ); _vector3.applyMatrix4( _viewProjectionMatrix ); if ( _vector3.z - 1 || _vector3.z 1 ) return; // ... } } );SVGRenderer.js 第 370-394 行这里有三个关键事实识别机制检测的就是isSVGObject属性——这是该只读标志唯一的核心用途也是为什么它与Object3D家族统一的isXxx命名风格保持一致投影与裁剪取对象世界矩阵的位置乘上projectionMatrix * matrixWorldInverse得到裁剪空间坐标。当z超出[-1, 1]即位于视锥之外时直接跳过——这就是视口剔除被裁剪掉的 SVGObject 本帧不会进入输出坐标换算通过_vector3.x * _svgWidthHalf和- _vector3.y * _svgHeightHalf注意 Y 轴取负把 NDC 坐标换算为以视口中心为原点的 SVG 像素坐标其中宽高来自renderer.setSize( w, h )。4.2 深度交错排序每个 SVGObject 被封装为{ node, x, y, z, renderOrder }的记录加入统一渲染列表与常规几何元素并列。当场景中存在 SVGObject 且sortElements为 true 时渲染列表会重新排序function renderSort( a, b ) { const aOrder a.data.renderOrder ! undefined ? a.data.renderOrder : 0; const bOrder b.data.renderOrder ! undefined ? b.data.renderOrder : 0; if ( aOrder ! bOrder ) { return aOrder - bOrder; } else { const aZ a.data.z ! undefined ? a.data.z : 0; const bZ b.data.z ! undefined ? b.data.z : 0; return bZ - aZ; // Painters algorithm: far to near } }SVGRenderer.js 第 283-301 行即先按renderOrder升序相同则按深度远→近画家算法。源码注释明确写道常规元素已由 Projector 排好序只有当存在 SVGObject 需要“深度交错”depth-interleaving时才重新排序。由此得到两个实用结论SVGObject 的z裁剪空间深度会让它正确地“穿过”3D 网格之间前后遮挡关系按深度成立若需强制覆盖遮挡关系比如让一个 SVG logo 永远置顶可设置svgObject.renderOrder 999。4.3 transform 写入与 DOM 插入排序完成后按顺序输出。轮到svgObject类型的渲染项时if ( item.type svgObject ) { flushPath(); // Flush any accumulated paths before inserting SVG node const svgObject item.data; const node svgObject.node; node.setAttribute( transform, translate( svgObject.x , svgObject.y ) ); _svg.appendChild( node ); }SVGRenderer.js 第 415-422 行这解释了SVGObject的两个行为细节定位方式渲染器每帧覆写node的transform为translate(x,y)因此不要期望自己设置的transform属性能保留想缩放/平移内部图形应在节点内部子元素上做或利用 SVGObject 自身的object.scale影响不了 DOM 节点DOM 节点不经过 3D 变换矩阵内部尺寸由节点属性如circle的r控制插入顺序即绘制顺序SVG 是 DOM后插入的节点绘制在上方。渲染器先flushPath()把已累积的path一次性写入addPath会合并相同样式的 path 以减少 DOM 节点数见 flushPath再appendChild( node )从而保证与排序一致由于每帧会重建 SVG 子树autoClear默认true时先clear()移除全部子节点同一个node实例会被反复移除/插入这本身是安全的但再次印证了多实例必须cloneNode()。4.4 相关渲染器参数SVGObject的行为受所在SVGRenderer的几个属性影响这些在 SVGRenderer 文档 中均有定义源码默认值可对照 构造函数属性默认值与 SVGObject 相关的作用.autoCleartrue每帧清除画布子节点SVGObject 节点随之被重建.sortObjects/.sortElementstrue控制 Projector 排序及 SVGObject 深度交错排序是否生效.overdraw0.5范围[0,1]只作用于RenderableFace的抗锯齿间隙扩展不影响 SVGObject 节点.outputColorSpaceSRGBColorSpace影响path的颜色样式与背景色SVGObject 自带样式不受其影响.setQuality(low/high)—low会给 path 节点加shape-rendering: crispEdges提速仅针对生成的 path不作用于 SVGObject 节点5. 能力边界SVGRenderer 的限制SVGObject的能力上限受宿主渲染器约束。官方文档明确列出SVGRenderer的限制无高级着色No advanced shading无纹理支持No texture support无阴影支持No shadow support。从源码看着色模型仅支持MeshBasicMaterial的纯色/顶点色、MeshLambert/Phong/Standard的逐面片 Lambert 光照calculateLight用面片质心与法线计算见 renderFace3以及MeshNormalMaterial的法线可视化。而 SVGObject 节点本身不受此限——它的样式完全由 SVG 节点自己的属性决定这反而使其在“混合 3D 场景 精细矢量 UI 元素”的组合中非常灵活。6. 实战来自官方示例的两种接入模式仓库中的官方示例 examples/svg_sandbox.html 展示了把 SVGObject 混入常规 3D 场景的完整可运行代码其中两种接入模式值得直接借鉴。6.1 模式一程序化创建 SVG 节点并批量实例化// 创建一个 circle 作为模板 const node document.createElementNS( http://www.w3.org/2000/svg, circle ); node.setAttribute( stroke, black ); node.setAttribute( fill, red ); node.setAttribute( r, 40 ); for ( let i 0; i 50; i ) { // 注意 cloneNode同一 DOM 节点不能同时挂在两个父节点下 const object new SVGObject( node.cloneNode() ); object.position.x Math.random() * 1000 - 500; object.position.y Math.random() * 1000 - 500; object.position.z Math.random() * 1000 - 500; scene.add( object ); }对应 svg_sandbox.html 第 180-193 行6.2 模式二从 SVG 文件加载并用 DOMParser 解析仓库提供了多个测试用 SVG 资源如 hexagon.svg。示例中用FileLoader拉取文本后再解析const fileLoader new THREE.FileLoader(); fileLoader.load( models/svg/hexagon.svg, function ( svg ) { const node document.createElementNS( http://www.w3.org/2000/svg, g ); const parser new DOMParser(); const doc parser.parseFromString( svg, image/svgxml ); // 用 g 包裹文档根节点作为一个整体交给 SVGObject node.appendChild( doc.documentElement ); const object new SVGObject( node ); object.position.x 500; scene.add( object ); } );对应 svg_sandbox.html 第 197-210 行该示例还演示了与SVGRenderer的配套初始化第 221-228 行renderer new SVGRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.setQuality( low ); document.body.appendChild( renderer.domElement ); controls new OrbitControls( camera, renderer.domElement );注意两点renderer.domElement是渲染器自建的svg根元素需要手动 append 到页面示例还设置了scene.background new THREE.Color(0xf0f0f0)从 render 源码 可知当scene.background是Color时渲染器会直接把 SVG 根元素的backgroundColor设为该颜色。7. 使用要点与常见坑位小结结合前述源码分析整理出可直接落地的使用清单导入import { SVGObject } from three/addons/renderers/SVGRenderer.js并确保 import map / 打包器别名已配置three/addons/节点来源程序化createElementNS或DOMParser解析文件文本得到的是Element节点可直接传入构造函数批量使用必须克隆对同一模板节点反复cloneNode()否则节点会被appendChild从原位置“搬走”定位由渲染器接管每帧transform被覆写为translate(x,y)内部布局请在节点内部元素上表达遮挡控制默认按深度画家算法排序可用renderOrder强制覆盖视锥外的对象裁剪 z 超出[-1, 1]本帧不绘制可见性traverseVisible意味着visible false的对象及其子孙会被自动跳过宿主约束SVGRenderer不支持纹理、阴影与高级着色规划场景时把精细视觉交给 SVG 节点自身把体积感交给 3D 几何。8. 参考资料仓库内路径API 文档docs/pages/SVGObject.html.md、docs/pages/SVGRenderer.html.md核心实现examples/jsm/renderers/SVGRenderer.jsSVGObject 类L25-L54渲染遍历与排序L357-L422官方示例examples/svg_sandbox.html运行截图见 examples/screenshots/svg_sandbox.jpg示例用 SVG 资源examples/models/svg/含 hexagon.svg、emoji.svg、tiger.svg 等当前仓库版本0.185.0见 package.json以上 API 描述以该版本源码为准【免费下载链接】three.jsJavaScript 3D Library.项目地址: https://gitcode.com/GitHub_Trending/th/three.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
