javascript - 如何向 HTML 5 Canvas 添加 2 个或更多 3D 对象？

Question

我是 Three.js 的新手，目前正在尝试开发一个基于 Web 的 3d 对象查看器/编辑器。 我提到了thingiview.js能够开发查看、旋转、放大缩小等功能。我在 Canvas 上添加了拖放功能。目前，只有“.STL”(小写)文件类型适用于此功能。

我的目的是添加另一个 .STL 文件以添加到 Canvas 上并显示。我想过是否可以

- 创建一个数组

- 将删除的项目(.STL)文件存储到数组

- 在 Canvas 上显示数组中的所有可用项目

我对 JavaScript 语言的了解不是很深入，并且在开发此功能时仍在学习改进。请告知我是否走在正确的轨道上，或者是否有任何可能的方法来实现这一目标。或者，如果有任何资源我可以阅读以获取更多信息。 预先感谢您。

Answer 1

你说你正在使用 Three.js。我认为三分之二你可以做这样的事情:

mesh = new THREE.Mesh(sphere, material);
scene.add( mesh );

这基本上只会创建一个球体并放入场景中，但您可以对加载器执行相同的操作。 scene.add(whatever) 在场景中显示。为了方便以后访问对象以进行位置更改和其他操作，您可以将它们插入数组中，如下所示:

var objectArray;

(inside loader)
scene.add( mesh );
objectArray.push(mesh);

然后您可以稍后循环数组以检查实例并进行定位等。 希望这对您有一点帮助。