Question

只是想知道如何围绕通过stl加载器加载的模型对照相机。

我已经玩变量很多年了，我已经尝试手动将网格位置设置为（0,0,0），并且相机也设置为（0,0,0），相机不是以设计为中心！

以下是相关代码：

function init() {

            camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
            camera.position.set( 0,60 , 100 );

            controls = new THREE.OrbitControls( camera );
            controls.addEventListener( 'change', render );

            scene = new THREE.Scene();
            scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );


            var callbackProgress = function( progress, result ) {

                var bar = 250,
                    total = progress.totalModels + progress.totalTextures,
                    loaded = progress.loadedModels + progress.loadedTextures;

                if ( total )
                    bar = Math.floor( bar * loaded / total );

                $( \"bar\" ).style.width = bar + \"px\";

                count = 0;
                for ( var m in result.materials ) count++;

                handle_update( result, Math.floor( count/total ) );

            }
            var callbackFinished = function ( result ) {

                loaded = result;

                document.getElementById(\"message\").style.display = \"none\";

                handle_update( result, 1 );

            }

             document.getElementById(\"progress\").style.display = \"block\";
            // world
            var loader = new THREE.STLLoader();
            loader.addEventListener( 'load', function ( event ) {

                var geometry = event.content;
                var material = new THREE.MeshPhongMaterial( { ambient: 0xff5533, color: 0xff5533, specular: 0x111111, shininess: 200 } );
                var mesh = new THREE.Mesh( geometry, material );

                mesh.position.set( 0, 0, 0 );
                mesh.rotation.set( 0, 0, 0 );
                mesh.scale.set( 2,2,2 );

                mesh.castShadow = true;
                mesh.receiveShadow = true;
                camera.position.set( geometry.x,geometry.y , 100 );
                scene.add( mesh );

            } );
            loader.callbackProgress = callbackProgress;
            loader.load('somefile.stl',callbackFinished); 

            // lights

            light = new THREE.DirectionalLight( 0xffffff );
            light.position.set( 1, 1, 1 );
            scene.add( light );

            light = new THREE.DirectionalLight( 0xffffff );
            light.position.set( -1, -1, -1 );
            scene.add( light );

            light = new THREE.AmbientLight( 0x222222 );
            scene.add( light );


            // renderer

            renderer = new THREE.WebGLRenderer( { antialias: false } );
            renderer.setClearColor( scene.fog.color, 1 );
            renderer.setSize( window.innerWidth, window.innerHeight );

            container = document.getElementById( 'container' );
            container.appendChild( renderer.domElement );
            /*
            stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '0px';
            stats.domElement.style.zIndex = 100;
            container.appendChild( stats.domElement );*/

            //

            window.addEventListener( 'resize', onWindowResize, false );

        }

Answer 1

我认为你把相机的位置与它的目标混淆了。

要让相机对焦于模特，请尝试camera.lookAt(mesh.position);，并确保相机不在模特内部，例如camera.position.set(0, 60, 100);，原始相机位置或geometry.x, geometry.y, 100，从侧面直接沿Z轴查看模型。

三个js - 将相机设置为Loaded对象

1 个答案: