ソース掲示板




すべてから検索

キーワード   条件 表示 現行ログ 過去ログ トピックス 名前 本文
Three.js HTML5 複数キュープの作成・削除・再構成
日時: 2013/03/01 14:24
名前: lightbox






<style type="text/css">
.bt {
	border: 0;
	width: 200px;
	height: 30px;
	text-align: center;
	font-size:14px; 
	font-weight: bold;
	cursor: pointer;
	background-color: #fff;
	margin: 4px 4px 4px 4px;
	color: #fff;
	background-image: url()
}
</style>
<input
	class="bt"
	type="button"
	value="再構成"
	onclick='new_cubes();'
/>
<input
	class="bt"
	type="button"
	value="全て削除"
	onclick='remove_all();'
/>
<div id="container"></div>

<script src="http://xxxxxx.xx/xxx/Three.js"></script>

<script>

var container;
var camera, scene, renderer;
var w = 760;
var h = 500;
var s = 1.2;
var speed = 0.0001;

var cubes = [];

init();
animate();

function init() {

	container = document.getElementById("container");

	camera = new THREE.OrthographicCamera(
		w * -1 * s,
		w * s,
		h * s,
		h * -1 * s,
		- 3000,
		1000
	);

	camera.position.x = 200;
	camera.position.y = 100;
	camera.position.z = 200;

	scene = new THREE.Scene();

	scene.add( camera );

	// 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 <= 20; i ++ ) {

		var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
		line.position.z = ( i * 50 ) - 500;
		scene.add( line );

		var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
		line.position.x = ( i * 50 ) - 500;
		line.rotation.y = 90 * Math.PI / 180;
		scene.add( line );

	}

	// Cubes

	new_cubes();

	// Lights

	var ambientLight = new THREE.AmbientLight( Math.random() * 0x10 );
	scene.add( 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.add( directionalLight );

	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.add( directionalLight );

	renderer = new THREE.CanvasRenderer();
	renderer.setSize( w, h );

	container.appendChild( renderer.domElement );

}

//

function animate() {

	requestAnimationFrame( animate );

	render();

}

function render() {

	var timer = new Date().getTime() * speed;

	camera.position.x = Math.cos( timer ) * 200;
	camera.position.z = Math.sin( timer ) * 200;
	camera.lookAt( scene.position );

	renderer.render( scene, camera );

}

function remove_all() {

	var len = cubes.length;

	if ( len != 0 ) {
		for( var i = 0; i < len; i++ ) {
			scene.remove( cubes[i] );
		}
		for( var i = len - 1; i >= 0; i-- ) {
			cubes.splice( i, 1 );
		}
	}
}

function new_cubes() {

	var len = cubes.length;

	if ( len == 0 ) { 

		var geometry = new THREE.CubeGeometry( 50, 50, 50 );
		var material = new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, overdraw: true } );

		for ( var i = 0; i < 100; i ++ ) {

			var cube = new THREE.Mesh( geometry, material );

			cube.scale.y = Math.floor( Math.random() * 2 + 1 );

			cube.position.x = Math.floor( ( Math.random() * 1000 - 500 ) / 50 ) * 50 + 25;
			cube.position.y = ( cube.scale.y * 50 ) / 2;
			cube.position.z = Math.floor( ( Math.random() * 1000 - 500 ) / 50 ) * 50 + 25;

			scene.add(cube);

			cubes.push(cube);

		}
	}
}
</script>
メンテナンス


日時: 2013/03/01 14:24
名前: lightbox