Question

我无法知道如何设置相机。我试过的是使用一个例子，只是将OBJLoader url更改为我的文件

<!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不是由我创建的，其设置（高度，宽度等）可能会有所不同。

Answer 1

你说“对象'从左上角飞过'的事实告诉我你的.OBJ没有居中，就像从3D编辑器导出它时，它没有居中。<登记/> 它需要在3D创作程序中居中并再次导出。

如何正确设置相机

1 个答案: