我有一个ThreeJS场景（在下面或here on CodePen中），其中包含一些对象-一个是猫的Mesh对象，一个是立方体，现在，我尝试渲染我制作的a 2D SVG illustration。我想将SVG插图放置在猫图像和立方体之间的场景中，以与猫图像显示方式相同的方式显示（垂直和2D）。
[花了我几天的时间弄清楚如何渲染自己的SVG，我发现ThreeJs.org上有关SVGRenderer和SVGLoader的文档和示例非常繁琐，很难将其应用于我自己的图像（我是新手）。我最近呈现SVG的方法是使用this SO线程中的代码，该代码使用LegacySVG Loader。问题是，我对如何将此代码呈现到画布上而不是DOM上完全迷失了，看来LegacySVG加载程序是对错误的一种解决方案，该缺陷使查找资源变得异常困难。
因此，本质上，我已经使用上述资源在an individual CodePen中渲染了SVG，现在我迷失了如何将其渲染到与立方体和猫图像相同的场景上。是否可以使用LegacySVG渲染到画布上？或者，是否有更简单的方法将SVG与其他对象放置在同一画布上？
let renderer;
let camera;
//let controls;
let scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(54, window.innerWidth / window.innerHeight, 0.1, 1000);
renderer = new THREE.WebGLRenderer({
antialias: true,
canvas: document.getElementById("viewport")
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(new THREE.Color(0xfefefe));
// document.body.appendChild(renderer.domElement);
camera.position.x = 1;
camera.position.y = 1;
camera.position.z = 15;
let light = new THREE.AmbientLight(0xFFFFFF);
scene.add(light);
let gridHelper = new THREE.GridHelper(10, 10);
scene.add(gridHelper);
// example code
const geometry1 = new THREE.BoxGeometry(1, 1, 1);
const material1 = new THREE.MeshStandardMaterial({
color: 0xff0000
});
const topBox = new THREE.Mesh(geometry1, material1);
scene.add(topBox);
var loader = new THREE.TextureLoader();
// Load an image file into a custom material
var material = new THREE.MeshLambertMaterial({
map: loader.load('https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80')
});
// create a plane geometry for the image with a width of 10
// and a height that preserves the image's aspect ratio
var geometry = new THREE.PlaneGeometry(2, 1.5);
// combine our image geometry and material into a mesh
var mesh = new THREE.Mesh(geometry, material);
// set the position of the image mesh in the x,y,z dimensions
mesh.position.set(0,0,5);
// add the image to the scene
scene.add(mesh);
let animate = function() {
requestAnimationFrame(animate);
//controls.update();
renderer.render(scene, camera);
};
//////////////////
animate();
function updateCamera(ev) {
camera.position.z = 15 - window.scrollY / 250.0;
}
window.addEventListener("scroll", updateCamera);body {
overflow-x: hidden;
overflow-y: scroll;
padding: 0;
margin: 0;
}
canvas {
position: fixed;
height: 100vh;
}
#threeD {
position: fixed;
margin: 0;
padding: 0;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.page-wrapper {
padding: 0px;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 4000vh;
}
#container {
height: 500vh;
position: fixed;
}<html>
<script src="https://raw.githubusercontent.com/mrdoob/three.js/master/src/loaders/LoadingManager.js"></script>
<script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r68/examples/js/loaders/SVGLoader.js"></script>
<script src="https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/renderers/SVGRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="index1.css" />
<body>
<canvas id="viewport"></canvas>
<div class="page-wrapper" >
<h1> scroll! </h1>
</div>
</body>
<script src="index1.js"></script>
</html>您需要记住一些事情。
SVGRenderer与WebGLRenderer呈现的内容不同。
a。 SVGRenderer在<svg>元素内获取项目，并将转换应用于其内部<path>，<circle>，<rect>等元素。您可以看到svg_sandbox example。所有SVG元素都是2D的，但是旋转时会给人以3D的印象。
b。 WebGLRenderer绘制到<canvas>元素上，并且可以呈现各种真实的3D几何形状。如果要在WebGL中绘制SVG，则需要首先将SVG文件转换为WebGL可以使用THREE.SVGLoader理解的几何。您可以在THREE.SVGLoader中查看其操作方式（通过单击右下角的webgl_loader_svg example按钮可以获取源代码）。
您不能在与<>中的WebGL元素相同的3D空间中共存<svg>元素。如果要将带有猫图像的多维数据集和平面添加到同一空间，建议您使用WebGLRenderer方法。
我在您的代码片段中注意到您正在使用来自许多不同来源的文件以及各种Three.js修订版。有些文件是<canvas>，有些文件是r102.1，有些是最新文件，即r68。在尝试使较旧的文件与较新的文件一起使用时，应遵循一个修订版本，以避免冲突。例如：