0

我正在使用 Three.js 使用 WebGL 渲染器和 OrthographicCamera 绘制一些四面体。THREE.OrthographicCamera(-ww, ww, hh, -hh, -100000, 100000);它们是这样生成的：

var ret = new THREE.Mesh();
var retGeom = new THREE.Geometry();
var side = Math.sqrt(3);
var th = (Math.sqrt(6)/3)*side;
var rad = side*(Math.sqrt(3)/3);
var inrad = side*(Math.sqrt(3)/6);
var ang = Math.PI*2/3;

retGeom.vertices.push(new THREE.Vector3(0,0,th));
retGeom.vertices.push(new THREE.Vector3(Math.cos(0)*rad,Math.sin(0)*rad,0));
retGeom.vertices.push(new THREE.Vector3(Math.cos(ang)*rad,Math.sin(ang)*rad,0));
retGeom.vertices.push(new THREE.Vector3(Math.cos(-ang)*rad,Math.sin(-ang)*rad,0));

retGeom.faces.push(new THREE.Face3(1, 2, 0, null, new THREE.Color(0xff00ff), 0));
retGeom.faces.push(new THREE.Face3(3, 0, 2, null, new THREE.Color(0x0000ff), 0));
retGeom.faces.push(new THREE.Face3(3, 1, 0, null, new THREE.Color(0xffff00), 0));
retGeom.faces.push(new THREE.Face3(3, 2, 1, null, new THREE.Color(0x00ff00), 0));

我在顶点上使用 multiplyScalar(...) 来设置大小。使用的材料是THREE.MeshBasicMaterial({vertexColors: THREE.FaceColors})。我试过的最基本的 onResize 是这样的：

ww = window.innerWidth;
hh = window.innerHeight;

renderer.setSize(ww, hh);
camera.aspect = ww/hh;
camera.left = -ww;
camera.right = ww;
camera.top = hh;
camera.bottom = -hh;
camera.updateProjectionMatrix();
renderer.render(scene, camera);

无论如何，当四面体的中心点由于使用内置轨迹球控件调整大小或平移而离开窗口的一侧时，我遇到的问题就会发生。尽管这会使它的一部分仍然在屏幕和窗口中，但此时整个事物都会停止渲染。

我尝试了不同的相机并看到了类似的行为。我还认为它可以用 setViewport(...) 或 setScissor(...) 修复，我玩了一点但没有成功。

有没有人知道要让对象渲染到完全不在屏幕上？我在这方面相当缺乏经验，并且觉得这里可能有一个我缺少的简单解决方案。

4

0 回答 0