mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-23 03:45:56 +10:00
alteredq
942a6c89c9
Lots of code got cleaner with seconds, seems we used them before all around. Also changed examples that didn't need deltas to simple Date.now() plus some more examples cleaning, trying to get rid of obsolescence warnings.
236 lines
6.7 KiB
HTML
236 lines
6.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js webgl - materials</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: #000;
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<script src="../build/Three.js"></script>
|
|
|
|
<script src="js/Detector.js"></script>
|
|
<script src="js/RequestAnimationFrame.js"></script>
|
|
<script src="js/Stats.js"></script>
|
|
|
|
<script>
|
|
|
|
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
|
|
|
|
var container, stats;
|
|
|
|
var camera, scene, renderer, objects;
|
|
var particleLight, pointLight;
|
|
|
|
init();
|
|
animate();
|
|
|
|
function init() {
|
|
|
|
container = document.createElement( 'div' );
|
|
document.body.appendChild( container );
|
|
|
|
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
|
|
camera.position.set( 0, 200, 800 );
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
// Grid
|
|
|
|
var line_material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 0.2 } ),
|
|
geometry = new THREE.Geometry(),
|
|
floor = -75, step = 25;
|
|
|
|
for ( var i = 0; i <= 40; i ++ ) {
|
|
|
|
geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( - 500, floor, i * step - 500 ) ) );
|
|
geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( 500, floor, i * step - 500 ) ) );
|
|
|
|
geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( i * step - 500, floor, -500 ) ) );
|
|
geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( i * step - 500, floor, 500 ) ) );
|
|
|
|
}
|
|
|
|
var line = new THREE.Line( geometry, line_material, THREE.LinePieces );
|
|
scene.add( line );
|
|
|
|
// Materials
|
|
|
|
var generatedTexture = new THREE.Texture( generateTexture() );
|
|
generatedTexture.needsUpdate = true;
|
|
|
|
var materials = [];
|
|
materials.push( new THREE.MeshLambertMaterial( { map: generatedTexture } ) );
|
|
materials.push( new THREE.MeshLambertMaterial( { color: 0xdddddd, shading: THREE.FlatShading } ) );
|
|
materials.push( new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.FlatShading } ) );
|
|
materials.push( new THREE.MeshNormalMaterial( ) );
|
|
materials.push( new THREE.MeshBasicMaterial( { color: 0xffaa00, transparent: true, blending: THREE.AdditiveBlending } ) );
|
|
//materials.push( new THREE.MeshBasicMaterial( { color: 0xff0000, blending: THREE.SubtractiveBlending } ) );
|
|
|
|
materials.push( new THREE.MeshLambertMaterial( { color: 0xdddddd, shading: THREE.SmoothShading } ) );
|
|
materials.push( new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.SmoothShading, map: THREE.ImageUtils.loadTexture( "textures/planets/earth_specular_2048.jpg" ) } ) );
|
|
materials.push( new THREE.MeshNormalMaterial( { shading: THREE.SmoothShading } ) );
|
|
materials.push( new THREE.MeshBasicMaterial( { color: 0xffaa00, wireframe: true } ) );
|
|
|
|
materials.push( new THREE.MeshDepthMaterial() );
|
|
materials.push( new THREE.MeshBasicMaterial( { map: generatedTexture } ) );
|
|
|
|
// Spheres geometry
|
|
|
|
var geometry_smooth = new THREE.SphereGeometry( 70, 32, 16 );
|
|
var geometry_flat = new THREE.SphereGeometry( 70, 32, 16 );
|
|
var geometry_pieces = new THREE.SphereGeometry( 70, 32, 16 ); // Extra geometry to be broken down for MeshFaceMaterial
|
|
|
|
for ( var i = 0, l = geometry_pieces.faces.length; i < l; i ++ ) {
|
|
|
|
var face = geometry_pieces.faces[ i ];
|
|
if ( Math.random() > 0.7 ) face.materials = [ materials[ Math.floor( Math.random() * materials.length ) ] ];
|
|
|
|
}
|
|
|
|
materials.push( new THREE.MeshFaceMaterial() );
|
|
|
|
objects = [];
|
|
|
|
var sphere, geometry, material;
|
|
|
|
for ( var i = 0, l = materials.length; i < l; i ++ ) {
|
|
|
|
material = materials[ i ];
|
|
|
|
geometry = material instanceof THREE.MeshFaceMaterial ? geometry_pieces :
|
|
( material.shading == THREE.FlatShading ? geometry_flat : geometry_smooth );
|
|
|
|
sphere = new THREE.Mesh( geometry, material );
|
|
|
|
sphere.position.x = ( i % 4 ) * 200 - 400;
|
|
sphere.position.z = Math.floor( i / 4 ) * 200 - 200;
|
|
|
|
sphere.rotation.x = Math.random() * 200 - 100;
|
|
sphere.rotation.y = Math.random() * 200 - 100;
|
|
sphere.rotation.z = Math.random() * 200 - 100;
|
|
|
|
objects.push( sphere );
|
|
|
|
scene.add( sphere );
|
|
|
|
}
|
|
|
|
particleLight = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
|
|
scene.add( particleLight );
|
|
|
|
// Lights
|
|
|
|
scene.add( new THREE.AmbientLight( 0x202020 ) );
|
|
|
|
var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );
|
|
|
|
directionalLight.position.x = Math.random() - 0.5;
|
|
directionalLight.position.y = Math.random() - 0.5;
|
|
directionalLight.position.z = Math.random() - 0.5;
|
|
|
|
directionalLight.position.normalize();
|
|
|
|
scene.add( directionalLight );
|
|
|
|
pointLight = new THREE.PointLight( 0xffffff, 1 );
|
|
scene.add( pointLight );
|
|
|
|
//
|
|
|
|
renderer = new THREE.WebGLRenderer();
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
container.appendChild( renderer.domElement );
|
|
|
|
//
|
|
|
|
stats = new Stats();
|
|
stats.domElement.style.position = 'absolute';
|
|
stats.domElement.style.top = '0px';
|
|
|
|
container.appendChild( stats.domElement );
|
|
|
|
}
|
|
|
|
function generateTexture() {
|
|
|
|
var canvas = document.createElement( 'canvas' );
|
|
canvas.width = 256;
|
|
canvas.height = 256;
|
|
|
|
var context = canvas.getContext( '2d' );
|
|
var image = context.getImageData( 0, 0, 256, 256 );
|
|
|
|
var x = 0, y = 0;
|
|
|
|
for ( var i = 0, j = 0, l = image.data.length; i < l; i += 4, j ++ ) {
|
|
|
|
x = j % 256;
|
|
y = x == 0 ? y + 1 : y;
|
|
|
|
image.data[ i + 2 ] = Math.floor( x ^ y );
|
|
image.data[ i + 3 ] = 255;
|
|
|
|
}
|
|
|
|
context.putImageData( image, 0, 0 );
|
|
|
|
return canvas;
|
|
|
|
}
|
|
|
|
//
|
|
|
|
function animate() {
|
|
|
|
requestAnimationFrame( animate );
|
|
|
|
render();
|
|
stats.update();
|
|
|
|
}
|
|
|
|
function render() {
|
|
|
|
var timer = 0.0001 * Date.now();
|
|
|
|
camera.position.x = Math.cos( timer ) * 1000;
|
|
camera.position.z = Math.sin( timer ) * 1000;
|
|
|
|
camera.lookAt( scene.position );
|
|
|
|
for ( var i = 0, l = objects.length; i < l; i ++ ) {
|
|
|
|
var object = objects[ i ];
|
|
|
|
object.rotation.x += 0.01;
|
|
object.rotation.y += 0.005;
|
|
|
|
}
|
|
|
|
particleLight.position.x = Math.sin( timer * 7 ) * 300;
|
|
particleLight.position.y = Math.cos( timer * 5 ) * 400;
|
|
particleLight.position.z = Math.cos( timer * 3 ) * 300;
|
|
|
|
pointLight.position.x = particleLight.position.x;
|
|
pointLight.position.y = particleLight.position.y;
|
|
pointLight.position.z = particleLight.position.z;
|
|
|
|
renderer.render( scene, camera );
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|