mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-25 12:55:57 +10:00
alteredq
255c042b1e
This allows to work around ANGLE antialiasing issue appearing when compositing WebGL framebuffer with transparent background color with HTML canvas element background (while keeping antialiasing on).
WebGLRenderer constructor now takes JSON object with few optional parameters:
renderer = new THREE.WebGLRenderer { scene: scene,
antialias: true,
clearColor: 0x000000,
clearAlpha: 0 };
Here is how to change clear color in runtime:
renderer.setClearColor( 0xff0000, 1 );
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( { near: 1, far: 2000 } ), 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, true );
|
|
var geometry_flat = new Sphere( 70, 32, 16, false );
|
|
var geometry_pieces = new Sphere( 70, 32, 16, true ); // 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( { scene: scene } );
|
|
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>
|