Three.js：如何将相同大小的对象放到屏幕顶部

Question

我是threejs的新手，但我不知道这个问题绝对是基础知识还是太高级了。因此，我想将一些对象放置在屏幕的左上角。下一个对象总是转到下一个正确的位置。我需要每个对象看起来都一样大小。如何计算他们的3d位置和比例（如果需要）

我找到了一个解决方案，可能对我有好处：Three.js：在场景的一角显示世界坐标轴，但是我认为第二个画布的开销太大-它覆盖了原始画布。

我认为创建一个球体，该球体的位置是摄影机位置，半径大于屏幕摄影机的距离，并使用射线投射器找到相交点，即该点。这是个好方法吗？

我的对象是箭头（多边形和挤压），它们为我的用户显示选定的方向。因此，此帮助器是一个信息框，但我不想覆盖原始场景。例如，屏幕顶部的10-12箭头。它必须具有相同的大小才能成为美丽。

Answer 1

如果要创建平视显示器（HUD），一种方法是覆盖由正交摄影机渲染的精灵的第二个场景。

使用的编码模式如下：

camera = new THREE.PerspectiveCamera( ... );
cameraOrtho = new THREE.OrthographicCamera( ... );

scene = new THREE.Scene();
sceneOrtho = new THREE.Scene(); // overlay scene

renderer = new THREE.WebGLRenderer();
renderer.autoClear = false; // to allow overlay

并且，在渲染循环中：

renderer.clear();
renderer.render( scene, camera );
renderer.clearDepth();
renderer.render( sceneOrtho, cameraOrtho );

参见http://threejs.org/examples/webgl_sprites.html。

three.js r.83