最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - three.js: Cannot display obj file using THREE.OBJLoader - Stack Overflow

programmeradmin5浏览0评论

I am having problems loading an obj file using the example code. I have no issue when loading the example file male02.obj however when I insert my file the object isn't displayed. I have had the same problem when using using the Python converter script and the JSONLoader.

Here is all of the code for the OBJLoader

<!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>
        <div id="info">
        <a href=".js" target="_blank">three.js</a> - OBJLoader test
        </div>

        <script src="javascripts/Three.js"></script>
        <script src="javascripts/OBJLoader.js"></script>

        <script src="javascripts/Detector.js"></script>
        <script src="javascripts/Stats.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 );

                scene = new THREE.Scene();

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

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

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

                var loader = new THREE.OBJLoader();
        //loader.load( "img/male02.obj", function ( object ) {
        loader.load( "img/originalMeanModel.obj", function ( object ) {
                    object.position.y = - 80;
                    scene.add( object );
                } );

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

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

            }

            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>

    </body>
</html>

I am using the latest version of three.js (49).

Here is a link to the obj file I am trying to load .obj

I noticed when I was trying the JSONLoader that the exported JSON file doesn't have any normals, colors or uvs. This doesn't affect when viewing the file in Blender or MeshLab but will is have an effect with three.js?

If anyone can help me out it would be greatly appreciated.

Thanks in advance.

I am having problems loading an obj file using the example code. I have no issue when loading the example file male02.obj however when I insert my file the object isn't displayed. I have had the same problem when using using the Python converter script and the JSONLoader.

Here is all of the code for the OBJLoader

<!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>
        <div id="info">
        <a href="http://github./mrdoob/three.js" target="_blank">three.js</a> - OBJLoader test
        </div>

        <script src="javascripts/Three.js"></script>
        <script src="javascripts/OBJLoader.js"></script>

        <script src="javascripts/Detector.js"></script>
        <script src="javascripts/Stats.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 );

                scene = new THREE.Scene();

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

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

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

                var loader = new THREE.OBJLoader();
        //loader.load( "img/male02.obj", function ( object ) {
        loader.load( "img/originalMeanModel.obj", function ( object ) {
                    object.position.y = - 80;
                    scene.add( object );
                } );

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

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

            }

            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>

    </body>
</html>

I am using the latest version of three.js (49).

Here is a link to the obj file I am trying to load https://dl.dropbox./u/23384412/originalMeanModel.obj

I noticed when I was trying the JSONLoader that the exported JSON file doesn't have any normals, colors or uvs. This doesn't affect when viewing the file in Blender or MeshLab but will is have an effect with three.js?

If anyone can help me out it would be greatly appreciated.

Thanks in advance.

Share Improve this question asked Jun 19, 2012 at 10:14 TrueWheelTrueWheel 9872 gold badges20 silver badges35 bronze badges 1
  • are you trying to run this locally without a webserver? read this: github./mrdoob/three.js/wiki/How-to-run-things-locally – frank Commented Jun 19, 2012 at 13:18
Add a ment  | 

2 Answers 2

Reset to default 6

Both object and camera positions must be set according the position and dimensions of your model.

"Comment" all these lines:

camera.position.z = 100;
...
object.position.y = - 80;
...
document.addEventListener( 'mousemove', onDocumentMouseMove, false );

And start playing with the code, changing the camera position:

camera.position.z = 2;

I have a simple solution to this. 1. import the male02.obj that es with three.js installer package into blender, or daz3d, or whatever 3d program you use (I've only tried this with Daz3d however). 2. import whatever .obj you want to replace for your html. Rescale that obj so that it is around the same height as the male02.obj. 3. Delete the maleo2.obj from the scene and keep the new one you want. Export this file as a obj. 4. Add it to your code.

This should work, I tried adding objs to that source for a couple of days and I've been successful with this method.

发布评论

评论列表(0)

  1. 暂无评论