提交 77eed2ea 编写于 作者: M Mr.doob

Removed most of SeceneUtils methods for simplicity reasons.

Fixed examples that were using them.
上级 78fb8ac6
......@@ -97,7 +97,10 @@
var material = [ new THREE.MeshFaceMaterial(), new THREE.MeshLambertMaterial( { color: 0xffffff, opacity:0.9, shading:THREE.FlatShading, wireframe: true, wireframeLinewidth: 2 } ) ];
mesh = THREE.SceneUtils.addMesh( scene, geometry, 250, 400, 0, 0, 0, 0, 0, material );
mesh = new THREE.Mesh( geometry, material );
mesh.position.x = 400;
mesh.scale.x = mesh.scale.y = mesh.scale.z = 250;
scene.addObject( mesh );
}
......@@ -107,7 +110,10 @@
var material = new THREE.MeshFaceMaterial();
mesh2 = THREE.SceneUtils.addMesh( scene, geometry, 250, -400, 0, 0, 0, 0, 0, material );
mesh2 = new THREE.Mesh( geometry, material );
mesh2.position.x = - 400;
mesh2.scale.x = mesh2.scale.y = mesh2.scale.z = 250;
scene.addObject( mesh2 );
}
......
......@@ -196,7 +196,23 @@
pointLight.position.z = 10000;
scene.addLight( pointLight );
THREE.SceneUtils.addPanoramaCubeWebGL( sceneCube, 100000, textureCube );
// Skybox
var shader = THREE.ShaderUtils.lib["cube"];
shader.uniforms["tCube"].texture = textureCube;
var material = new THREE.MeshShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms
} ),
mesh = new THREE.Mesh( new THREE.CubeGeometry( 100000, 100000, 100000, 1, 1, 1, null, true ), material );
sceneCube.addObject( mesh );
//
webglRenderer = new THREE.WebGLRenderer();
webglRenderer.setSize( window.innerWidth, window.innerHeight );
......@@ -546,13 +562,20 @@
mi = CARS[ car ].init_material,
bm = CARS[ car ].body_materials;
for( var i in CARS[ car ].mmap ) {
for ( var i in CARS[ car ].mmap ) {
geometry.materials[ i ][ 0 ] = CARS[ car ].mmap[ i ];
}
CARS[ car ].object = THREE.SceneUtils.addMesh( scene, geometry, s, 0, 0, 0, r[0], r[1], r[2], m );
var mesh = new THREE.Mesh( geometry, m );
mesh.rotation.x = r[ 0 ];
mesh.rotation.y = r[ 1 ];
mesh.rotation.z = r[ 2 ];
mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
scene.addObject( mesh );
CARS[ car ].object = mesh;
CARS[ car ].buttons = createButtons( materials.body, car );
attachButtonMaterials( materials.body, geometry, bm, car );
......
......@@ -192,7 +192,23 @@
pointLight.position.z = 10000;
scene.addLight( pointLight );
THREE.SceneUtils.addPanoramaCubeWebGL( scene, 100000, textureCube );
// Skybox
var shader = THREE.ShaderUtils.lib["cube"];
shader.uniforms["tCube"].texture = textureCube;
var material = new THREE.MeshShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms
} ),
mesh = new THREE.Mesh( new THREE.CubeGeometry( 100000, 100000, 100000, 1, 1, 1, null, true ), material );
scene.addObject( mesh );
//
webglRenderer = new THREE.AnaglyphWebGLRenderer();
webglRenderer.setSize( window.innerWidth, window.innerHeight );
......@@ -547,7 +563,14 @@
}
CARS[ car ].object = THREE.SceneUtils.addMesh( scene, geometry, s, 0, 0, 0, r[0], r[1], r[2], m );
var mesh = new THREE.Mesh( geometry, m );
mesh.rotation.x = r[ 0 ];
mesh.rotation.y = r[ 1 ];
mesh.rotation.z = r[ 2 ];
mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
scene.addObject( mesh );
CARS[ car ].object = mesh;
CARS[ car ].buttons = createButtons( materials.body, car );
attachButtonMaterials( materials.body, geometry, bm, car );
......
......@@ -187,7 +187,10 @@
geometry.materials[ 7 ][ 0 ] = materials.black; // tireling
geometry.materials[ 8 ][ 0 ] = materials.black; // behind grille
THREE.SceneUtils.addMesh( scene, geometry, s, 0, 0, 0, 0.0, 1.0, 0.0, m );
var mesh = new THREE.Mesh( geometry, m );
mesh.rotation.y = 1;
mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
scene.addObject( mesh );
createButtons( materials.body, geometry );
......
......@@ -192,7 +192,10 @@
geometry.materials[ 7 ][ 0 ] = materials.black; // tireling
geometry.materials[ 8 ][ 0 ] = materials.black; // behind grille
THREE.SceneUtils.addMesh( scene, geometry, s, 0, 0, 0, 0.0, 1.0, 0.0, m );
var mesh = new THREE.Mesh( geometry, m );
mesh.rotation.y = 1;
mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
scene.addObject( mesh );
createButtons( materials.body, geometry );
......
......@@ -112,12 +112,27 @@
var cubeMaterial2 = new THREE.MeshLambertMaterial( { color: 0xffee00, envMap: refractionCube, refractionRatio: 0.95 } );
var cubeMaterial1 = new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: reflectionCube } )
THREE.SceneUtils.addPanoramaCubeWebGL( sceneCube, 10, reflectionCube );
// Skybox
var shader = THREE.ShaderUtils.lib["cube"];
shader.uniforms["tCube"].texture = reflectionCube;
var material = new THREE.MeshShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms
} ),
mesh = new THREE.Mesh( new THREE.CubeGeometry( 10, 10, 10, 1, 1, 1, null, true ), material );
sceneCube.addObject( mesh );
//
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.autoClear = false;
//renderer.setFaceCulling( 0 );
container.appendChild( renderer.domElement );
stats = new Stats();
......@@ -137,9 +152,22 @@
var s = 15;
THREE.SceneUtils.addMesh( scene, geometry, s, 0, 0, -100, 0,0,0, m1 );
THREE.SceneUtils.addMesh( scene, geometry, s, -900, 0, -100, 0,0,0, m2 );
THREE.SceneUtils.addMesh( scene, geometry, s, 900, 0, -100, 0,0,0, m3 );
var mesh = new THREE.Mesh( geometry, m1 );
mesh.position.z = - 100;
mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
scene.addObject( mesh );
var mesh = new THREE.Mesh( geometry, m2 );
mesh.position.x = - 900;
mesh.position.z = - 100;
mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
scene.addObject( mesh );
var mesh = new THREE.Mesh( geometry, m3 );
mesh.position.x = 900;
mesh.position.z = - 100;
mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
scene.addObject( mesh );
loader.statusDomElement.style.display = "none";
......
......@@ -103,7 +103,23 @@
}
THREE.SceneUtils.addPanoramaCubeWebGL( sceneCube, 100000, textureCube );
// Skybox
var shader = THREE.ShaderUtils.lib["cube"];
shader.uniforms["tCube"].texture = textureCube;
var material = new THREE.MeshShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms
} ),
mesh = new THREE.Mesh( new THREE.CubeGeometry( 100000, 100000, 100000, 1, 1, 1, null, true ), material );
sceneCube.addObject( mesh );
//
webglRenderer = new THREE.WebGLRenderer();
webglRenderer.setSize( window.innerWidth, window.innerHeight );
......
......@@ -99,7 +99,23 @@
}
THREE.SceneUtils.addPanoramaCubeWebGL( scene, 100000, textureCube );
// Skybox
var shader = THREE.ShaderUtils.lib["cube"];
shader.uniforms["tCube"].texture = textureCube;
var material = new THREE.MeshShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms
} ),
mesh = new THREE.Mesh( new THREE.CubeGeometry( 100000, 100000, 100000, 1, 1, 1, null, true ), material );
scene.addObject( mesh );
//
webglRenderer = new THREE.AnaglyphWebGLRenderer();
webglRenderer.setSize( window.innerWidth, window.innerHeight );
......
......@@ -102,7 +102,23 @@
}
THREE.SceneUtils.addPanoramaCubeWebGL( sceneCube, 100000, textureCube );
// Skybox
var shader = THREE.ShaderUtils.lib["cube"];
shader.uniforms["tCube"].texture = textureCube;
var material = new THREE.MeshShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms
} ),
mesh = new THREE.Mesh( new THREE.CubeGeometry( 100000, 100000, 100000, 1, 1, 1, null, true ), material );
sceneCube.addObject( mesh );
//
webglRenderer = new THREE.WebGLRenderer();
webglRenderer.setSize( window.innerWidth, window.innerHeight );
......
......@@ -101,7 +101,23 @@
}
THREE.SceneUtils.addPanoramaCubeWebGL( scene, 100000, textureCube );
// Skybox
var shader = THREE.ShaderUtils.lib["cube"];
shader.uniforms["tCube"].texture = textureCube;
var material = new THREE.MeshShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms
} ),
mesh = new THREE.Mesh( new THREE.CubeGeometry( 100000, 100000, 100000, 1, 1, 1, null, true ), material );
scene.addObject( mesh );
//
webglRenderer = new THREE.CrosseyedWebGLRenderer( { separation: 90 } );
webglRenderer.setSize( window.innerWidth, window.innerHeight );
......
......@@ -87,7 +87,23 @@
mesh.scale.x = mesh.scale.y = mesh.scale.z = 16;
scene.addObject( mesh );
THREE.SceneUtils.addPanoramaCubeWebGL( scene, 6000, textureCube );
// Skybox
var shader = THREE.ShaderUtils.lib["cube"];
shader.uniforms["tCube"].texture = textureCube;
var material = new THREE.MeshShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms
} ),
mesh = new THREE.Mesh( new THREE.CubeGeometry( 6000, 6000, 6000, 1, 1, 1, null, true ), material );
scene.addObject( mesh );
//
webglRenderer = new THREE.WebGLRenderer();
webglRenderer.setSize( window.innerWidth, window.innerHeight );
......
......@@ -88,6 +88,7 @@
scene.addLight( pointLight );
// light representation
sphere = new THREE.SphereGeometry( 100, 16, 8 );
lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color:0xffaa00 } ) );
lightMesh.position = pointLight.position;
......@@ -108,7 +109,23 @@
var cubeMaterial2 = new THREE.MeshBasicMaterial( { color: 0xccfffd, envMap: textureCube, refractionRatio: 0.985 } );
var cubeMaterial1 = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube, refractionRatio: 0.98 } )
THREE.SceneUtils.addPanoramaCubeWebGL( sceneCube, 100000, textureCube );
// Skybox
var shader = THREE.ShaderUtils.lib["cube"];
shader.uniforms["tCube"].texture = textureCube;
var material = new THREE.MeshShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms
} ),
mesh = new THREE.Mesh( new THREE.CubeGeometry( 100000, 100000, 100000, 1, 1, 1, null, true ), material );
sceneCube.addObject( mesh );
//
webglRenderer = new THREE.WebGLRenderer();
webglRenderer.setSize( window.innerWidth, window.innerHeight );
......@@ -132,11 +149,24 @@
function createScene( geometry, m1, m2, m3 ) {
var s = 1.5, z = -1000;
var s = 1.5, z = - 1000;
var mesh = new THREE.Mesh( geometry, m1 );
mesh.position.z = z;
mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
scene.addObject( mesh );
var mesh = new THREE.Mesh( geometry, m2 );
mesh.position.x = - 900;
mesh.position.z = z;
mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
scene.addObject( mesh );
THREE.SceneUtils.addMesh( scene, geometry, s, 0, 0, z, 0,0,0, m1 );
THREE.SceneUtils.addMesh( scene, geometry, s, -900, 0, z, 0,0,0, m2 );
THREE.SceneUtils.addMesh( scene, geometry, s, 900, 0, z, 0,0,0, m3 );
var mesh = new THREE.Mesh( geometry, m3 );
mesh.position.x = 900;
mesh.position.z = z;
mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
scene.addObject( mesh );
loader.statusDomElement.style.display = "none";
......
......@@ -190,8 +190,15 @@
geometry.computeTangents();
mesh1 = THREE.SceneUtils.addMesh( scene, geometry, scale, -scale * 12, 0, 0, 0,0,0, material1 );
mesh2 = THREE.SceneUtils.addMesh( scene, geometry, scale, scale * 12, 0, 0, 0,0,0, material2 );
mesh1 = new THREE.Mesh( geometry, material1 );
mesh1.position.x = - scale * 12;
mesh1.scale.x = mesh1.scale.y = mesh1.scale.z = scale;
scene.addObject( mesh1 );
mesh2 = new THREE.Mesh( geometry, material2 );
mesh2.position.x = scale * 12;
mesh2.scale.x = mesh2.scale.y = mesh2.scale.z = scale;
scene.addObject( mesh2 );
loader.statusDomElement.style.display = "none";
......
......@@ -169,7 +169,10 @@
geometry.computeTangents();
mesh1 = THREE.SceneUtils.addMesh( scene, geometry, scale, 0, - 50, 0, 0, 0, 0, material );
mesh1 = new THREE.Mesh( geometry, material );
mesh1.position.y = - 50;
mesh1.scale.x = mesh1.scale.y = mesh1.scale.z = scale;
scene.addObject( mesh1 );
loader.statusDomElement.style.display = "none";
......
......@@ -115,7 +115,23 @@
scene.matrixAutoUpdate = false;
THREE.SceneUtils.addPanoramaCubeWebGL( sceneCube, 100000, textureCube );
// Skybox
var shader = THREE.ShaderUtils.lib["cube"];
shader.uniforms["tCube"].texture = textureCube;
var material = new THREE.MeshShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms
} ),
mesh = new THREE.Mesh( new THREE.CubeGeometry( 100000, 100000, 100000, 1, 1, 1, null, true ), material );
sceneCube.addObject( mesh );
//
webglRenderer = new THREE.WebGLRenderer( { antialias: false } );
webglRenderer.setSize( window.innerWidth, window.innerHeight );
......
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js webgl - multiple-canvaes - complex</title>
<title>three.js webgl - multiple canvases - complex</title>
<meta charset="utf-8">
<style type="text/css">
body {
......@@ -57,7 +57,7 @@
<div id="container2"></div>
<div id="container3"></div>
</div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - vertex colors - webgl</div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> webgl - multiple canvases - complex</div>
<script type="text/javascript" src="../build/Three.js"></script>
......
......@@ -73,7 +73,7 @@
</div>
</div>
</div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - vertex colors - webgl</div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> webgl - multiple canvases - grid</div>
<script type="text/javascript" src="../build/Three.js"></script>
......
......@@ -16,7 +16,7 @@
a { color:skyblue }
canvas { pointer-events:none; z-index:10; }
#log { position:absolute; top:0; display:block; text-align:left; z-index:1000; pointer-events:none; }
#d { text-align:center; margin:1em 0 -15.7em 0; z-index:0; position:relative; display:block }
#d { text-align:center; margin:1em 0 -150px 0; z-index:0; position:relative; display:block }
.button { background:#000; color:#fff; padding:0.2em 0.5em; cursor:pointer }
.inactive { background:#999; color:#eee }
</style>
......@@ -109,9 +109,7 @@
geometry = new THREE.PlaneGeometry( 100, 100, 15, 10 );
mesh = new THREE.Mesh( geometry, xm );
mesh.position.x = 0;
mesh.position.y = FLOOR;
mesh.position.z = 0;
mesh.rotation.x = 1.57;
mesh.scale.x = mesh.scale.y = mesh.scale.z = 10;
mesh.doubleSided = true;
......@@ -123,7 +121,8 @@
var material_spheres = new THREE.MeshLambertMaterial( { color: 0xdddddd } ),
sphere = new THREE.SphereGeometry( 100, 16, 8 );
for ( var i=0; i<10; i++ ) {
for ( var i = 0; i < 10; i ++ ) {
mesh = new THREE.Mesh( sphere, material_spheres );
mesh.position.x = 500 * (Math.random() - 0.5);
mesh.position.y = 300 * (Math.random() - 0) + FLOOR;
......@@ -132,6 +131,7 @@
mesh.overdraw = true;
mesh.updateMatrix();
scene.addObject(mesh);
}
......
......@@ -4,73 +4,6 @@
THREE.SceneUtils = {
addMesh : function ( scene, geometry, scale, x, y, z, rx, ry, rz, material ) {
var mesh = new THREE.Mesh( geometry, material );
mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
mesh.position.x = x;
mesh.position.y = y;
mesh.position.z = z;
mesh.rotation.x = rx;
mesh.rotation.y = ry;
mesh.rotation.z = rz;
scene.addObject( mesh );
return mesh;
},
addPanoramaCubeWebGL : function ( scene, size, textureCube ) {
var shader = THREE.ShaderUtils.lib["cube"];
shader.uniforms["tCube"].texture = textureCube;
var material = new THREE.MeshShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms
} ),
mesh = new THREE.Mesh( new THREE.CubeGeometry( size, size, size, 1, 1, 1, null, true ), material );
scene.addObject( mesh );
return mesh;
},
addPanoramaCube : function( scene, size, images ) {
var materials = [], mesh;
materials.push( new THREE.MeshBasicMaterial( { map: new THREE.Texture( images[ 0 ] ) } ) );
materials.push( new THREE.MeshBasicMaterial( { map: new THREE.Texture( images[ 1 ] ) } ) );
materials.push( new THREE.MeshBasicMaterial( { map: new THREE.Texture( images[ 2 ] ) } ) );
materials.push( new THREE.MeshBasicMaterial( { map: new THREE.Texture( images[ 3 ] ) } ) );
materials.push( new THREE.MeshBasicMaterial( { map: new THREE.Texture( images[ 4 ] ) } ) );
materials.push( new THREE.MeshBasicMaterial( { map: new THREE.Texture( images[ 5 ] ) } ) );
mesh = new THREE.Mesh( new THREE.Cube( size, size, size, 1, 1, materials, true ), new THREE.MeshFaceMaterial() );
scene.addObject( mesh );
return mesh;
},
addPanoramaCubePlanes : function ( scene, size, images ) {
var hsize = size / 2, plane = new THREE.Plane( size, size ), pi = Math.PI, pi2 = Math.PI / 2;
THREE.SceneUtils.addMesh( scene, plane, 1, 0, 0, -hsize, 0, 0, 0, new THREE.MeshBasicMaterial( { map: new THREE.Texture( images[5] ) } ) );
THREE.SceneUtils.addMesh( scene, plane, 1, -hsize, 0, 0, 0, pi2, 0, new THREE.MeshBasicMaterial( { map: new THREE.Texture( images[0] ) } ) );
THREE.SceneUtils.addMesh( scene, plane, 1, hsize, 0, 0, 0, -pi2, 0, new THREE.MeshBasicMaterial( { map: new THREE.Texture( images[1] ) } ) );
THREE.SceneUtils.addMesh( scene, plane, 1, 0, hsize, 0, pi2, 0, pi, new THREE.MeshBasicMaterial( { map: new THREE.Texture( images[2] ) } ) );
THREE.SceneUtils.addMesh( scene, plane, 1, 0, -hsize, 0, -pi2, 0, pi, new THREE.MeshBasicMaterial( { map: new THREE.Texture( images[3] ) } ) );
},
showHierarchy : function ( root, visible ) {
THREE.SceneUtils.traverseHierarchy( root, function( node ) { node.visible = visible; } );
......
......@@ -32,9 +32,9 @@ THREE.WebGLRenderer = function ( parameters ) {
_oldFlipSided = null,
_oldBlending = null,
_oldDepth = null,
_oldPolygonOffset = null;
_oldPolygonOffsetFactor = null;
_oldPolygonOffsetUnits = null;
_oldPolygonOffset = null,
_oldPolygonOffsetFactor = null,
_oldPolygonOffsetUnits = null,
_cullEnabled = true,
_viewportX = 0,
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册