如何正确设置相机

debugcn 发表于 Dev

米哈尔

我无法知道如何设置相机。我尝试过的是使用示例，只是将OBJLoader网址更改为我的文件

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - OBJLoader + MTLLoader</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;
                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, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
        </style>
    </head>

    <body>
        <div id="info">
        <a href="http://threejs.org" target="_blank">three.js</a> - OBJLoader + MTLLoader
        </div>

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

        <script src="js/loaders/DDSLoader.js"></script>
        <script src="js/loaders/MTLLoader.js"></script>
        <script src="js/loaders/OBJLoader.js"></script>

        <script src="js/Detector.js"></script>
        <script src="js/libs/stats.min.js"></script>
        <script src="js/controls/OrbitControls.js"></script>

        <script>

            var container, stats;
            var camera, scene, renderer;
            var mouseX = 0, mouseY = 0;
            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;

            init();
            render();

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

                camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
                camera.position.z = -25;

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

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

                var directionalLight = new THREE.DirectionalLight( 0xffeedd );
                //directionalLight.position.set( 0, 0, 1 ).normalize();
                scene.add( directionalLight );

                THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );

                var mtlLoader = new THREE.MTLLoader();
                mtlLoader.load( '140018_2.mtl', function( materials ) {
                    materials.preload();

                    var objLoader = new THREE.OBJLoader();
                    objLoader.setMaterials( materials );
                    objLoader.load( '140018_2.obj', function ( object ) {

                        object.position.set(0, 0, 0);
                        console.log("loaded");

                        scene.add( object );
                    });
                });

                //

                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );

                controls = new THREE.OrbitControls( camera, renderer.domElement );
                controls.addEventListener( 'change', render ); // add this only if there is no animation loop (requestAnimationFrame)
                controls.enableZoom = true;
            }

            function animate() {
                requestAnimationFrame( animate );
                render();
            }

            function render() {
                renderer.render( scene, camera );
            }
        </script>
    </body>
</html>

它有点奏效。当我加载页面时，我什么也看不到。但是，当我缩小时，对象从屏幕的左上角“飞入”。我真正需要的只是使对象位于屏幕中央。

你们如何实现这一目标？OBJ不是由我创建的，其设置（高度，宽度等）可能会有所不同。

2相

您说“对象从左上角'飞入'”这一事实向我表明，您的.OBJ并未居中，例如，从3D编辑器导出该对象时，它并未居中。
它需要以3D创作程序为中心，然后再次导出。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。