Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >How to load SVG file into SVGRenderer in three.js

How to load SVG file into SVGRenderer in three.js

作者头像
周星星9527
发布于 2021-11-15 05:04:45
发布于 2021-11-15 05:04:45
5.8K00
代码可运行
举报
运行总次数:0
代码可运行

原文:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
https://stackoverflow.com/questions/33140342/how-to-load-svg-file-into-svgrenderer-in-three-js

I'm trying to use SVGRenderer in three.js (http://threejs.org/examples/#svg_sandbox). The example shows you how to make an SVG element (a circle) on the fly. I want to import an SVG file that I already have in my computer. How would I do that?

The createElementNS command doesn't seem to support importing SVG files?

I essentially want my image.svg to be displayed on a three.js scene.

You can use the THREE.SVGLoader() Library to achieve it :

核心代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
scene = new THREE.Scene();
  scene.add(svgObject);

  var ambient = new THREE.AmbientLight(0x80ffff);
  scene.add(ambient);
  var directional = new THREE.DirectionalLight(0xffff00);
  directional.position.set(-1, 0.5, 0);
  scene.add(directional);
  renderer = new THREE.SVGRenderer();
  renderer.setClearColor(0xf0f0f0);
  renderer.setSize(window.innerWidth, window.innerHeight - 5);
  document.body.appendChild(renderer.domElement);

  window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  var time = Date.now() * 0.0002;
  camera.position.x = Math.sin(time) * 200;
  camera.position.z = Math.cos(time) * 200;
  camera.lookAt(scene.position);
  renderer.render(scene, camera);
}

CSS

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
* {
  margin: 0
}

依赖文件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/renderers/SVGRenderer.js"></script>
<script src="http://threejs.org/examples/js/renderers/Projector.js"></script>
<script src="http://threejs.org/examples/js/loaders/SVGLoader.js"></script>
<script>
  /**
   * @name LegacySVGLoader
   * @author mrdoob / http://mrdoob.com/
   * @author zz85 / http://joshuakoo.com/
   * @see https://github.com/mrdoob/three.js/issues/14387
   */

  THREE.LegacySVGLoader = function(manager) {

    this.manager = (manager !== undefined) ? manager : THREE.DefaultLoadingManager;

  };

  THREE.LegacySVGLoader.prototype = {

    constructor: THREE.LegacySVGLoader,

    load: function(url, onLoad, onProgress, onError) {

      var scope = this;

      var parser = new DOMParser();

      var loader = new THREE.FileLoader(scope.manager);
      loader.load(url, function(svgString) {

        var doc = parser.parseFromString(svgString, 'image/svg+xml'); // application/xml

        onLoad(doc.documentElement);

      }, onProgress, onError);

    }

  };
