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(...) で修正できるかもしれないと考えましたが、少し遊んで成功しませんでした。
オブジェクトが完全に画面から消えるまでオブジェクトをレンダリングする方法を知っている人はいますか? 私はこの分野でかなりの経験がなく、見逃している簡単な解決策があるかもしれないと感じています。