【发布时间】：2020-05-28 22:15:14
【问题描述】：
我有一个 ThreeJS 场景（下面，或 here on CodePen），其中包含一些对象 - 一个是猫的 Mesh 对象，一个是立方体，现在，我正在尝试渲染 a 2D SVG illustration 我制作.我想将 SVG 插图放在猫图像和立方体之间的场景中，以与猫图像相同的方式显示（直立和 2D）。
我花了好几天的时间才弄清楚如何渲染我自己的 SVG，我发现 ThreeJs.org 上关于 SVGRenderer 和 SVGLoader 的文档和示例非常繁琐，很难选择适用于我自己的图像（我是新手） .我最接近渲染 SVG 的方法是使用来自 this SO 线程的代码，该线程使用 LegacySVG 加载器。问题是，我完全不知道如何将这段代码渲染到画布上而不是 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/three@0.102.1/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>【问题讨论】：
-
很难理解请发布最少的代码，以便更好地理解
-
不幸的是，webGL 没有什么是微不足道的
标签： javascript svg canvas three.js webgl