three.js 3d 空间中的 .svg 资产

Question

我正在尝试将.svg 资产加载到我的three.js 场景中，作为平面矢量图层；我在另一篇文章中找到了这个带有SVGLoader 和SVGRenderer 的示例，但我无法让它工作。

加载的 svg 卡在 2d 空间中并且没有响应相机的移动，我无法访问它的位置。 我尝试切换到WebGLRenderer，但没有加载 svg。

将其加载为精灵的选项会很好，但我希望精灵不要面对相机并保持在 3d 空间中。

var svgManager = new THREE.SVGLoader();
var url = 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Europe_laea_location_map.svg';

function svg_loading_done_callback(doc) {
  init();
  svg(new THREE.SVGObject(doc));
  ico();
  animate();
};

svgManager.load(url,
  svg_loading_done_callback,
  function() {
    console.log("Loading SVG...");
  },
  function() {
    console.log("Error loading SVG!");
  });


var AMOUNT = 100;
var container, camera, scene, renderer;

function init() {
  scene = new THREE.Scene();
  renderer = new THREE.SVGRenderer();
  renderer.setClearColor(0x00ff00);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  var container = document.getElementById('container');
  container.appendChild(renderer.domElement);

  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 1100;
  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.enableZoom = true;
  window.addEventListener('resize', onWindowResize, false);
}

function svg(svgObject) {
  svgObject.position.x = 510;
  svgObject.position.y = -110;
  svgObject.position.z = 0;
  scene.add(svgObject);
}

function ico() {
  geometry = new THREE.IcosahedronGeometry(100, 1)
  material = new THREE.MeshNormalMaterial({});
  ico = new THREE.Mesh(geometry, material);
  ico.position.y = -300;
  scene.add(ico);
  ico2 = new THREE.Mesh(geometry, material);
  ico2.position.y = 500;
  ico2.position.x = -500;
  ico2.position.z = -50;
  scene.add(ico2);
}

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

function animate() {
  requestAnimationFrame(animate);
  controls.update;
  render();
}

function render() {
  renderer.render(scene, camera);
}

body {
  margin: 0;
}

canvas {
  width: 100%;
  height: 100%
}

<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

<div id="container"></div>

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/renderers/SVGRenderer.js"></script>
<script src="https://threejs.org/examples/js/renderers/Projector.js"></script>
<script src="https://threejs.org/examples/js/loaders/SVGLoader.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Answer 1

SVGLoader 和 SVGRenderer 是两个不同的东西。第一个加载一个 SVG 文件并将其转换为 three.js 形状（尽管有一些限制，即可以读取非常简单的 SVG，不渲染笔触而只渲染填充对象等），而后者使用 SVG 元素渲染三个.js 原语而不是 WebGL。从某种意义上说，它们是相互对立的。

因此，首先，您需要为您的案例使用WebGLRenderer。

然后，您需要更改 SVG 加载回调。它接收一组路径，您可以使用这些路径来渲染 SVG。

查看svg_loading_done_callback、init和svg函数的变化，并在JSFiddle中运行：

var svgManager = new THREE.SVGLoader();
var url = 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Europe_laea_location_map.svg';

function svg_loading_done_callback(paths) {
  init();
  svg(paths);
  ico();
  animate();
};

svgManager.load(url,
  svg_loading_done_callback,
  function() {
    console.log("Loading SVG...");
  },
  function() {
    console.log("Error loading SVG!");
  });


var AMOUNT = 100;
var container, camera, scene, renderer;

function init() {
  scene = new THREE.Scene();
  renderer = new THREE.WebGLRenderer();
  renderer.setClearColor(0x00ff00);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  var container = document.getElementById('container');
  container.appendChild(renderer.domElement);

  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 1100;
  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.enableZoom = true;
  window.addEventListener('resize', onWindowResize, false);
}

function svg(paths) {

  var group = new THREE.Group();
  group.position.x = 510;
  group.position.y = -110;
  group.position.z = 0;

  for ( var i = 0; i < paths.length; i ++ ) {

    var path = paths[ i ];

    var material = new THREE.MeshBasicMaterial( {
      color: path.color,
      side: THREE.DoubleSide,
      depthWrite: false
    } );

    var shapes = path.toShapes( true );

    for ( var j = 0; j < shapes.length; j ++ ) {

      var shape = shapes[ j ];

      var geometry = new THREE.ShapeBufferGeometry( shape );
      var mesh = new THREE.Mesh( geometry, material );

      group.add( mesh );

    }

  }

  scene.add( group );
}

function ico() {
  geometry = new THREE.IcosahedronGeometry(100, 1)
  material = new THREE.MeshNormalMaterial({});
  ico = new THREE.Mesh(geometry, material);
  ico.position.y = -300;
  scene.add(ico);
  ico2 = new THREE.Mesh(geometry, material);
  ico2.position.y = 500;
  ico2.position.x = -500;
  ico2.position.z = -50;
  scene.add(ico2);
}

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

function animate() {
  requestAnimationFrame(animate);
  controls.update;
  render();
}

function render() {
  renderer.render(scene, camera);
}

PS：检查SVG Loader 看看它能解析什么