</script>
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-11-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 传输过程数值模拟学习笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
three.js简单实现一个3D三角函数学习理解
1.Three.js简介 Three.js是一个基于JavaScript编写的开源3D图形库,利用WebGL技术在网页上渲染3D图形。它提供了许多高级功能,如几何体、纹理、光照、阴影等,以便开发者能够快速地创建复杂且逼真的3D场景。同时,Three.js还具有很好的跨平台和跨浏览器兼容性,让用户无需安装任何插件就可以在现代浏览器上观看3D内容。
曾高飞
2025/05/19
1100
虚拟现实前传-Three.js实现管壳式换热器3D模型在线查看
使用threejs实现3D模型加载和显示。3D编程就像拍大片,几个关键东西如下所列:
周星星9527
2019/09/24
2.1K0
虚拟现实前传-Three.js实现管壳式换热器3D模型在线查看
vtk.js、three.js在浏览器展示3d图形
对于unstructured grid非格式化网格图形vtk数据,是没有办法在浏览器上展示的。用paraview对vtk进行extract surface后再另存为vtk可以转成polydata类型的vtk,可以在three.js上显示,但不能在vtk.js里显示。
hotqin888
2022/03/10
2.8K0
ThreeJS实现船行效果
解决方法: 官方提供了射线捕获的接口 raycaster.intersectObjects, 但是只能识别自建的Mesh模型, 对于导入的模型则无法捕获, 主要是因为导入的模型最外层包了一层, 没有把自己内部的Mesh暴露出来 所以我们需要在模型导入后, 在onProgress回调中对其进行递归获取子Mesh, 将所有Mesh存在一个全局数组中. 在鼠标事件触发时, 将全局数组提供给raycaster.intersectObjects, 即可识别 1. 递归函数
治电小白菜
2020/08/25
5K0
ThreeJS实现船行效果
three.js 新手指南
在这个分步指南中,我们将使用一个基于 WebGL 的 3D 图形的框架 three.js, 创建一个 3D 版本的 Treehouse 徽标。你可以通过点击或者拖拽鼠标使相机旋转!你也可以使用鼠标滚轮进行缩放。
疯狂的技术宅
2019/03/27
8.2K0
three.js 新手指南
加载obj模型和mtl材质文件 Three.js
原文: https://threejs.org/examples/?q=obj#webgl_loader_obj_mtl 代码: <!DOCTYPE html> <html lang="en"> <
周星星9527
2021/11/15
7.3K0
加载obj模型和mtl材质文件 Three.js
学习Three.js
window resize 需要设置camera的aspect 属性,设置renderer的尺寸
小刀c
2024/04/03
2390
前端新技术探索:WebAssembly、Web Components与WebVR/AR
近期,WebAssembly、Web Components与WebVR/AR这三项技术尤为引人注目,它们不仅拓宽了前端开发的可能性,也正在塑造着Web应用的未来形态。下面,我将以博主的视角,结合实例,浅谈这三大前沿技术及其应用前景。
Jimaks
2024/04/12
2430
前端新技术探索:WebAssembly、Web Components与WebVR/AR
第1章 开启Threejs之旅(二)
为了方便实验,我们提供了2个简单的框架供你使用。你只要改变其中的一些代码或者参数,就能够得到实验的结果。第一个框架的效果是显示一个绿色的正方体,
webvrmodel模型网
2022/05/14
1.4K0
第1章 开启Threejs之旅(二)
Threejs进阶之十三:CSS3DRenderer与Tween.js实现粒子小球按规律变化
今天我们使用CSS3DRenderer+Tween.js实现Threejs官方示例中的粒子小球按规律变化的效果,先看下最终实现的效果
九仞山
2023/05/09
1.2K1
Threejs进阶之十三:CSS3DRenderer与Tween.js实现粒子小球按规律变化
Threejs进阶之十一:使用FontLoader和TextGeometry创建三维文字
在Threejs中我们可以通过FontLoader和TextGeometry结合使用来创建三维文字,FontLoader用于加载JSON格式的字体,FontLoader返回值是表示字体的Shape类型的数组;TextGeometry用于将文本生成为单一的几何体。下面我们先来了解下这两个类
九仞山
2023/05/03
3.9K0
Threejs进阶之十一:使用FontLoader和TextGeometry创建三维文字
使用Three.Js制作3D相册
ThreeJS是一个用JavaScript写的开源3D图形库,它有个简单但是功能强大的3D渲染引擎,可以在网页浏览器里快速创建和展示3D图形。ThreeJS是一个功能强大、使用简单的3D图形库,提供了一个强大的3D渲染工具,大大降低了创建3D应用程序的难度。
查拉图斯特拉说
2024/04/26
5680
使用Three.Js制作3D相册
three.js鼠标控制物体旋转
当我们需要固定场景背景,固定摄像机的时候。移动旋转物体可以使用Three.js提供的OrbitControls.js,也可以手动写控制器。
tianyawhl
2019/06/11
16.1K0
Threejs入门之二十三:Threejs中的物理引擎OimoPhysics
Threejs中的OimoPhysics插件为我们提供了一个三维的物理世界,它可以帮助我们实现物理效果(如重力、弹力、加速度、摩擦力、碰撞等),并将物理世界中运动的每一帧的位置信息都映射到我们通过Threejs创建的三维世界中,从而在三维世界中实现现实中的物理效果。下面通过一个小球下落的例子来了解下OimoPhysics插件
九仞山
2023/04/30
2.8K0
Threejs入门之二十三:Threejs中的物理引擎OimoPhysics
Three.JS的第一个三弟(3D)案例
Three.js 是基于 WebGL 技术,用于浏览器中开发 3D 交互场景的 JS 引擎。
不惑
2024/04/23
4350
Three.JS的第一个三弟(3D)案例
【企业数字化转型】数据可视化技术:Three.js 用Physijs在场景中添加物理效果
透视相机模拟的效果与人眼看到的景象最接近,在3D场景中也使用得最普遍,这种相机最大的特点就是近大远小,同样大小的物体离相机近的在画面上显得大,离相机远的物体在画面上显得小。 PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
一个会写诗的程序员
2020/01/15
4.7K0
【企业数字化转型】数据可视化技术:Three.js 用Physijs在场景中添加物理效果
【愚公系列】2023年08月 Three.js专题-相机控件
相机控件是一种可以在移动设备上使用的软件工具,它可以让开发者轻松地在应用程序中添加相机功能。相机控件可以提供诸如拍照、录像、闪光灯控制、对焦等功能,并允许开发人员对其进行自定义配置和调整。使用相机控件,开发者可以快速构建相机应用程序或将相机功能集成到现有应用程序中,从而为用户提供更好的拍照和录像体验。
愚公搬代码
2025/05/28
940
【愚公系列】2023年08月 Three.js专题-相机控件
【愚公系列】2022年09月 微信小程序-three.js绘制球体
Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。
愚公搬代码
2022/09/28
1.1K0
【愚公系列】2022年09月 微信小程序-three.js绘制球体
【愚公系列】2023年08月 Three.js专题-相机
相机是一种用来记录图像或视频的设备。现代相机通常由镜头、图像传感器、取景器、快门和图像处理器等部件组成。相机可以拍摄各种类型的照片,包括家庭照片、肖像照片、风景照片、动物照片和艺术照片等。现在,许多相机还具有额外的功能,例如视频录制、自动对焦和无线连接等。随着技术的发展,相机变得更加便携和高质量,已成为记录和分享生活的重要工具。
愚公搬代码
2025/05/28
870
【愚公系列】2023年08月 Three.js专题-相机
three.js中场景模糊、纹理失真的问题
在three.js场景中,有时会遇到场景模糊,纹理失真的现象,似乎three.js并没有用到纹理图片应有的分辨率。可以通过相关设置来解决这个问题。
charlee44
2020/06/16
7.4K0
相关推荐
three.js简单实现一个3D三角函数学习理解
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验