0
私はキューブをレンダリングする簡単なthree.jsアプリケーションを開発しました。私は、3つのファイル：index.html,viewer_style.cssおよびviewer.jsを作成しました。three.js正射影カメラ：視点を持つ立方体のすべてを拡大
index.htmlの内容は以下の通りです：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<link rel='stylesheet' type='text/css' href='viewer_style.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/renderers/Projector.js"></script>
</head>
<body>
<script src="viewer.js"></script>
</body>
</html>
そしてviewer.jsの内容は次のとおりです。
// SCENE
var scene = new THREE.Scene();
// CAMERA
var frustumHeight;
var aspect = window.innerWidth/window.innerHeight;
var camera = new THREE.OrthographicCamera(- frustumHeight * aspect/2, frustumHeight * aspect/2, frustumHeight/2, - frustumHeight/2, 1, 2000);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 100;
// CUBE
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshPhongMaterial({color: 0xbaf5e8, flatShading: true});
var cube = new THREE.Mesh(geometry, material);
cube.receiveShadow = true;
scene.add(cube);
// BOUNDING BOX
var helper_bbox = new THREE.BoxHelper(cube);
helper_bbox.update();
scene.add(helper_bbox);
// AXES
var helper_axes = new THREE.AxisHelper();
scene.add(helper_axes);
// FIT ALL:
var bbox_radius = helper_bbox.geometry.boundingSphere.radius;
if(aspect < 1){
frustumHeight = 2 * bbox_radius;
}
else{
frustumHeight = 2 * bbox_radius/aspect;
}
camera.left = - frustumHeight * aspect/2;
camera.right = frustumHeight * aspect/2;
camera.top = frustumHeight/2;
camera.bottom = - frustumHeight/2;
camera.updateProjectionMatrix();
// RENDERER
var renderer = new THREE.WebGLRenderer({alpha: true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;
// LIGHTS
var ambientLight = new THREE.AmbientLight(0x101010, 1.0);
scene.add(ambientLight);
directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
directionalLight.position.set(1.0, 1.0, 1.0).normalize();
scene.add(directionalLight);
directionalLight_2 = new THREE.DirectionalLight(0xffffff, 1.0);
directionalLight_2.position.set(-1.0, -1.0, 1.0).normalize();
scene.add(directionalLight_2);
// CONTROLS
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera);
window.addEventListener('resize', onWindowResize, false);
function animate(){
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
function onWindowResize(){
var aspect = window.innerWidth/window.innerHeight;
camera.left = - frustumHeight * aspect/2;
camera.right = frustumHeight * aspect/2;
camera.top = frustumHeight/2;
camera.bottom = - frustumHeight/2;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
camera.lookAt(scene.position);
}
animate();
私が使用して一定のマージンをシーンにキューブを合わせていき立方体の境界球の半径。
しかし、私は次のようにviewer.jsでカメラの位置を変更：それは、次の画像で見ることができるように、正しく動作しているようです。このような状況では
camera.position.x = 100;
camera.position.y = 100;
camera.position.z = 100;
、Iこのような何かを得る：この場合
を、キューブはに装着されていません画面。これは、間違った参照系の境界球の半径を測定しているためです。しかし、私はこの問題の解決策を見つけることができませんでした。
誰かが私が間違っていることを知っていますか？適切なアプローチを使用していますか？前もって感謝します。
コードは正常です。アスペクト<1>をアスペクト> 1に変更します。分かりやすくするため、 'frustumSize'を' frustumHeight'に変更してください。 – WestLangley
ありがとうございます。私は 'frustumSize'を' frustumHeight'に変更して質問を編集しました。私は 'aspect <1'を' aspect> 1'に変更しようとしましたが、希望の結果も得られません。実際、キューブは画面内で大きくなりました。私はあなたがこの変更を提案した理由をよく理解していないので、この最後の変更を質問に追加していません。 – GLR