1

这是我第一次尝试将 obj 导入到 three.js 中并使用它。我正在尝试使用三个主版本中包含的对象加载器。

问题似乎在于目标文件的加载方式，因为它在某种循环中未定义某些内容时出错。麻烦的是，我不知道什么是不应该的未定义。为了创建我的 obj 文件，我使用了https://developer.cdn.mozilla.net/media/uploads/demos/w/i/wizgrav/f232e401f674086f9aae99b474e27ed0/running-image-triang_1372626220_demo_package/index.html

我究竟做错了什么？这是我第一次使用 Three，所以我尝试尽可能少地进行更改（仅更改文件在我的目录结构中的位置）。

由于这可能是对象，它位于： http: //geevideoproduction.com/geeTop3D.obj

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

    <body>
        <script src="./jscript/three.min.js"></script>
        <script src="./jscript/js/loaders/OBJLoader.js"></script>

        <script src="./jscript/js/Detector.js"></script>
        <script src="./jscript/js/libs/stats.min.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();
            animate();


            function init() {

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

                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
                camera.position.z = 100;

                // scene

                scene = new THREE.Scene();

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

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

                // texture

                var manager = new THREE.LoadingManager();
                manager.onProgress = function ( item, loaded, total ) {

                    console.log( item, loaded, total );

                };

                var texture = new THREE.Texture();

                var loader = new THREE.ImageLoader( manager );
                loader.load( '/PlayFiles/geeVideoProduction/images/GeeTop.png', function ( image ) {

                    texture.image = image;
                    texture.needsUpdate = true;

                } );

                // model

                var loader = new THREE.OBJLoader( manager );
                loader.load( '/PlayFiles/geeVideoProduction/images/geeTop3D.obj', function ( object ) {

                    object.traverse( function ( child ) {

                        if ( child instanceof THREE.Mesh ) {

                            child.material.map = texture;

                        }

                    } );

                    object.position.y = - 80;
                    scene.add( object );

                } );

                //

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

                document.addEventListener( 'mousemove', onDocumentMouseMove, false );

                //

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

            }

            function onWindowResize() {

                windowHalfX = window.innerWidth / 2;
                windowHalfY = window.innerHeight / 2;

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

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

            }

            function onDocumentMouseMove( event ) {

                mouseX = ( event.clientX - windowHalfX ) / 2;
                mouseY = ( event.clientY - windowHalfY ) / 2;

            }

            //

            function animate() {

                requestAnimationFrame( animate );
                render();

            }

            function render() {

                camera.position.x += ( mouseX - camera.position.x ) * .05;
                camera.position.y += ( - mouseY - camera.position.y ) * .05;

                camera.lookAt( scene.position );

                renderer.render( scene, camera );

            }

        </script><div><canvas width="1244" height="500"></canvas></div>



</body></html>
4

0 回答 0