Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]
Groups > comp.lang.javascript > #30391
| Newsgroups | comp.lang.javascript |
|---|---|
| Date | 2016-05-04 12:11 -0700 |
| References | <4fa3c0ca-ad94-49f1-9e39-2344af29dca9@googlegroups.com> |
| Message-ID | <9083247c-3323-4598-bb93-d1c261e7ea38@googlegroups.com> (permalink) |
| Subject | Re: Problem using Three.js, is it due to the way I am using Javascript? |
| From | someone <glenn.spigel@googlemail.com> |
On Wednesday, May 4, 2016 at 1:24:25 PM UTC+1, someone wrote:
> 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?
Sorry that should be multiple instances of a single model with a single texture.
Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll 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