mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-10 05:26:11 +10:00
alteredq
25b47616fa
As now buffers are created based on first material that is encountered per shared Geometry, most complex material should go first.
229 lines
6.7 KiB
HTML
229 lines
6.7 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js webgl - materials</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/Three.js"></script>
|
|
|
|
<script type="text/javascript" src="js/Detector.js"></script>
|
|
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
|
|
<script type="text/javascript" src="js/Stats.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
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.Camera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
|
|
camera.position.y = 200;
|
|
camera.position.z = 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.addObject( 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: 0x665500, 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 } ) );
|
|
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 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.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.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 );
|
|
|
|
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 = 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 );
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|