mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-19 01:45:57 +10:00
alteredq
59bfd81150
Masking was real pain to get working with multiple render targets :/. Unfortunately this introduced dependencies on MaskPass.js and ShaderPass.js even for use cases that do not use masking. Bah, will need to figure out some better way for deployment.
277 lines
7.7 KiB
HTML
277 lines
7.7 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js webgl - lines - cubes - colors</title>
|
|
<meta charset="utf-8">
|
|
<style type="text/css">
|
|
body {
|
|
background-color: #000000;
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
a {
|
|
color:#0078ff;
|
|
}
|
|
|
|
#info {
|
|
position: absolute;
|
|
top: 10px; width: 100%;
|
|
color: #ffffff;
|
|
padding: 5px;
|
|
font-family: Monospace;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
z-index:100;
|
|
}
|
|
|
|
a {
|
|
color: orange;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
color: #0080ff;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="info">
|
|
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - color lines WebGL demo
|
|
[<a href="http://en.wikipedia.org/wiki/Hilbert_curve">Hilbert curve</a> thanks to <a href="http://www.openprocessing.org/visuals/?visualID=15599">Thomas Diewald</a>]
|
|
</div>
|
|
|
|
<script type="text/javascript" src="../build/Three.js"></script>
|
|
|
|
<script type="text/javascript" src="js/ShaderExtras.js"></script>
|
|
|
|
<script type="text/javascript" src="js/postprocessing/EffectComposer.js"></script>
|
|
<script type="text/javascript" src="js/postprocessing/MaskPass.js"></script>
|
|
<script type="text/javascript" src="js/postprocessing/RenderPass.js"></script>
|
|
<script type="text/javascript" src="js/postprocessing/ShaderPass.js"></script>
|
|
<script type="text/javascript" src="js/postprocessing/BloomPass.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 mouseX = 0, mouseY = 0,
|
|
|
|
windowHalfX = window.innerWidth / 2,
|
|
windowHalfY = window.innerHeight / 2,
|
|
|
|
camera, scene, renderer, material, composer;
|
|
|
|
init();
|
|
animate();
|
|
|
|
function init() {
|
|
|
|
var i, container;
|
|
|
|
container = document.createElement( 'div' );
|
|
document.body.appendChild( container );
|
|
|
|
camera = new THREE.Camera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
|
|
camera.position.z = 700;
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
renderer = new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1, antialias: false } );
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
renderer.autoClear = false;
|
|
|
|
container.appendChild( renderer.domElement );
|
|
|
|
var geometry = new THREE.Geometry(),
|
|
geometry2 = new THREE.Geometry(),
|
|
geometry3 = new THREE.Geometry(),
|
|
points = hilbert3D( new THREE.Vector3( 0,0,0 ), 200.0, 2, 0, 1, 2, 3, 4, 5, 6, 7 ),
|
|
colors = [], colors2 = [], colors3 = [];
|
|
|
|
for ( i = 0; i < points.length; i ++ ) {
|
|
|
|
geometry.vertices.push( new THREE.Vertex( points[ i ] ) );
|
|
|
|
colors[ i ] = new THREE.Color( 0xffffff );
|
|
colors[ i ].setHSV( 0.6, ( 200 + points[ i ].x ) / 400, 1.0 );
|
|
|
|
colors2[ i ] = new THREE.Color( 0xffffff );
|
|
colors2[ i ].setHSV( 0.3, 1.0, ( 200 + points[ i ].x ) / 400 );
|
|
|
|
colors3[ i ] = new THREE.Color( 0xffffff );
|
|
colors3[ i ].setHSV( i / points.length, 1.0, 1.0 );
|
|
|
|
}
|
|
|
|
geometry2.vertices = geometry3.vertices = geometry.vertices;
|
|
|
|
geometry.colors = colors;
|
|
geometry2.colors = colors2;
|
|
geometry3.colors = colors3;
|
|
|
|
// lines
|
|
|
|
material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 1, linewidth: 3 } );
|
|
|
|
var line, p, scale = 0.3, d = 225,
|
|
parameters = [ [ material, scale*1.5, [-d,0,0], geometry ],
|
|
[ material, scale*1.5, [0,0,0], geometry2 ],
|
|
[ material, scale*1.5, [d,0,0], geometry3 ] ];
|
|
|
|
material.vertexColors = true;
|
|
|
|
for ( i = 0; i < parameters.length; ++i ) {
|
|
|
|
p = parameters[ i ];
|
|
line = new THREE.Line( p[ 3 ], p[ 0 ] );
|
|
line.scale.x = line.scale.y = line.scale.z = p[ 1 ];
|
|
line.position.x = p[ 2 ][ 0 ];
|
|
line.position.y = p[ 2 ][ 1 ];
|
|
line.position.z = p[ 2 ][ 2 ];
|
|
scene.addObject( line );
|
|
|
|
}
|
|
|
|
//
|
|
|
|
stats = new Stats();
|
|
stats.domElement.style.position = 'absolute';
|
|
stats.domElement.style.top = '0px';
|
|
//container.appendChild( stats.domElement );
|
|
|
|
//
|
|
|
|
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
|
|
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
|
|
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
|
|
|
|
//
|
|
|
|
var renderModel = new THREE.RenderPass( scene, camera );
|
|
var effectBloom = new THREE.BloomPass( 1.3 );
|
|
var effectScreen = new THREE.ShaderPass( THREE.ShaderExtras[ "screen" ] );
|
|
|
|
effectScreen.renderToScreen = true;
|
|
|
|
composer = new THREE.EffectComposer( renderer );
|
|
|
|
composer.addPass( renderModel );
|
|
composer.addPass( effectBloom );
|
|
composer.addPass( effectScreen );
|
|
|
|
}
|
|
|
|
// port of Processing Java code by Thomas Diewald
|
|
// http://www.openprocessing.org/visuals/?visualID=15599
|
|
|
|
function hilbert3D( center, side, iterations, v0, v1, v2, v3, v4, v5, v6, v7 ) {
|
|
|
|
var half = side / 2,
|
|
|
|
vec_s = [
|
|
|
|
new THREE.Vector3( center.x - half, center.y + half, center.z - half ),
|
|
new THREE.Vector3( center.x - half, center.y + half, center.z + half ),
|
|
new THREE.Vector3( center.x - half, center.y - half, center.z + half ),
|
|
new THREE.Vector3( center.x - half, center.y - half, center.z - half ),
|
|
new THREE.Vector3( center.x + half, center.y - half, center.z - half ),
|
|
new THREE.Vector3( center.x + half, center.y - half, center.z + half ),
|
|
new THREE.Vector3( center.x + half, center.y + half, center.z + half ),
|
|
new THREE.Vector3( center.x + half, center.y + half, center.z - half )
|
|
|
|
],
|
|
|
|
vec = [ vec_s[ v0 ], vec_s[ v1 ], vec_s[ v2 ], vec_s[ v3 ], vec_s[ v4 ], vec_s[ v5 ], vec_s[ v6 ], vec_s[ v7 ] ];
|
|
|
|
if( --iterations >= 0 ) {
|
|
|
|
var tmp = [];
|
|
|
|
tmp = tmp.concat( hilbert3D ( vec[ 0 ], half, iterations, v0, v3, v4, v7, v6, v5, v2, v1 ) );
|
|
tmp = tmp.concat( hilbert3D ( vec[ 1 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
|
|
tmp = tmp.concat( hilbert3D ( vec[ 2 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
|
|
tmp = tmp.concat( hilbert3D ( vec[ 3 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) );
|
|
tmp = tmp.concat( hilbert3D ( vec[ 4 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) );
|
|
tmp = tmp.concat( hilbert3D ( vec[ 5 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
|
|
tmp = tmp.concat( hilbert3D ( vec[ 6 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
|
|
tmp = tmp.concat( hilbert3D ( vec[ 7 ], half, iterations, v6, v5, v2, v1, v0, v3, v4, v7 ) );
|
|
|
|
return tmp;
|
|
|
|
}
|
|
|
|
return vec;
|
|
}
|
|
|
|
//
|
|
|
|
function onDocumentMouseMove( event ) {
|
|
|
|
mouseX = event.clientX - windowHalfX;
|
|
mouseY = event.clientY - windowHalfY;
|
|
|
|
}
|
|
|
|
function onDocumentTouchStart( event ) {
|
|
|
|
if ( event.touches.length > 1 ) {
|
|
|
|
event.preventDefault();
|
|
|
|
mouseX = event.touches[ 0 ].pageX - windowHalfX;
|
|
mouseY = event.touches[ 0 ].pageY - windowHalfY;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function onDocumentTouchMove( event ) {
|
|
|
|
if ( event.touches.length == 1 ) {
|
|
|
|
event.preventDefault();
|
|
|
|
mouseX = event.touches[ 0 ].pageX - windowHalfX;
|
|
mouseY = event.touches[ 0 ].pageY - windowHalfY;
|
|
}
|
|
|
|
}
|
|
|
|
//
|
|
|
|
function animate() {
|
|
|
|
requestAnimationFrame( animate );
|
|
render();
|
|
|
|
}
|
|
|
|
function render() {
|
|
|
|
camera.position.x += ( mouseX - camera.position.x ) * .05;
|
|
camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
|
|
|
|
var time = new Date().getTime() * 0.0005;
|
|
|
|
for( var i = 0; i < scene.objects.length; i ++ ) {
|
|
|
|
scene.objects[ i ].rotation.y = time * ( i % 2 ? 1 : -1 );
|
|
|
|
}
|
|
|
|
renderer.clear();
|
|
composer.render();
|
|
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|