Question

我正在使用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（...）修复，我玩了一点但没有成功。

有人知道热，要让对象渲染，直到它们完全脱离屏幕？我在这方面相当缺乏经验，觉得这里可能有一个我想念的简单解决方案。

three.js突然视口剪辑

0 个答案: