mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-20 10:25:56 +10:00
alteredq
0163e4f2f5
It's commented out, as it breaks shader validation in current Chrome :(. There seems to be some bug in Chrome / ANGLE making it barf when using "gl_FragCoord" in fragment shader. Curiously, while it breaks both 9.0.576.0 dev channel and latest continuous build 9.0.583.0, it does work fine in canary build with the same version as dev channel (9.0.576.0). Go figure. Also in Firefox 4 beta 7 it works fine. It seems there were some recent changes in handling of "gl_FragCoord" on Windows which probably broke something when fixing other bug: http://code.google.com/p/chromium/issues/detail?id=59762 http://code.google.com/p/angleproject/issues/detail?id=71 TODO: make isolated test case and submit bug report (if this doesn't go away in next Chrome update).
265 lines
7.4 KiB
HTML
265 lines
7.4 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js - depth material</title>
|
|
<meta charset="utf-8">
|
|
<style type="text/css">
|
|
body {
|
|
font-family: Monospace;
|
|
background-color: #000000;
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<script type="text/javascript" src="../build/Three.js"></script>
|
|
|
|
<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
|
|
<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
|
|
|
|
<script type="text/javascript" src="js/Stats.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var SCREEN_WIDTH = window.innerWidth;
|
|
var SCREEN_HEIGHT = window.innerHeight;
|
|
|
|
var container;
|
|
var stats;
|
|
|
|
var camera;
|
|
var scene;
|
|
var renderer;
|
|
|
|
var cube, plane;
|
|
|
|
var targetRotation = 0;
|
|
var targetRotationOnMouseDown = 0;
|
|
|
|
var mouseX = 0;
|
|
var mouseXOnMouseDown = 0;
|
|
|
|
var windowHalfX = window.innerWidth / 2;
|
|
var windowHalfY = window.innerHeight / 2;
|
|
|
|
var moveForward = false,
|
|
moveBackwards = false,
|
|
moveUp = false,
|
|
moveDown = false,
|
|
moveLeft = false,
|
|
moveRight = false,
|
|
|
|
yawLeft = false,
|
|
yawRight = false,
|
|
pitchUp = false,
|
|
pitchDown = false,
|
|
rollLeft = false,
|
|
rollRight = false;
|
|
|
|
var debugContext;
|
|
|
|
init();
|
|
setInterval( loop, 1000 / 60 );
|
|
// loop();
|
|
|
|
function init() {
|
|
|
|
container = document.createElement( 'div' );
|
|
document.body.appendChild( container );
|
|
|
|
camera = new THREE.Camera( 45, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 2000 );
|
|
camera.position.x = 1000;
|
|
camera.position.y = 1000;
|
|
camera.position.z = 1000;
|
|
// camera.target.position.y = 150;
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
// Plane
|
|
|
|
var material = new THREE.MeshDepthMaterial( { near: 1, far: 2000, wireframe: true } );
|
|
|
|
plane = new THREE.Mesh( new Plane( 1000, 1000, 10, 10 ), material );
|
|
plane.rotation.x = - 90 * ( Math.PI / 180 );
|
|
plane.doubleSided = true;
|
|
scene.addObject( plane );
|
|
|
|
// Spheres
|
|
|
|
geometry = new Sphere( 100, 16, 8 );
|
|
//material = new THREE.MeshLambertMaterial( { color: 0xffffff } );
|
|
material = new THREE.MeshDepthMaterial( { near: 1, far: 2000 } );
|
|
|
|
for (var i = 0; i < 20; i ++ ) {
|
|
|
|
cube = new THREE.Mesh( geometry, material );
|
|
cube.overdraw = true;
|
|
|
|
cube.position.x = ( i % 5 ) * 200 - 400;
|
|
cube.position.z = Math.floor( i / 5 ) * 200 - 400;
|
|
|
|
/*
|
|
cube.position.x = Math.random() * 1000 - 500;
|
|
cube.position.y = Math.random() * 1000 - 500;
|
|
cube.position.z = Math.random() * 1000 - 500;
|
|
|
|
cube.rotation.x = Math.random() * 200 - 100;
|
|
cube.rotation.y = Math.random() * 200 - 100;
|
|
cube.rotation.z = Math.random() * 200 - 100;
|
|
cube.scale.x = cube.scale.y = cube.scale.z = Math.random() + 0.5;
|
|
*/
|
|
|
|
scene.addObject(cube);
|
|
|
|
}
|
|
|
|
// Lights
|
|
|
|
var ambientLight = new THREE.AmbientLight( Math.random() * 0x202020 );
|
|
scene.addLight( ambientLight );
|
|
|
|
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 );
|
|
|
|
var pointLight = new THREE.PointLight( 0xff0000, 1 );
|
|
scene.addLight( pointLight );
|
|
|
|
renderer = new THREE.CanvasRenderer();
|
|
//renderer = new THREE.WebGLRenderer();
|
|
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
|
|
|
|
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 = '#808080';
|
|
|
|
stats = new Stats();
|
|
stats.domElement.style.position = 'absolute';
|
|
stats.domElement.style.top = '0px';
|
|
container.appendChild(stats.domElement);
|
|
|
|
document.addEventListener( 'keydown', onDocumentKeyDown, false );
|
|
document.addEventListener( 'keyup', onDocumentKeyUp, false );
|
|
}
|
|
|
|
function onDocumentKeyDown( event ) {
|
|
|
|
switch( event.keyCode ) {
|
|
|
|
case 38: moveForward = true; break; // up
|
|
case 40: moveBackwards = true; break; // down
|
|
case 37: moveLeft = true; break; // left
|
|
case 39: moveRight = true; break; // right
|
|
case 65: yawLeft = true; break; // a
|
|
case 68: yawRight = true; break; // d
|
|
case 87: moveUp/*pitchUp*/ = true; break; // w
|
|
case 83: moveDown/*pitchDown*/ = true; break; // s
|
|
case 90: rollLeft = true; break; // z
|
|
case 67: rollRight = true; break; // c
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function onDocumentKeyUp( event ) {
|
|
|
|
switch( event.keyCode ) {
|
|
|
|
case 38: moveForward = false; break; // up
|
|
case 40: moveBackwards = false; break; // down
|
|
case 37: moveLeft = false; break; // left
|
|
case 39: moveRight = false; break; // right
|
|
case 65: yawLeft = false; break; // a
|
|
case 68: yawRight = false; break; // d
|
|
case 87: moveUp/*pitchUp*/ = false; break; // w
|
|
case 83: moveDown/*pitchDown*/ = false; break; // s
|
|
case 90: rollLeft = false; break; // z
|
|
case 67: rollRight = false; break; // c
|
|
|
|
}
|
|
|
|
}
|
|
|
|
//
|
|
|
|
function loop() {
|
|
|
|
if ( moveForward ) camera.position.z -= 5; // camera.moveZ( 5 );
|
|
if ( moveBackwards ) camera.position.z += 5; // camera.moveZ( - 5 );
|
|
|
|
if ( moveUp ) camera.position.y += 5; // camera.moveZ( 5 );
|
|
if ( moveDown ) camera.position.y -= 5; // camera.moveZ( - 5 );
|
|
|
|
if ( moveLeft ) camera.position.x -= 5; // camera.moveX( - 5 );
|
|
if ( moveRight ) camera.position.x += 5; // camera.moveX( 5 );
|
|
|
|
if ( pitchUp ) camera.rotation.x += 0.01; // camera.rotateX( 1 );
|
|
if ( pitchDown ) camera.rotation.x -= 0.01; // camera.rotateX( - 1 );
|
|
|
|
if ( yawLeft ) camera.target.position.x -= 5; // camera.rotation.y += 0.01; // camera.rotateY( 1 );
|
|
if ( yawRight ) camera.target.position.x += 5; // camera.rotation.y -= 0.01; // camera.rotateY( - 1 );
|
|
|
|
if ( rollLeft ) camera.rotation.z += 0.01; // camera.rotateZ( 1 );
|
|
if ( rollRight ) camera.rotation.z -= 0.01; // camera.rotateZ( - 1 );
|
|
|
|
debugContext.clearRect( -256, -256, 512, 512 );
|
|
|
|
debugContext.beginPath();
|
|
|
|
// center
|
|
debugContext.moveTo( -10, 0 );
|
|
debugContext.lineTo( 10, 0 );
|
|
debugContext.moveTo( 0, -10 );
|
|
debugContext.lineTo( 0, 10 );
|
|
|
|
// camera
|
|
|
|
debugContext.moveTo( camera.position.x * 0.1, camera.position.z * 0.1 );
|
|
debugContext.lineTo( camera.target.position.x * 0.1, camera.target.position.z * 0.1 );
|
|
debugContext.rect( camera.position.x * 0.1 - 5, camera.position.z * 0.1 - 5, 10, 10 );
|
|
debugContext.rect( camera.target.position.x * 0.1 - 5, camera.target.position.z * 0.1 - 5, 10, 10 );
|
|
debugContext.rect( - 50, - 50, 100, 100 );
|
|
|
|
for ( var i = 1; i < scene.objects.length; i++ ) {
|
|
|
|
var object = scene.objects[i];
|
|
|
|
/*
|
|
object.rotation.x += 0.01;
|
|
object.rotation.y += 0.005;
|
|
object.position.y = Math.sin( object.rotation.x ) * 200;
|
|
*/
|
|
|
|
debugContext.rect( object.position.x * 0.1 - 5, object.position.z * 0.1 - 5, 10, 10 );
|
|
|
|
}
|
|
|
|
debugContext.closePath();
|
|
debugContext.stroke();
|
|
|
|
renderer.render(scene, camera);
|
|
|
|
stats.update();
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|