时间戳

首页 > 解决方案 > 为什么我的相机离渲染模型这么远？

three.js - 为什么我的相机离渲染模型这么远？

问题描述

我正在尝试在从 Blender 渲染的 Three.js 中创建我的第一个 glTF 模型，但我无法让相机显示接近渲染的模型。

无论我对 Blender 相机做什么，都无法解决问题，所以它一定是用 Three.js 编写的代码。请帮忙！谢谢

<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webglTF - loader</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no,         
    minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            font-family: Monospace;
            background-color: #000;
            color: #fff;
            margin: 0px;
            overflow: hidden;
        }
        #info {
            color: #fff;
            position: absolute;
            top: 10px;
            width: 100%;
            text-align: center;
            z-index: 100;
            display:block;
        }
        #info a {
            color: #046;
            font-weight: bold;
        }
    </style>
</head>

<body>

    <script src="../build/three.js"></script>

    <script src="js/libs/inflate.min.js"></script>

    <script src="js/loaders/GLTFLoader.js"></script>
    <script src="js/controls/OrbitControls.js"></script>

    <script src="js/WebGL.js"></script>
    <script src="js/libs/stats.min.js"></script>

    <script>

        if ( WEBGL.isWebGLAvailable() === false ) {

            document.body.appendChild( WEBGL.getWebGLErrorMessage() );

        }

        var container, stats, controls;
        var camera, scene, renderer, light;

        var clock = new THREE.Clock();

        var mixers = [];

        init();
        animate();

        function init() {

            container = document.createElement( 'div' );
            document.body.appendChild( container );

            camera = new THREE.PerspectiveCamera( 45, window.innerWidth / 
            window.innerHeight, 1, 2000 );
            camera.position.set( -400, 0, 200 );

            controls = new THREE.OrbitControls( camera );
            controls.target.set( 0, 0, 0 );
            controls.update();

            scene = new THREE.Scene();
            scene.background = new THREE.Color( 0xa0a0a0 );
            scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );

            light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
            light.position.set( 0, 200, 0 );
            scene.add( light );

            light = new THREE.DirectionalLight( 0xffffff );
            light.position.set( 0, 200, 100 );
            light.castShadow = true;
            light.shadow.camera.top = 180;
            light.shadow.camera.bottom = -100;
            light.shadow.camera.left = -120;
            light.shadow.camera.right = 120;
            scene.add( light );

            // scene.add( new THREE.CameraHelper( light.shadow.camera ) 
            );

            // ground
            var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 
            2000, 2000 ), new THREE.MeshPhongMaterial( { material: 
            0x999999, depthWrite: false } ) );
            mesh.rotation.x = - Math.PI / 2;
            mesh.receiveShadow = true;
            scene.add( mesh );

            var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 
            );
            grid.material.opacity = 0.2;
            grid.material.transparent = true;
            scene.add( grid );

            // model
            var loader = new THREE.GLTFLoader();

            loader.load( '../The-Raisin/TREE_GLTF.gltf', function ( gltf) 
{

            scene.add( gltf.scene );

            }, undefined, function ( error ) {

            console.error( error );

        } );

            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.shadowMap.enabled = true;
            container.appendChild( renderer.domElement );

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

            // stats
            stats = new Stats();
            container.appendChild( stats.dom );

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );

        }

        //

        function animate() {

            requestAnimationFrame( animate );

            if ( mixers.length > 0 ) {

                for ( var i = 0; i < mixers.length; i ++ ) {

                    mixers[ i ].update( clock.getDelta() );

                }

            }

            renderer.render( scene, camera );

            stats.update();

        }

    </script>

</body>
</html>

摄像机显示在场景之外。

标签： three.jsblender

解决方案

无论我对 Blender 相机做什么，都无法解决问题

如果您在应用程序中定义自己的相机对象，则更改 Blender 中的相机属性无效。你有两个选择：

  • gltf.cameras在您的回调中访问，onLoad()它代表glTF资产中定义的一组摄像机。如果从 Blender 导出相机，您应该可以在那里找到它。
  • 使用类似于 3D 查看器的方法改进应用程序中定义的相机参数。您通常首先将对象居中，然后从对象的 AABB 导出最佳相机参数。尝试使用此three.js基于glTF查看器的以下代码：

https://github.com/donmccurdy/three-gltf-viewer/blob/18f43073bbfdbd3c220e2059e548e74c507522d2/src/viewer.js#L218-L246

three.js R104

推荐阅读