Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]
Groups > comp.lang.javascript > #30390 > unrolled thread
| Started by | someone <glenn.spigel@googlemail.com> |
|---|---|
| First post | 2016-05-04 05:24 -0700 |
| Last post | 2016-05-07 11:23 -0700 |
| Articles | 3 — 2 participants |
Back to article view | Back to comp.lang.javascript
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
| From | someone <glenn.spigel@googlemail.com> |
|---|---|
| Date | 2016-05-04 05:24 -0700 |
| Subject | Problem using Three.js, is it due to the way I am using Javascript? |
| Message-ID | <4fa3c0ca-ad94-49f1-9e39-2344af29dca9@googlegroups.com> |
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?
[toc] | [next] | [standalone]
| From | someone <glenn.spigel@googlemail.com> |
|---|---|
| Date | 2016-05-04 12:11 -0700 |
| Message-ID | <9083247c-3323-4598-bb93-d1c261e7ea38@googlegroups.com> |
| In reply to | #30390 |
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.
[toc] | [prev] | [next] | [standalone]
| From | "Michael Haufe (TNO)" <tno@thenewobjective.com> |
|---|---|
| Date | 2016-05-07 11:23 -0700 |
| Message-ID | <6eab23f9-02cf-48d2-846d-e6f7a3d9006d@googlegroups.com> |
| In reply to | #30390 |
On Wednesday, May 4, 2016 at 7:24:25 AM UTC-5, 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?
Do you have a url somewhere you can point us too?
I for one don't want to have to go through the effort of recreating your environment before taking a look at any potential problems..
[toc] | [prev] | [standalone]
Back to top | Article view | comp.lang.javascript
csiph-web