Question

我确定这是一个非常愚蠢的问题，但我无法找到解决问题的方法。我猜这个图像是不言自明的。我基本上想要在页面中间完全显示头像。我试过改变透视摄像机的参数，但它还没有奏效。如果我将头像向下移动，它就会显示出来。

建议？

更新：Three.js代码

function init() {

                container = document.createElement( 'div' );
                document.body.appendChild( container );
                camera = new THREE.PerspectiveCamera( 24, window.innerWidth / window.innerWidth, 1, 2000 );

                camera.position.set( 2, 20, 150 );

                controls = new THREE.OrbitControls( camera );
                controls.enabled = true;
                controls.enablePan = true;

                scene = new THREE.Scene();

                // LIGHTS

                ambientLight = new THREE.AmbientLight( 0x444444 );
                scene.add( ambientLight );

                pointLight = new THREE.PointLight( 0xffffff, 1.25, 1000 );
                pointLight.position.set( 0, 0, 600 );

                scene.add( pointLight );

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

                var materialAvatar = new THREE.MeshPhongMaterial( {
                    color: 0xdddddd,
                    specular: 0x222222,
                    shininess: 35,
                    map: THREE.ImageUtils.loadTexture( "JSON/Avatar2.0_MapaCorCaucasian.jpg" ),
                    specularMap: THREE.ImageUtils.loadTexture( "JSON/Avatar2.0_MapaSpecular1024.jpg" ),
                    normalMap: THREE.ImageUtils.loadTexture( "JSON/Avatar2.0_MapaNormal1024.jpg" ),
                    normalScale: new THREE.Vector2( 1, 1 ),
                    morphTargets: true
                } );

                loader = new THREE.JSONLoader( );
                loader.load( "JSON/Avatar2.0N.json", function( geometryA ) {

                    geometryAvatar = new THREE.Mesh( geometryA, materialAvatar );
                    geometryAvatar.name = "male";
                    geometryAvatar.scale.set(200,200,200);

                    scene.add(geometryAvatar);

                });

                loader.onLoadComplete = function () {

                    console.log("loadercomplete");

                }

                renderer = new THREE.WebGLRenderer( { antialias: false } );
                renderer.setClearColor( 0xffffff );
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );

                renderer.gammaInput = true;
                renderer.gammaOutput = true;

                // COMPOSER

                renderer.autoClear = false;

                var renderModel = new THREE.RenderPass( scene, camera );

                var effectBleach = new THREE.ShaderPass( THREE.BleachBypassShader );
                var effectColor = new THREE.ShaderPass( THREE.ColorCorrectionShader );
                effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );

                effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );

                console.log(1 / window.innerWidth, 1 / window.innerHeight);

                effectBleach.uniforms[ 'opacity' ].value = 0.4;

                effectColor.uniforms[ 'powRGB' ].value.set( 1.4, 1.45, 1.45 );
                effectColor.uniforms[ 'mulRGB' ].value.set( 1.1, 1.1, 1.1 );

                effectFXAA.renderToScreen = true;

                composer = new THREE.EffectComposer( renderer );

                composer.addPass( renderModel );

                composer.addPass( effectBleach );
                composer.addPass( effectColor );
                composer.addPass( effectFXAA );

                // EVENTS

                document.addEventListener( 'mousemove', onDocumentMouseMove, false );
                window.addEventListener( 'resize', onWindowResize, false );

            }

            function onWindowResize( event ) {

                SCREEN_WIDTH = window.innerWidth;
                SCREEN_HEIGHT = window.innerHeight;

                renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );

                camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
                camera.updateProjectionMatrix();

                composer.reset();

                effectFXAA.uniforms[ 'resolution' ].value.set( 1 / SCREEN_WIDTH, 1 / SCREEN_HEIGHT );

            }

            function onDocumentMouseMove(event) {

                mouseX = ( event.clientX - windowHalfX ) * 10;
                mouseY = ( event.clientY - windowHalfY ) * 10;

            }

            function animate() {

                requestAnimationFrame( animate );

                render();
                if ( statsEnabled ) stats.update();

            }

            function render() {

                var ry = mouseX * 0.0003, rx = mouseY * 0.0003;

                composer.render();

            }

执行缩放时，Three.js拉伸模型

0 个答案: