前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >How to load SVG file into SVGRenderer in three.js

How to load SVG file into SVGRenderer in three.js

作者头像
周星星9527
发布2021-11-15 13:04:45
5.6K0
发布2021-11-15 13:04:45
举报
文章被收录于专栏:javascript趣味编程

原文:

代码语言:javascript
复制
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
复制
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
复制
* {
  margin: 0
}

依赖文件:

代码语言:javascript
复制
<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 删除。

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档