Problem using Three.js, is it due to the way I am using Javascript?

Newsgroups	comp.lang.javascript
Date	2016-05-04 05:24 -0700
Message-ID	<4fa3c0ca-ad94-49f1-9e39-2344af29dca9@googlegroups.com> (permalink)
Subject	Problem using Three.js, is it due to the way I am using Javascript?
From	someone <glenn.spigel@googlemail.com>

Show all headers | View raw

Using Three.js I have come across the unexpected problem of the code not working when I created the meshes outside of the load() function. I've supplied an example below using a single model with a single mesh. The following works fine:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>working</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: #000000;
                margin: 0px;
                overflow: hidden;
            }

        </style>
    </head>

    <body>

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

        <script src="js/loaders/ColladaLoader.js"></script>

        <script src="js/Detector.js"></script>

        <script>

            if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

            var container;

            var camera, scene, renderer, objects;

            var scaleAdj = 100;
            init();
            animate();

            function init() 
            {

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

                camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 20000 );
                camera.position.set( 0, 500, 0 );

                scene = new THREE.Scene();
                scene.fog = new THREE.Fog( 0xcce0ff, 10, 10000 );

                var loader = new THREE.JSONLoader();

                loader.load( 'cube.json', function ( geometry, materials ) 
                {

                    var faceMaterial = new THREE.MultiMaterial( materials );

                    for ( var i = 0; i < 250; i ++ ) 
                    {

                        var x = ( ( i % 27 )  - 13.5 ) * (5 * scaleAdj) + THREE.Math.randFloatSpread( 300 * scaleAdj);
                        var z = ( Math.floor( i / 27 ) - 13.5 ) * (5 * scaleAdj) + THREE.Math.randFloatSpread( 300 * scaleAdj);

                        mesh = new THREE.Mesh( geometry, faceMaterial );

                        var s = THREE.Math.randFloat( 0.5, 2 ) * scaleAdj;
                        mesh.scale.set( s, s, s );

                        mesh.position.set( x, scaleAdj, z );
                        mesh.rotation.y = THREE.Math.randFloat( -0.25, 0.25 );

                        mesh.matrixAutoUpdate = false;
                        mesh.updateMatrix();

                        scene.add( mesh );

                    }

                } );

                scene.add( new THREE.AmbientLight( 0xffffff ) );

                // ground
                var textureLoader = new THREE.TextureLoader();
                var groundTexture = textureLoader.load( "texture.jpg" );
                groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
                groundTexture.repeat.set( 40, 40 );
                groundTexture.anisotropy = 16;

                var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, map: groundTexture } );

                var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 20000 ), groundMaterial );
                mesh.position.y = 0;
                mesh.rotation.x = - Math.PI / 2;
                mesh.receiveShadow = true;
                scene.add( mesh );

                // Renderer

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

                renderer.setClearColor( scene.fog.color );

                container.appendChild( renderer.domElement );

                // Events

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

            }


            function onWindowResize( event ) {

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

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

            }

            function animate() {

                requestAnimationFrame( animate );

                render();

            }

            function render() {

                renderer.render( scene, camera );

            }



        </script>
    </body>
</html>

