4

THREE.OBJLoader を使用してオブジェクト ファイルを (動的に) ロードし、それらをシーン (またはキャンバス) の中央に配置して、オブジェクト全体がカメラに表示されるようにしようとしています。オブジェクトは動的なので、固定の高さや幅のデータはありません。

私が持っているもの： ここに画像の説明を入力

私が欲しいもの： ここに画像の説明を入力

この点に到達するために私が言及したこと：

  1. オブジェクトの幅に合わせて Three.js ズーム (高さを無視)

  2. カメラをオブジェクトに合わせる方法

  3. three.js でのモデル インポート後のスマート センタリングとスケーリング

  4. Three.js の形が見えるようにカメラを調整する

  5. オブジェクトが画面の高さに収まるのに必要なカメラのズームを計算する

  6. 3D シーンに合わせてカメラを移動

  7. Three.js は、画面を埋めるために必要なオブジェクトの距離を計算します

  8. 3D 空間で元の縮尺の 100% で画像を表示するためにカメラの Z 距離を計算する方法

コード：

camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);

controls = new THREE.TrackballControls(camera);
controls.rotateSpeed = 5.0;
controls.zoomSpeed = 5;
controls.panSpeed = 2;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;

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

var mtlLoader = new THREE.MTLLoader();
mtlLoader.setBaseUrl(path);
mtlLoader.setPath(path);
mtlLoader.setMaterialOptions({
    ignoreZeroRGBs: true
});

mtlLoader.load(path, function(materials) {
    materials.preload();
    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials(materials);
    objLoader.setPath(path);
    objLoader.load(path, function(object) {

        var helperBox = new THREE.BoundingBoxHelper(object, 0x888888);
        helperBox.update();
        scene.add(helperBox);

        //Scene
        scene.add(object);

        var boxFrmScene = new THREE.Box3().setFromObject(scene);
        var height = Math.max(boxFrmScene.size().y, boxFrmScene.size().x);
        var dist = height / (2 * Math.tan(camera.fov * Math.PI / 360));
        var pos = scene.position;
        var boundingSphere = boxFrmScene.getBoundingSphere();
        var center = boundingSphere.center;
        camera.position.set(center.x, center.y, (dist * 1.1));
        camera.lookAt(pos);
    }, function(error) {
        console.log(error);
    });
}, function(error) {
    console.log(error);
});

私が使用したデッドプール オブジェクトは、 http ://tf3dm.com/3d-model/deadpool-42722.html からのものです。正しい質問を読んでいるかどうかわかりません。誰かが私を正しい方向に向けることができれば、とてもうれしいです。前もって感謝します。

PS: 私は 3D 数学が苦手です。

編集:私はこれで与えられた解決策を試しました:カメラをオブジェクトに合わせる方法ですが、私の問題は解決していません。実際、オブジェクトを上下逆さまにしています。オブジェクトをカメラの中心に配置しようとしています。

編集 2: これを部分的に修正しました。これで、オブジェクトがカメラ錐台内にあり、完全に表示されます。今、私はそれを中心に置く方法を見つける必要があります. 以下のコード全体を変更しましたscene.add(object);

var pos = scene.position;
camera.position.set(pos.x, pos.y, 100);
camera.lookAt(pos);
var boxFrmScene = new THREE.Box3().setFromObject(scene);
var height = Math.max(boxFrmScene.size().y, boxFrmScene.size().x);
var fov = camera.fov * (Math.PI / 180);
var distance = Math.abs(height / Math.sin(fov / 2));
camera.position.set(pos.x, pos.y, distance + (height / 2));
camera.updateProjectionMatrix();
4

1 に答える 1