mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-09 13:06:01 +10:00
alteredq
ecad27eb11
Code is still rough around edges (it can be made nicer), though it should already produce one-to-one results with ubershader. Side-effect is that scene is no longer required as WebGLRenderer constructor parameter. Shader programs are now constructed upon first frame render and only then scene lights are examined.
123 lines
2.8 KiB
HTML
123 lines
2.8 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js - grass</title>
|
|
<meta charset="utf-8">
|
|
<style type="text/css">
|
|
body {
|
|
background:#030;
|
|
color:#fff;
|
|
padding:0;
|
|
margin:0;
|
|
overflow:hidden;
|
|
font-family:georgia;
|
|
text-align:center;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<script type="text/javascript" src="../build/Three.js"></script>
|
|
<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
var camera, scene, renderer,
|
|
mesh, levels = [];
|
|
|
|
init();
|
|
setInterval( loop, 1000 / 60 );
|
|
|
|
function init() {
|
|
|
|
camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
|
|
camera.position.y = 75;
|
|
camera.position.z = 100;
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
var geometry = new Plane( 100, 100 );
|
|
|
|
var texture = generateTextureBase();
|
|
|
|
for ( var i = 0; i < 10; i ++ ) {
|
|
|
|
mesh = levels[ i ] = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: new THREE.Texture( generateTextureLevel( texture ), new THREE.UVMapping(), THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping ) } ) );
|
|
mesh.rotation.x = - 90 * ( Math.PI / 180 );
|
|
mesh.position.y = i * 0.5;
|
|
scene.addObject( mesh );
|
|
|
|
}
|
|
|
|
renderer = new THREE.WebGLRenderer();
|
|
renderer.sortObjects = false;
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
document.body.appendChild( renderer.domElement );
|
|
|
|
}
|
|
|
|
function generateTextureBase() {
|
|
|
|
var canvas = document.createElement( 'canvas' );
|
|
canvas.loaded = true;
|
|
canvas.width = 1024;
|
|
canvas.height = 1024;
|
|
|
|
var context = canvas.getContext( '2d' );
|
|
|
|
for ( var i = 0; i < 20000; i ++ ) {
|
|
|
|
context.fillStyle = 'rgba(0,' + Math.floor( Math.random() * 64 + 32 ) + ',16,1)';
|
|
context.beginPath();
|
|
context.arc( Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 3 + 1, 0, Math.PI * 2, true );
|
|
context.closePath();
|
|
context.fill();
|
|
|
|
}
|
|
|
|
context.globalAlpha = 0.1;
|
|
context.globalCompositeOperation = 'lighter';
|
|
|
|
return canvas;
|
|
}
|
|
|
|
function generateTextureLevel( texture ) {
|
|
|
|
texture.getContext( '2d' ).drawImage( texture, 0, 0 );
|
|
|
|
var canvas = document.createElement( 'canvas' );
|
|
canvas.loaded = true;
|
|
canvas.width = texture.width;
|
|
canvas.height = texture.height;
|
|
|
|
canvas.getContext( '2d' ).drawImage( texture, 0, 0 );
|
|
|
|
return canvas;
|
|
|
|
}
|
|
|
|
function loop() {
|
|
|
|
var time = new Date().getTime() / 6000;
|
|
|
|
camera.position.x = 100 * Math.cos( time );
|
|
camera.position.z = 100 * Math.sin( time );
|
|
|
|
for ( var i = 0, l = levels.length; i < l; i ++ ) {
|
|
|
|
mesh = levels[ i ];
|
|
mesh.position.x = Math.sin( time * 4 ) * i * i * 0.02;
|
|
mesh.position.z = Math.cos( time * 6 ) * i * i * 0.02;
|
|
|
|
}
|
|
|
|
renderer.render( scene, camera );
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|