mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-10 05:26:11 +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 );
279 lines
7.1 KiB
HTML
279 lines
7.1 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js - lights test</title>
|
|
<meta charset="utf-8">
|
|
<style type="text/css">
|
|
|
|
body {
|
|
background:#fff;
|
|
padding:0;
|
|
margin:0;
|
|
overflow:hidden;
|
|
font-family:georgia;
|
|
text-align:center;
|
|
}
|
|
h1 { }
|
|
a { color:skyblue }
|
|
canvas { pointer-events:none; z-index:10; position:relative; }
|
|
#log { position:absolute; top:50px; text-align:left; display:block; z-index:100; }
|
|
#d { text-align:center; margin:1em 0 -15.7em 0; z-index:0; position:relative; display:block }
|
|
.button { background:#000; color:#fff; padding:0.2em 0.5em; cursor:pointer }
|
|
.inactive { background:#999; color:#eee }
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="d">
|
|
<h1>lights test</h1>
|
|
|
|
<span id="rcanvas" class="button inactive">2d canvas renderer</span>
|
|
<span id="rwebgl" class="button">WebGL renderer</span>
|
|
<br/>
|
|
|
|
<p>Best viewed in Chrome 8/9 or Firefox 4 using WebGL renderer.
|
|
<p>Canvas renderer is very slow on anything other than Chrome.
|
|
</div>
|
|
|
|
<pre id="log"></pre>
|
|
|
|
<script type="text/javascript" src="../build/Three.js"></script>
|
|
|
|
<script type="text/javascript" src="../src/extras/io/Loader.js"></script>
|
|
<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
|
|
|
|
<script type="text/javascript" src="js/Stats.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var SCREEN_WIDTH = window.innerWidth / 2;
|
|
var SCREEN_HEIGHT = window.innerHeight;
|
|
var FLOOR = -250;
|
|
|
|
var container, stats;
|
|
|
|
var camera, scene, canvasRenderer, webglRenderer;
|
|
|
|
var mesh, zmesh, lightMesh, geometry;
|
|
|
|
var directionalLight, pointLight;
|
|
|
|
var mouseX = 0, mouseY = 0;
|
|
|
|
var windowHalfX = window.innerWidth / 2;
|
|
var windowHalfY = window.innerHeight / 2;
|
|
|
|
var render_canvas = 1, render_gl = 1;
|
|
var has_gl = 0;
|
|
|
|
var bcanvas = document.getElementById( 'rcanvas' );
|
|
var bwebgl = document.getElementById( 'rwebgl' );
|
|
|
|
document.addEventListener('mousemove', onDocumentMouseMove, false);
|
|
|
|
init();
|
|
|
|
loop();
|
|
|
|
//render_canvas = !has_gl;
|
|
bwebgl.style.display = has_gl ? 'inline' : 'none';
|
|
bcanvas.className = render_canvas ? 'button' : 'button inactive';
|
|
|
|
setInterval(loop, 1000/60);
|
|
|
|
function init() {
|
|
|
|
container = document.createElement('div');
|
|
document.body.appendChild(container);
|
|
|
|
camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
|
|
camera.position.z = 500;
|
|
camera.updateMatrix();
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
// Spheres
|
|
|
|
var geometry = new Sphere( 100, 16, 8 );
|
|
var material = new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading } );
|
|
|
|
for ( var i = 0; i < 30; i ++ ) {
|
|
|
|
mesh = new THREE.Mesh( geometry, material );
|
|
mesh.position.x = 500 * ( Math.random() - 0.5 );
|
|
mesh.position.y = 500 * ( Math.random() - 0.5 );
|
|
mesh.position.z = 500 * ( Math.random() - 0.5 );
|
|
mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.25 * ( Math.random() + 0.5 );
|
|
mesh.overdraw = true;
|
|
mesh.updateMatrix();
|
|
scene.addObject(mesh);
|
|
|
|
}
|
|
|
|
// Lights
|
|
|
|
var ambient = new THREE.AmbientLight( 0x101010 );
|
|
scene.addLight( ambient );
|
|
|
|
directionalLight = new THREE.DirectionalLight( 0xffffff );
|
|
directionalLight.position.y = -70;
|
|
directionalLight.position.z = 100;
|
|
directionalLight.position.normalize();
|
|
scene.addLight( directionalLight );
|
|
|
|
pointLight = new THREE.PointLight( 0xffaa00 );
|
|
pointLight.position.x = 0;
|
|
pointLight.position.y = 0;
|
|
pointLight.position.z = 0;
|
|
scene.addLight( pointLight );
|
|
|
|
lightMesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
|
|
lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
|
|
lightMesh.position = pointLight.position;
|
|
lightMesh.overdraw = true;
|
|
lightMesh.updateMatrix();
|
|
scene.addObject(lightMesh);
|
|
|
|
|
|
if ( render_canvas ) {
|
|
|
|
canvasRenderer = new THREE.CanvasRenderer();
|
|
canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
|
|
container.appendChild( canvasRenderer.domElement );
|
|
|
|
}
|
|
|
|
if ( render_gl ) {
|
|
|
|
try {
|
|
|
|
webglRenderer = new THREE.WebGLRenderer( { scene: scene } );
|
|
webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
|
|
container.appendChild( webglRenderer.domElement );
|
|
|
|
has_gl = 1;
|
|
|
|
} catch (e) {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
stats = new Stats();
|
|
stats.domElement.style.position = 'absolute';
|
|
stats.domElement.style.top = '0px';
|
|
stats.domElement.style.zIndex = 100;
|
|
container.appendChild( stats.domElement );
|
|
|
|
bcanvas.addEventListener("click", toggleCanvas, false);
|
|
bwebgl.addEventListener("click", toggleWebGL, false);
|
|
|
|
|
|
var loader = new THREE.Loader();
|
|
//loader.loadAscii( "obj/torus/Torus_slim.js", function( geometry ) { createMesh( geometry ) } );
|
|
loader.loadBinary( "obj/torus/Torus_bin.js", function( geometry ) { createMesh( geometry ) }, "obj/torus" );
|
|
|
|
}
|
|
|
|
function createMesh( geometry ) {
|
|
|
|
zmesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0xffffff } ) );
|
|
zmesh.position.x = zmesh.position.y = zmesh.position.z = 0;
|
|
zmesh.scale.x = zmesh.scale.y = zmesh.scale.z = 100;
|
|
zmesh.overdraw = true;
|
|
zmesh.updateMatrix();
|
|
scene.addObject( zmesh );
|
|
|
|
}
|
|
|
|
|
|
function onDocumentMouseMove( event ) {
|
|
|
|
mouseX = ( event.clientX - windowHalfX );
|
|
mouseY = ( event.clientY - windowHalfY );
|
|
|
|
}
|
|
|
|
var r = 0;
|
|
|
|
function loop() {
|
|
|
|
camera.position.x += ( mouseX - camera.position.x ) * .05;
|
|
camera.position.y += ( - mouseY - camera.position.y ) * .05;
|
|
camera.updateMatrix();
|
|
|
|
|
|
for ( var i = 0, l = scene.objects.length; i < l; i ++ ) {
|
|
|
|
if ( i%3 == 1 )
|
|
|
|
scene.objects[i].rotation.x += 0.05;
|
|
|
|
else if ( i%3 == 2 )
|
|
|
|
scene.objects[i].rotation.y += 0.05;
|
|
|
|
else if ( i%3 == 0 )
|
|
|
|
scene.objects[i].rotation.z += 0.05;
|
|
|
|
scene.objects[i].updateMatrix();
|
|
}
|
|
|
|
|
|
lightMesh.position.x = 200*Math.cos(r);
|
|
lightMesh.position.z = 200*Math.sin(r);
|
|
lightMesh.updateMatrix();
|
|
|
|
r += 0.1;
|
|
|
|
if ( render_canvas ) canvasRenderer.render( scene, camera );
|
|
if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
|
|
|
|
stats.update();
|
|
|
|
}
|
|
|
|
function log(text) {
|
|
|
|
var e = document.getElementById("log");
|
|
e.innerHTML = text + "<br/>" + e.innerHTML;
|
|
|
|
}
|
|
|
|
function toggleCanvas() {
|
|
|
|
render_canvas = !render_canvas;
|
|
bcanvas.className = render_canvas ? "button" : "button inactive";
|
|
|
|
render_gl = !render_canvas;
|
|
bwebgl.className = render_gl ? "button" : "button inactive";
|
|
|
|
if( has_gl )
|
|
webglRenderer.domElement.style.display = render_gl ? "block" : "none";
|
|
|
|
canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
|
|
|
|
}
|
|
|
|
function toggleWebGL() {
|
|
|
|
render_gl = !render_gl;
|
|
bwebgl.className = render_gl ? "button" : "button inactive";
|
|
|
|
render_canvas = !render_gl;
|
|
bcanvas.className = render_canvas ? "button" : "button inactive";
|
|
|
|
if( has_gl )
|
|
webglRenderer.domElement.style.display = render_gl ? "block" : "none";
|
|
|
|
canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|