mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-09 13:06:01 +10:00
alteredq
ecad27eb11
Code is still rough around edges (it can be made nicer), though it should already produce one-to-one results with ubershader. Side-effect is that scene is no longer required as WebGLRenderer constructor parameter. Shader programs are now constructed upon first frame render and only then scene lights are examined.
240 lines
7.8 KiB
HTML
240 lines
7.8 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js - materials WebGL</title>
|
|
<meta charset="utf-8">
|
|
<style type="text/css">
|
|
body {
|
|
font-family: Monospace;
|
|
background-color: #000;
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
}
|
|
#log { color:#fff; position:absolute; top:50px; text-align:left; display:block; z-index:100; pointer-events:none; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<pre id="log"></pre>
|
|
|
|
<script type="text/javascript" src="../build/ThreeExtras.js"></script>
|
|
|
|
<script type="text/javascript" src="js/Stats.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var container, stats;
|
|
|
|
var camera, scene, renderer, objects;
|
|
var particleLight, pointLight;
|
|
|
|
init();
|
|
setInterval( loop, 1000 / 60 );
|
|
|
|
function init() {
|
|
|
|
container = document.createElement('div');
|
|
document.body.appendChild(container);
|
|
|
|
camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
|
|
camera.position.y = 200;
|
|
camera.position.z = 800;
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
// Grid
|
|
|
|
var geometry = new THREE.Geometry();
|
|
geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( - 500, 0, 0 ) ) );
|
|
geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( 500, 0, 0 ) ) );
|
|
|
|
for ( var i = 0; i <= 10; i ++ ) {
|
|
|
|
var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 0.2 } ) );
|
|
line.position.y = - 120;
|
|
line.position.z = ( i * 100 ) - 500;
|
|
scene.addObject( line );
|
|
|
|
var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 0.2 } ) );
|
|
line.position.x = ( i * 100 ) - 500;
|
|
line.position.y = - 120;
|
|
line.rotation.y = 90 * Math.PI / 180;
|
|
scene.addObject( line );
|
|
|
|
}
|
|
|
|
var generatedTexture = new THREE.Texture( generateTexture() );
|
|
generatedTexture.image.loaded = 1;
|
|
|
|
var materials = [];
|
|
materials.push( { material: new THREE.MeshLambertMaterial( { color: 0xdddddd, shading: THREE.FlatShading } ), overdraw: true, doubleSided: false } );
|
|
materials.push( { material: new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.FlatShading } ), overdraw: true, doubleSided: false } );
|
|
materials.push( { material: new THREE.MeshNormalMaterial( ), overdraw: true, doubleSided: false } );
|
|
materials.push( { material: new THREE.MeshBasicMaterial( { color: 0x665500, blending: THREE.AdditiveBlending } ), overdraw: false, doubleSided: true } );
|
|
//materials.push( { material: new THREE.MeshBasicMaterial( { color: 0xff0000, blending: THREE.SubtractiveBlending } ), overdraw: false, doubleSided: true } );
|
|
|
|
materials.push( { material: new THREE.MeshLambertMaterial( { color: 0xdddddd, shading: THREE.SmoothShading } ), overdraw: true, doubleSided: false } );
|
|
materials.push( { material: new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.SmoothShading } ), overdraw: true, doubleSided: false } );
|
|
materials.push( { material: new THREE.MeshNormalMaterial( { shading: THREE.SmoothShading } ), overdraw: true, doubleSided: false } );
|
|
materials.push( { material: new THREE.MeshBasicMaterial( { color: 0xffaa00, wireframe: true } ), overdraw: false, doubleSided: true } );
|
|
|
|
materials.push( { material: new THREE.MeshDepthMaterial(), overdraw: true, doubleSided: false } );
|
|
materials.push( { material: new THREE.MeshBasicMaterial( { map: generatedTexture } ), overdraw: true, doubleSided: false } );
|
|
materials.push( { material: new THREE.MeshLambertMaterial( { map: generatedTexture } ), overdraw: true, doubleSided: false } );
|
|
|
|
// Spheres geometry
|
|
|
|
var geometry_smooth = new Sphere( 70, 32, 16 );
|
|
var geometry_flat = new Sphere( 70, 32, 16 );
|
|
var geometry_pieces = new Sphere( 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.material = [ materials[ Math.floor( Math.random() * materials.length ) ].material ];
|
|
|
|
}
|
|
|
|
materials.push( { material: new THREE.MeshFaceMaterial(), overdraw: false, doubleSided: true } );
|
|
|
|
objects = [];
|
|
|
|
var sphere, geometry, material;
|
|
|
|
for ( var i = 0, l = materials.length; i < l; i ++ ) {
|
|
|
|
material = materials[ i ].material;
|
|
|
|
geometry = material instanceof THREE.MeshFaceMaterial ? geometry_pieces :
|
|
( material.shading == THREE.FlatShading ? geometry_flat : geometry_smooth );
|
|
|
|
sphere = new THREE.Mesh( geometry, material );
|
|
|
|
sphere.overdraw = material.overdraw;
|
|
sphere.doubleSided = material.doubleSided;
|
|
|
|
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.addObject( sphere );
|
|
|
|
}
|
|
|
|
particleLight = new THREE.Mesh( new Sphere( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
|
|
scene.addObject( particleLight );
|
|
|
|
// Lights
|
|
|
|
scene.addLight( 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.addLight( directionalLight );
|
|
|
|
pointLight = new THREE.PointLight( 0xffffff, 1 );
|
|
scene.addLight( pointLight );
|
|
|
|
renderer = new THREE.WebGLRenderer();
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
container.appendChild( renderer.domElement );
|
|
|
|
var debugCanvas = document.createElement( 'canvas' );
|
|
debugCanvas.width = 512;
|
|
debugCanvas.height = 512;
|
|
debugCanvas.style.position = 'absolute';
|
|
debugCanvas.style.top = '0px';
|
|
debugCanvas.style.left = '0px';
|
|
|
|
container.appendChild( debugCanvas );
|
|
|
|
debugContext = debugCanvas.getContext( '2d' );
|
|
debugContext.setTransform( 1, 0, 0, 1, 256, 256 );
|
|
debugContext.strokeStyle = '#000000';
|
|
|
|
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 loop() {
|
|
|
|
var timer = new Date().getTime() * 0.0001;
|
|
|
|
camera.position.x = Math.cos( timer ) * 1000;
|
|
camera.position.z = Math.sin( timer ) * 1000;
|
|
|
|
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 );
|
|
|
|
stats.update();
|
|
}
|
|
|
|
function log( text ) {
|
|
|
|
var e = document.getElementById("log");
|
|
e.innerHTML = text + "<br/>" + e.innerHTML;
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|