But the following doesn't (I've annotated sections where there are differences):


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>not working</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: #000000;
                margin: 0px;
                overflow: hidden;
            }

        </style>
    </head>

    <body>

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

        <script src="js/loaders/ColladaLoader.js"></script>

        <script src="js/Detector.js"></script>

        <script>

            if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

            //--------------- difference number 1
            var obj_geometry;
            var obj_material;
            //-----------------------------------

            var container;

            var camera, scene, renderer, objects;

            var scaleAdj = 100;
            init();
            animate();

            function init() 
            {

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

                camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 20000 );
                camera.position.set( 0, 500, 0 );

                scene = new THREE.Scene();
                scene.fog = new THREE.Fog( 0xcce0ff, 10, 10000 );


                //-------------------difference number 2--------------------
                var loader = new THREE.JSONLoader();

                loader.load( 'cube.json', function ( geometry, material ) 
                {
                    obj_geometry = geometry;
                    obj_material = material;
                });

                var faceMaterial = new THREE.MultiMaterial( obj_material);

                for ( var i = 0; i < 250; i ++ ) 
                {

                        var x = ( ( i % 27 )  - 13.5 ) * (5 * scaleAdj) + THREE.Math.randFloatSpread( 300 * scaleAdj);
                        var z = ( Math.floor( i / 27 ) - 13.5 ) * (5 * scaleAdj) + THREE.Math.randFloatSpread( 300 * scaleAdj);

                        mesh = new THREE.Mesh( obj_geometry, faceMaterial);

                        var s = THREE.Math.randFloat( 0.5, 2 ) * scaleAdj;
                        mesh.scale.set( s, s, s );

                        mesh.position.set( x, 0, z );
                        mesh.rotation.y = THREE.Math.randFloat( -0.25, 0.25 );

                        mesh.matrixAutoUpdate = false;
                        mesh.updateMatrix();

                        scene.add( mesh );

                }

                //--------------------------------------

                scene.add( new THREE.AmbientLight( 0xffffff ) );

                // ground
                var textureLoader = new THREE.TextureLoader();
                var groundTexture = textureLoader.load(  "texture.jpg" );
                groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
                groundTexture.repeat.set( 40, 40 );
                groundTexture.anisotropy = 16;

                var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, map: groundTexture } );

                var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 20000 ), groundMaterial );
                mesh.position.y = 0;
                mesh.rotation.x = - Math.PI / 2;
                mesh.receiveShadow = true;
                scene.add( mesh );

                // Renderer

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

                renderer.setClearColor( scene.fog.color );

                container.appendChild( renderer.domElement );

                // Events

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

            }


            function onWindowResize( event ) {

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

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

            }

            function animate() {

                requestAnimationFrame( animate );

                render();

            }

            function render() {

                renderer.render( scene, camera );

            }



        </script>
    </body>
</html>

For those interested, here are the contents of the cube.json file:

{
    "uvs":[[0,0,1,0,1,1,0,1]],
    "faces":[43,0,1,2,3,0,0,1,2,3,0,1,2,3,43,4,7,6,5,0,0,1,2,3,4,5,6,7,43,0,4,5,1,0,0,1,2,3,0,4,7,1,43,1,5,6,2,0,0,1,2,3,1,7,6,2,43,2,6,7,3,0,0,1,2,3,2,6,5,3,43,4,0,3,7,0,0,1,2,3,4,0,3,5],
    "normals":[0.577349,-0.577349,-0.577349,0.577349,-0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,-0.577349,0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,0.577349,0.577349,0.577349,0.577349,0.577349],
    "metadata":{
        "generator":"io_three",
        "type":"Geometry",
        "normals":8,
        "vertices":8,
        "uvs":1,
        "version":3,
        "materials":1,
        "faces":6
    },
    "vertices":[1,-1,-1,1,-1,1,-1,-1,1,-1,-1,-1,1,1,-1,0.999999,1,1,-1,1,1,-1,1,-1],
    "materials":[{
        "DbgName":"Material",
        "colorSpecular":[0.5,0.5,0.5],
        "DbgIndex":0,
        "mapDiffuseWrap":["RepeatWrapping","RepeatWrapping"],
        "mapDiffuse":"texture.jpg",
        "shading":"phong",
        "depthTest":true,
        "opacity":1,
        "transparent":false,
        "colorDiffuse":[0.64,0.64,0.64],
        "mapDiffuseAnisotropy":1,
        "blending":"NormalBlending",
        "depthWrite":true,
        "visible":true,
        "specularCoef":50,
        "mapDiffuseRepeat":[1,1],
        "colorEmissive":[0,0,0],
        "wireframe":false,
        "DbgColor":15658734
    }],
    "name":"CubeGeometry"
}

Does it seem to those on the forum, that the problem is me misunderstanding how to use javascript, or does the javascript seem fine, but it is a problem using Three.js?

Back to comp.lang.javascript | Previous | Next — Next in thread | Find similar | Unroll thread

Thread

Problem using Three.js, is it due to the way I am using Javascript? someone <glenn.spigel@googlemail.com> - 2016-05-04 05:24 -0700
  Re: Problem using Three.js, is it due to the way I am using Javascript? someone <glenn.spigel@googlemail.com> - 2016-05-04 12:11 -0700
  Re: Problem using Three.js, is it due to the way I am using Javascript? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2016-05-07 11:23 -0700

csiph-web