Question

我正在尝试从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>

相机显示在场景之外。

Answer 1

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

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

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

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

glTF

为什么我的相机与渲染模型相差甚远？

1 个答案: