将SVG包含在three.js模块中以避免单独的HTTP请求

Question

我在一个小网站上工作，里面有一个非常简单的三维动画。模型是从使用SVGLoader加载的SVG文件中挤出的。我想优化加载速度，并将SVG作为文本包含在我的threejs代码中，这样它就不需要进行单独的http请求，但已经加载了它，因此可以立即执行。

你会怎么做？如果是STL会更容易吗？

我只想基本上去掉那个单独的http请求，并在代码中包含模型。

到目前为止，我使用加载器的方法的代码：https://github.com/riccardolardi/studioriccardolardi/blob/master/src/components/BG.svelte#L45

谢谢！

Answer 1

.parse():的使用

body {
overflow: hidden;
margin: 0;
}

<script type="module">
import * as THREE from "https://threejs.org/build/three.module.js";
import {OrbitControls} from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
import { SVGLoader } from 'https://threejs.org/examples/jsm/loaders/SVGLoader.js';
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 10000);
camera.position.set(0, 10, 10);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
let controls = new OrbitControls(camera, renderer.domElement);
scene.add(new THREE.GridHelper());
let svg = `<svg height="250" width="500">
<polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>`;
let dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.setScalar(10);
scene.add(dirLight);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));
let svgLoader = new SVGLoader();
let data = svgLoader.parse(svg);
data.paths.forEach(dp => {
let shapes = dp.toShapes(true);
shapes.forEach(sh => {
let g = new THREE.ExtrudeBufferGeometry(sh, {bevelEnabled: false, depth: 2});
g.center();
let m = new THREE.MeshLambertMaterial({color: 0xFACE8D});
let o = new THREE.Mesh(g, m);
o.scale.setScalar(0.05);
console.log(o);
scene.add(o);
});

});
renderer.setAnimationLoop(()=>{
renderer.render(scene, camera);
});
</script>

Answer 2

通过将SVG内容作为字符串直接传递给SVGLoader.parse()，我成功地转换了SVG以生成形状定义。解析方法在Three.js中的每个Loader上都不同，因此没有以通用的方式进行记录。感谢discourse.threejs.org的Mugen87，他向我指出了这一点。