提交 188b9b70 编写于 作者: M Mr.doob

Examples: Cleaned up setClearColor().

上级 ec602c18
......@@ -184,8 +184,8 @@
<code>// Creates a renderer with red background
var renderer = new THREE.WebGLRenderer();
renderer.setSize(200, 100);
renderer.setClearColor(0xff0000, 1);
renderer.setSize( 200, 100 );
renderer.setClearColor( 0xff0000 );
</code>
<h3>[method:Color getClearColor]()</h3>
......
......@@ -3,60 +3,60 @@
*/
var constants = {
combine: {
"THREE.MultiplyOperation" : THREE.MultiplyOperation,
"THREE.MixOperation" : THREE.MixOperation,
"THREE.AddOperation" : THREE.AddOperation
},
side : {
"THREE.FrontSide" : THREE.FrontSide,
"THREE.BackSide" : THREE.BackSide,
"THREE.DoubleSide" : THREE.DoubleSide
},
shading : {
"THREE.NoShading" : THREE.NoShading,
"THREE.FlatShading" : THREE.FlatShading,
"THREE.SmoothShading" : THREE.SmoothShading
},
colors : {
"THREE.NoColors" : THREE.NoColors,
"THREE.FaceColors" : THREE.FaceColors,
"THREE.VertexColors" : THREE.VertexColors
},
blendingMode : {
"THREE.NoBlending" : THREE.NoBlending,
"THREE.NormalBlending" : THREE.NormalBlending,
"THREE.AdditiveBlending" : THREE.AdditiveBlending,
"THREE.SubtractiveBlending" : THREE.SubtractiveBlending,
"THREE.MultiplyBlending" : THREE.MultiplyBlending,
"THREE.CustomBlending" : THREE.CustomBlending
},
equations : {
"THREE.AddEquation" : THREE.AddEquation,
"THREE.SubtractEquation" : THREE.SubtractEquation,
"THREE.ReverseSubtractEquation" : THREE.ReverseSubtractEquation
},
destinationFactors : {
"THREE.ZeroFactor" : THREE.ZeroFactor,
"THREE.OneFactor" : THREE.OneFactor,
"THREE.SrcColorFactor" : THREE.SrcColorFactor,
......@@ -65,38 +65,38 @@ var constants = {
"THREE.OneMinusSrcAlphaFactor" : THREE.OneMinusSrcAlphaFactor,
"THREE.DstAlphaFactor" : THREE.DstAlphaFactor,
"THREE.OneMinusDstAlphaFactor" : THREE.OneMinusDstAlphaFactor
},
sourceFactors : {
"THREE.DstColorFactor" : THREE.DstColorFactor,
"THREE.OneMinusDstColorFactor" : THREE.OneMinusDstColorFactor,
"THREE.SrcAlphaSaturateFactor" : THREE.SrcAlphaSaturateFactor
}
}
function getObjectsKeys( obj ) {
var keys = [];
for ( var key in obj ) {
if ( obj.hasOwnProperty( key ) ) {
keys.push( key );
}
}
return keys;
}
var envMaps = (function () {
var path = "../../examples/textures/cube/SwedishRoyalCastle/";
var format = '.jpg';
var urls = [
......@@ -111,32 +111,32 @@ var envMaps = (function () {
var refractionCube = new THREE.Texture( reflectionCube.image, THREE.CubeRefractionMapping );
reflectionCube.format = THREE.RGBFormat;
return {
none : null,
reflection : reflectionCube,
refraction : refractionCube
};
})();
var envMapKeys = getObjectsKeys( envMaps );
var textureMaps = (function () {
return {
none : null,
grass : THREE.ImageUtils.loadTexture( "../../examples/textures/terrain/grasslight-thin.jpg" )
};
})();
var textureMapKeys = getObjectsKeys( textureMaps );
function generateVertexColors ( geometry ) {
for ( var i=0, il = geometry.faces.length; i < il; i++ ) {
geometry.faces[i].vertexColors.push( new THREE.Color().setHSL(
i / il * Math.random(),
0.5,
......@@ -152,15 +152,15 @@ function generateVertexColors ( geometry ) {
0.5,
0.5
) );
geometry.faces[i].color = new THREE.Color().setHSL(
i / il * Math.random(),
0.5,
0.5
);
}
}
function generateMorphTargets ( mesh, geometry ) {
......@@ -172,7 +172,7 @@ function generateMorphTargets ( mesh, geometry ) {
vertices.push( geometry.vertices[ i ].clone() );
scale = 1 + Math.random() * 0.3;
vertices[ vertices.length - 1 ].x *= scale;
vertices[ vertices.length - 1 ].y *= scale;
vertices[ vertices.length - 1 ].z *= scale;
......@@ -180,31 +180,31 @@ function generateMorphTargets ( mesh, geometry ) {
}
geometry.morphTargets.push( { name: "target1", vertices: vertices } );
geometry.update
}
function handleColorChange ( color ) {
return function ( value ){
if (typeof value === "string") {
value = value.replace('#', '0x');
}
color.setHex( value );
};
}
function needsUpdate ( material, geometry ) {
return function () {
material.shading = +material.shading; //Ensure number
material.vertexColors = +material.vertexColors; //Ensure number
material.side = +material.side; //Ensure number
......@@ -212,63 +212,63 @@ function needsUpdate ( material, geometry ) {
geometry.verticesNeedUpdate = true;
geometry.normalsNeedUpdate = true;
geometry.colorsNeedUpdate = true;
};
};
function updateMorphs ( torus, material ) {
return function () {
torus.updateMorphTargets();
material.needsUpdate = true;
};
}
function updateTexture ( material, materialKey, textures ) {
return function ( key ) {
material[materialKey] = textures[key];
material.needsUpdate = true;
};
}
function guiScene ( gui, scene ) {
var folder = gui.addFolder('Scene');
var data = {
background : "#000000",
"ambient light" : ambientLight.color.getHex()
}
var color = new THREE.Color();
var colorConvert = handleColorChange( color );
folder.addColor( data, "background" ).onChange( function ( value ) {
colorConvert( value );
renderer.setClearColor(color.getHex(), 1);
renderer.setClearColor( color.getHex() );
} );
folder.addColor( data, "ambient light" ).onChange( handleColorChange( ambientLight.color ) )
guiSceneFog( folder, scene );
}
function guiSceneFog ( folder, scene ) {
var fogFolder = folder.addFolder('scene.fog');
var fog = new THREE.Fog( 0x3f7b9d, 0, 60 );
var data = {
......@@ -277,29 +277,29 @@ function guiSceneFog ( folder, scene ) {
"scene.fog.color" : fog.color.getHex()
}
};
fogFolder.add( data.fog, 'THREE.Fog()' ).onChange( function ( useFog ) {
if ( useFog ) {
scene.fog = fog;
} else {
scene.fog = null;
}
} );
fogFolder.addColor( data.fog, 'scene.fog.color').onChange( handleColorChange( fog.color ) );
}
function guiMaterial ( gui, mesh, material, geometry ) {
var folder = gui.addFolder('THREE.Material');
folder.add( material, 'transparent' );
folder.add( material, 'opacity', 0, 1 );
// folder.add( material, 'blending', constants.blendingMode );
......@@ -315,11 +315,11 @@ function guiMaterial ( gui, mesh, material, geometry ) {
// folder.add( material, 'overdraw', 0, 5 );
folder.add( material, 'visible' );
folder.add( material, 'side', constants.side ).onChange( needsUpdate( material, geometry ) );
}
function guiMeshBasicMaterial ( gui, mesh, material, geometry ) {
var data = {
color : material.color.getHex(),
envMaps : envMapKeys,
......@@ -328,7 +328,7 @@ function guiMeshBasicMaterial ( gui, mesh, material, geometry ) {
specularMap : textureMapKeys,
alphaMap : textureMapKeys
};
var folder = gui.addFolder('THREE.MeshBasicMaterial');
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
......@@ -337,7 +337,7 @@ function guiMeshBasicMaterial ( gui, mesh, material, geometry ) {
folder.add( material, 'shading', constants.shading);
folder.add( material, 'vertexColors', constants.colors).onChange( needsUpdate( material, geometry ) );
folder.add( material, 'fog' );
folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
folder.add( data, 'map', textureMapKeys ).onChange( updateTexture( material, 'map', textureMaps ) );
folder.add( data, 'lightMap', textureMapKeys ).onChange( updateTexture( material, 'lightMap', textureMaps ) );
......@@ -348,36 +348,36 @@ function guiMeshBasicMaterial ( gui, mesh, material, geometry ) {
folder.add( material, 'reflectivity', 0, 1 );
folder.add( material, 'refractionRatio', 0, 1 );
//folder.add( material, 'skinning' );
}
function guiMeshDepthMaterial ( gui, mesh, material, geometry ) {
var folder = gui.addFolder('THREE.MeshDepthMaterial');
folder.add( material, 'wireframe' );
folder.add( material, 'wireframeLinewidth', 0, 10 );
folder.add( material, 'morphTargets' ).onChange( updateMorphs( mesh, material ) );
}
function guiMeshNormalMaterial ( gui, mesh, material, geometry ) {
var folder = gui.addFolder('THREE.MeshNormalMaterial');
folder.add( material, 'shading', constants.shading).onChange( needsUpdate( material, geometry ) );
folder.add( material, 'wireframe' );
folder.add( material, 'wireframeLinewidth', 0, 10 );
folder.add( material, 'morphTargets' ).onChange( updateMorphs( mesh, material ) );
}
function guiLineBasicMaterial ( gui, mesh, material, geometry ) {
var data = {
color : material.color.getHex()
};
var folder = gui.addFolder('THREE.LineBasicMaterial');
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
......@@ -386,11 +386,11 @@ function guiLineBasicMaterial ( gui, mesh, material, geometry ) {
folder.add( material, 'linejoin', ["round", "bevel", "miter"] );
folder.add( material, 'vertexColors', constants.colors).onChange( needsUpdate( material, geometry ) );
folder.add( material, 'fog' );
}
function guiMeshLambertMaterial ( gui, mesh, material, geometry ) {
var data = {
color : material.color.getHex(),
ambient : material.ambient.getHex(),
......@@ -401,15 +401,15 @@ function guiMeshLambertMaterial ( gui, mesh, material, geometry ) {
specularMap : textureMapKeys,
alphaMap : textureMapKeys
};
var envObj = {};
var folder = gui.addFolder('THREE.MeshLambertMaterial');
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
folder.addColor( data, 'ambient' ).onChange( handleColorChange( material.ambient ) );
folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
folder.add( material, 'shading', constants.shading ).onChange( needsUpdate( material, geometry ) );
folder.add( material, 'wireframe' );
folder.add( material, 'wireframeLinewidth', 0, 10 );
......@@ -426,11 +426,11 @@ function guiMeshLambertMaterial ( gui, mesh, material, geometry ) {
folder.add( material, 'reflectivity', 0, 1 );
folder.add( material, 'refractionRatio', 0, 1 );
//folder.add( material, 'skinning' );
}
function guiMeshPhongMaterial ( gui, mesh, material, geometry ) {
var data = {
color : material.color.getHex(),
ambient : material.ambient.getHex(),
......@@ -442,7 +442,7 @@ function guiMeshPhongMaterial ( gui, mesh, material, geometry ) {
specularMap : textureMapKeys,
alphaMap : textureMapKeys
};
var folder = gui.addFolder('THREE.MeshPhongMaterial');
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
......@@ -461,16 +461,16 @@ function guiMeshPhongMaterial ( gui, mesh, material, geometry ) {
folder.add( data, 'lightMap', textureMapKeys ).onChange( updateTexture( material, 'lightMap', textureMaps ) );
folder.add( data, 'specularMap', textureMapKeys ).onChange( updateTexture( material, 'specularMap', textureMaps ) );
folder.add( data, 'alphaMap', textureMapKeys ).onChange( updateTexture( material, 'alphaMap', textureMaps ) );
}
function chooseFromHash ( gui, mesh, geometry ) {
var selectedMaterial = window.location.hash.substring(1) || "MeshBasicMaterial";
var material;
switch (selectedMaterial) {
case "MeshBasicMaterial" :
material = new THREE.MeshBasicMaterial({color: 0x2194CE});
......@@ -480,7 +480,7 @@ function chooseFromHash ( gui, mesh, geometry ) {
return material;
break;
case "MeshLambertMaterial" :
material = new THREE.MeshLambertMaterial({color: 0x2194CE});
......@@ -490,7 +490,7 @@ function chooseFromHash ( gui, mesh, geometry ) {
return material;
break;
case "MeshPhongMaterial" :
material = new THREE.MeshPhongMaterial({color: 0x2194CE});
......@@ -500,27 +500,27 @@ function chooseFromHash ( gui, mesh, geometry ) {
return material;
break;
case "MeshDepthMaterial" :
material = new THREE.MeshDepthMaterial({color: 0x2194CE});
guiMaterial( gui, mesh, material, geometry );
guiMeshDepthMaterial( gui, mesh, material, geometry );
return material;
break;
case "MeshNormalMaterial" :
material = new THREE.MeshNormalMaterial();
guiMaterial( gui, mesh, material, geometry );
guiMeshNormalMaterial( gui, mesh, material, geometry );
return material;
break;
case "LineBasicMaterial" :
material = new THREE.LineBasicMaterial({color: 0x2194CE});
......@@ -531,5 +531,5 @@ function chooseFromHash ( gui, mesh, geometry ) {
break;
}
}
......@@ -80,8 +80,7 @@
scene = new THREE.Scene();
renderer = new THREE.CanvasRenderer( { antialias: false } );
renderer.setClearColor( 0x000000, 1 );
renderer = new THREE.CanvasRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......
......@@ -99,7 +99,7 @@
scene.add( object );
renderer = new THREE.CanvasRenderer();
renderer.setClearColor( 0x111111, 1 );
renderer.setClearColor( 0x111111 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( WIDTH, HEIGHT );
......
function generateGeometry(objectType, numObjects) {
var geometry = new THREE.Geometry();
function applyVertexColors( g, c ) {
g.faces.forEach( function( f ) {
......@@ -19,7 +19,7 @@ function generateGeometry(objectType, numObjects) {
}
for ( var i = 0; i < numObjects; i ++ ) {
var position = new THREE.Vector3();
position.x = Math.random() * 10000 - 5000;
......@@ -51,7 +51,7 @@ function generateGeometry(objectType, numObjects) {
scale.y = scale.z = scale.x;
color.setRGB( Math.random()+0.1, 0, 0 );
}
// give the geom's vertices a random color, to be displayed
applyVertexColors( geom, color );
......@@ -70,12 +70,12 @@ function generateGeometry(objectType, numObjects) {
}
function Scene ( type, numObjects, cameraZ, fov, rotationSpeed, clearColor ) {
this.clearColor = clearColor;
this.camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 10000 );
this.camera.position.z = cameraZ;
// Setup scene
this.scene = new THREE.Scene();
this.scene.add( new THREE.AmbientLight( 0x555555 ) );
......@@ -91,19 +91,19 @@ function Scene ( type, numObjects, cameraZ, fov, rotationSpeed, clearColor ) {
renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
this.fbo = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, renderTargetParameters );
this.render = function( delta, rtt ) {
this.mesh.rotation.x += delta*this.rotationSpeed.x;
this.mesh.rotation.y += delta*this.rotationSpeed.y;
this.mesh.rotation.z += delta*this.rotationSpeed.z;
renderer.setClearColor( this.clearColor, 1 );
renderer.setClearColor( this.clearColor );
if (rtt)
renderer.render( this.scene, this.camera, this.fbo, true );
else
renderer.render( this.scene, this.camera );
};
}
......@@ -59,7 +59,7 @@
camera.lookAt(new THREE.Vector3( 0, 0, 0 ));
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0x555555, 1 );
renderer.setClearColor( 0x555555 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......
......@@ -109,7 +109,7 @@
// renderer
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setClearColor( scene.fog.color, 1 );
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
......
......@@ -117,7 +117,7 @@
// renderer
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setClearColor( scene.fog.color, 1 );
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
......
......@@ -68,7 +68,7 @@
scene.add( light );
renderer = new THREE.WebGLRenderer( { antialias: true, alpha: false } );
renderer.setClearColor( '#777777', 1 );
renderer.setClearColor( 0x777777 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.autoClear = true;
......@@ -263,4 +263,3 @@
</body>
</html>
......@@ -134,12 +134,11 @@
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.domElement.style.position = "relative";
renderer.setClearColor( scene.fog.color, 1 );
container.appendChild( renderer.domElement );
renderer.gammaInput = true;
......
......@@ -227,7 +227,7 @@
//
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setClearColor( scene.fog.color, 1 );
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
......
......@@ -117,7 +117,7 @@
//
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setClearColor( scene.fog.color, 1 );
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
......
......@@ -208,7 +208,7 @@
//
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setClearColor( scene.fog.color, 1 );
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
......
......@@ -150,7 +150,7 @@
scene.add( sphere );
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0x050505, 1 );
renderer.setClearColor( 0x050505 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( WIDTH, HEIGHT );
......
......@@ -186,7 +186,7 @@
scene.add( object );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( 0x050505, 1 );
renderer.setClearColor( 0x050505 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( WIDTH, HEIGHT );
......
......@@ -194,7 +194,7 @@
scene.add( directionalLight );
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0xbfd1e5, 1 );
renderer.setClearColor( 0xbfd1e5 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
......
......@@ -105,7 +105,7 @@
scene.add( directionalLight );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor(0xffffff, 1);
renderer.setClearColor( 0xffffff );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......
......@@ -112,7 +112,7 @@
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0xaaccff, 1 );
renderer.setClearColor( 0xaaccff );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
......
......@@ -193,7 +193,7 @@
scene.add( directionalLight );
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0xbfd1e5, 1 );
renderer.setClearColor( 0xbfd1e5 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
......
......@@ -331,7 +331,7 @@
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( 0xf0f0f0, 1 );
renderer.setClearColor( 0xf0f0f0 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......
......@@ -223,7 +223,7 @@
}
material = new THREE.MeshFaceMaterial( [
material = new THREE.MeshFaceMaterial( [
new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading } ), // front
new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.SmoothShading } ) // side
] );
......@@ -246,7 +246,7 @@
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( scene.fog.color, 1 );
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......
......@@ -84,7 +84,7 @@
};
} )();
</script>
<script>
......@@ -238,7 +238,7 @@
}
material = new THREE.MeshFaceMaterial( [
material = new THREE.MeshFaceMaterial( [
new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading } ), // front
new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.SmoothShading } ) // side
] );
......@@ -261,7 +261,7 @@
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( scene.fog.color, 1 );
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......
......@@ -504,7 +504,7 @@
scene.fog = new THREE.Fog( 0xffffff, 100, 1000 );
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( scene.fog.color, 1 );
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......
......@@ -213,7 +213,7 @@
//
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setClearColor( scene.fog.color, 1 );
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......@@ -286,7 +286,7 @@
linePosition.copyAt( 3, meshPosition, face.a );
mesh.updateMatrix();
line.geometry.applyMatrix( mesh.matrix );
line.visible = true;
......
......@@ -164,7 +164,7 @@
scene.add( highlightBox );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( 0xffffff, 1 );
renderer.setClearColor( 0xffffff );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.sortObjects = false;
......
......@@ -170,7 +170,7 @@
// renderer
renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
renderer.setClearColor( scene.fog.color, 1 );
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......
......@@ -225,7 +225,7 @@
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( scene.fog.color, 1 );
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......
......@@ -203,7 +203,7 @@
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setClearColor( scene.fog.color, 1 );
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......
......@@ -96,7 +96,7 @@
scene.add( object );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( 0x111111, 1 );
renderer.setClearColor( 0x111111 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( WIDTH, HEIGHT );
......
......@@ -114,7 +114,7 @@
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( scene.fog.color, 1 );
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.domElement.style.position = "relative";
......@@ -182,7 +182,7 @@
geometry.computeTangents();
var material = new THREE.MeshPhongMaterial( {
specular: 0x303030,
shininess: 50,
map: THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Map-COL.jpg" ),
......@@ -191,7 +191,7 @@
normalScale: new THREE.Vector2( 0.8, 0.8 ),
wrapRGB: new THREE.Vector3( 0.75, 0.5, 0.5 ),
wrapAround: true
} );
callbackModel( geometry, 1300, material, 200, 50, 0, 0, 0 );
......
......@@ -118,7 +118,7 @@
// renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( scene.fog.color, 1 );
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
......
......@@ -173,7 +173,7 @@
// renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( scene.fog.color, 1 );
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
......
......@@ -115,7 +115,7 @@
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( scene.fog.color, 1 );
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.domElement.style.position = "relative";
......
......@@ -158,7 +158,7 @@
// RENDERER
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0x050505, 1 );
renderer.setClearColor( 0x050505 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
......
......@@ -117,7 +117,7 @@
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( 0x0a0a0a, 1 );
renderer.setClearColor( 0x0a0a0a );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.sortObjects = true;
......
......@@ -177,7 +177,7 @@
loader.load( "obj/leeperrysmith/LeePerrySmith.js", function( geometry ) { createScene( geometry, 100, material ) } );
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setClearColor( 0x060708, 1 );
renderer.setClearColor( 0x060708 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......
......@@ -180,15 +180,11 @@
//
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setClearColor( 0x060708, 1 );
renderer.setClearColor( 0x444a54 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
var color = new THREE.Color();
color.setHSL( 0.6, 0.1, 0.3 );
renderer.setClearColor( color, 1 );
renderer.shadowMapEnabled = true;
renderer.shadowMapCullFace = THREE.CullFaceBack;
......
......@@ -187,7 +187,7 @@
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setClearColor( scene.fog.color, 1 );
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
container.appendChild( renderer.domElement );
......@@ -887,7 +887,7 @@
v = THREE.Math.clamp( v + 0.5 * delta * vdir, 0.1, 0.9 );
scene.fog.color.setHSL( 0.51, 0.5, v * 0.75 );
renderer.setClearColor( scene.fog.color, 1 );
renderer.setClearColor( scene.fog.color );
var vnorm = ( v - 0.05 ) / ( 0.9 - 0.05 );
......
......@@ -139,7 +139,7 @@
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( scene.fog.color, 1 );
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.domElement.style.position = "relative";
......
......@@ -137,7 +137,7 @@
loader.load( "obj/leeperrysmith/LeePerrySmith.js", function( geometry ) { createScene( geometry, 100, material ) } );
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setClearColor( 0x111111, 1 );
renderer.setClearColor( 0x111111 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......
......@@ -157,7 +157,7 @@
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setClearColor( 0x050505, 1 );
renderer.setClearColor( 0x050505 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.autoClear = false;
......
......@@ -154,7 +154,7 @@
// RENDERER
renderer.setClearColor( scene1.fog.color, 1 );
renderer.setClearColor( scene1.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.autoClear = false;
......
......@@ -195,7 +195,7 @@
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( scene.fog.color, 1 );
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.autoClear = false;
......
......@@ -209,7 +209,7 @@
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( scene1.fog.color, 1 );
renderer.setClearColor( scene1.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.autoClear = false;
......
......@@ -19,7 +19,7 @@
padding: 0px;
overflow: hidden;
}
#stats { position: absolute; top:0; left: 0 }
#stats #fps { background: transparent !important }
#stats #fps #fpsText { color: #777 !important }
......@@ -35,9 +35,9 @@
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var SCREEN_WIDTH = window.innerWidth;
......@@ -51,52 +51,52 @@
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
renderer = new THREE.WebGLRenderer( { antialias: true } );
camera = new THREE.PerspectiveCamera( 35, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 25000 );
camera.position.z = 200;
scene = new THREE.Scene();
var light = new THREE.DirectionalLight( 0xffffff, 2 );
light.position.set( 1, 1, 1 );
scene.add( light );
var loader = new THREE.TGALoader();
// add box 1 - grey8 texture
var texture1 = loader.load( 'textures/crate_grey8.tga' );
var material1 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture1 } );
var geometry = new THREE.BoxGeometry( 50, 50, 50 );
var mesh1 = new THREE.Mesh( geometry, material1 );
mesh1.rotation.x = -Math.PI / 2;
mesh1.position.x = - 50;
scene.add( mesh1 );
// add box 2 - tga texture
var texture2 = loader.load( 'textures/crate_color8.tga' );
var material2 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture2 } );
var mesh2 = new THREE.Mesh( geometry, material2 );
mesh2.rotation.x = -Math.PI / 2;
mesh2.position.x = 50;
scene.add( mesh2 );
// RENDERER
renderer.setClearColor( 0xf2f7ff, 1 );
renderer.setClearColor( 0xf2f7ff );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.autoClear = false;
......@@ -111,7 +111,7 @@
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
}
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX );
......@@ -142,9 +142,9 @@
renderer.setScissor( 0, 0, SCREEN_WIDTH - 2, SCREEN_HEIGHT );
renderer.render( scene, camera );
}
</script>
</body>
</html>
......@@ -229,7 +229,7 @@
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( 0x050505, 1 );
renderer.setClearColor( 0x050505 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( WIDTH, HEIGHT );
......
......@@ -141,7 +141,7 @@
//
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0x222222, 1 );
renderer.setClearColor( 0x222222 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.sortObjects = false;
......
......@@ -137,7 +137,7 @@
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( scene.fog.color, 1 );
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
container.appendChild( renderer.domElement );
......
......@@ -138,7 +138,7 @@
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( scene.fog.color, 1 );
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
container.appendChild( renderer.domElement );
......
......@@ -5,40 +5,39 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
color: #fff;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
background-color: #000;
margin: 0px;
overflow: hidden;
}
#info {
color:#fff;
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
body {
color: #fff;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
background-color: #000;
margin: 0px;
overflow: hidden;
}
a { color: red; }
#info {
color:#fff;
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
a {
color: red;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="http://threejs.org" target="_blank">three.js</a> - webgl dynamic particles + postprocessing
- models by <a href="http://sketchup.google.com/3dwarehouse/details?mid=2c6fd128fca34052adc5f5b98d513da1" target="_blank">Reallusion</a>
<a href="http://sketchup.google.com/3dwarehouse/details?mid=f526cc4abf7cb68d76cab47c765b7255" target="_blank">iClone</a>,
<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1129" target="_blank">Troyano</a>
</div>
<a href="http://threejs.org" target="_blank">three.js</a> - webgl dynamic particles + postprocessing
- models by <a href="http://sketchup.google.com/3dwarehouse/details?mid=2c6fd128fca34052adc5f5b98d513da1" target="_blank">Reallusion</a>
<a href="http://sketchup.google.com/3dwarehouse/details?mid=f526cc4abf7cb68d76cab47c765b7255" target="_blank">iClone</a>,
<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1129" target="_blank">Troyano</a>
</div>
<script src="../build/three.min.js"></script>
......@@ -138,14 +137,13 @@
//
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.autoClear = false;
renderer.sortObjects = false;
container.appendChild( renderer.domElement );
renderer.setClearColor( scene.fog.color, 1 );
//
parent = new THREE.Object3D();
......
......@@ -77,7 +77,7 @@
} );
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0xffffff, 1 );
renderer.setClearColor( 0xffffff );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......
......@@ -107,7 +107,7 @@
}
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( 0x050505, 1 );
renderer.setClearColor( 0x050505 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
......
......@@ -139,7 +139,7 @@
//
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setClearColor( 0x000000, 1 );
renderer.setClearColor( 0x000000 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( width, height );
renderer.autoClear = false;
......@@ -333,7 +333,7 @@
geometry.computeTangents();
var mat2 = new THREE.MeshLambertMaterial( {
color: 0x999999,
ambient: 0x444444,
specular: 0x080808,
......@@ -341,7 +341,7 @@
map: THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Map-COL.jpg" ),
normalMap: THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg" ),
normalScale: new THREE.Vector2( 0.75, 0.75 )
} );
mesh = new THREE.Mesh( geometry, mat2 );
......
......@@ -124,7 +124,7 @@
//
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setClearColor( bgColor, 1 );
renderer.setClearColor( bgColor );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......
......@@ -324,7 +324,7 @@
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( scene.fog.color, 1 );
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
......@@ -496,7 +496,7 @@
if ( morph ) morph.updateAnimation( delta );
scene.fog.color.setHSL( 0.63, 0.05, parameters.control );
renderer.setClearColor( scene.fog.color, 1 );
renderer.setClearColor( scene.fog.color );
sunLight.intensity = parameters.control * 0.7 + 0.3;
pointLight.intensity = - parameters.control * 0.5 + 1;
......@@ -526,4 +526,3 @@
</body>
</html>
......@@ -133,11 +133,11 @@
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
container.appendChild( renderer.domElement );
renderer.setClearColor( scene.fog.color, 1 );
renderer.autoClear = false;
//
......
......@@ -129,7 +129,7 @@
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
container.appendChild( renderer.domElement );
renderer.setClearColor( scene.fog.color, 1 );
renderer.setClearColor( scene.fog.color );
renderer.autoClear = false;
//
......
......@@ -430,7 +430,7 @@
// RENDERER
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( scene.fog.color, 1 );
renderer.setClearColor( scene.fog.color );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
container.appendChild( renderer.domElement );
......@@ -659,7 +659,7 @@
scene.fog.color.setHSL( 0.1, 0.5, lightVal );
renderer.setClearColor( scene.fog.color, 1 );
renderer.setClearColor( scene.fog.color );
directionalLight.intensity = THREE.Math.mapLinear( valNorm, 0, 1, 0.1, 1.15 );
pointLight.intensity = THREE.Math.mapLinear( valNorm, 0, 1, 0.9, 1.5 );
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册