ソース掲示板




すべてから検索

キーワード   条件 表示 現行ログ 過去ログ トピックス 名前 本文
Three.js( Canvas用 ) でカメラがオブジェクトのまわりを回るテンプレート
日時: 2018/02/06 19:02
名前: <b style='color:red'>loghtbox</b>



拡張子:
<script type="text/javascript" src="http://lightbox.in.coocan.jp/three/three.min56.js"></script>
<div id="three_area" style='width:600px;height:500px;'></div>

<script type="text/javascript">
// WebGL チェック
//if( !( function () { try { return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( //'experimental-webgl' ); } catch( e ) { return false; } } )() ) {
//	document.write("<span style='font-weight:bold;font-size:30px;'>WebGLが使用できません</span>");
//	document.getElementById("three_area").style.display = 'none';
//}

// Three.js の名前空間でオブジェクト作成
THREE.UserCubes1 = function ( scene, cubeSize, cubeNum, displaySpan ) {

	// キューブの基本サイズ( 見た目は後でスケールで変化する )
	this.cubeSize = ( cubeSize !== undefined ) ? cubeSize : 20;
	// キューブの数
	this.cubeNum = ( cubeNum !== undefined ) ? cubeNum : 100;
	// 表示幅( 発生させる座標の範囲の長さ )
	this.displaySpan = ( displaySpan !== undefined ) ? displaySpan : 800;

	this.geometry = new THREE.CubeGeometry( this.cubeSize, this.cubeSize, this.cubeSize );
	this.objects = [];

	for ( var i = 0; i < this.cubeNum; i ++ ) {

		var object = new THREE.Mesh(
			this.geometry,
			new THREE.MeshBasicMaterial( {
				color: Math.random() * 0xffffff,
				transparent: true,
				opacity: 0.5 }
			)
		);

		// 正座標に発生させて、原点に半分戻す
		object.position.x = Math.random() * this.displaySpan - this.displaySpan/2;
		object.position.y = Math.random() * this.displaySpan - this.displaySpan/2;
		object.position.z = Math.random() * this.displaySpan - this.displaySpan/2;

		object.scale.x = Math.random() * 2 + 1;
		object.scale.y = Math.random() * 2 + 1;
		object.scale.z = Math.random() * 2 + 1;

		// 向きを360度ランダム
		object.rotation.x = Math.random() * 2 * Math.PI;
		object.rotation.y = Math.random() * 2 * Math.PI;
		object.rotation.z = Math.random() * 2 * Math.PI;

		this.objects.push( object );
		scene.add( object );

	}

};


var w = 600;
var h = 500;

var camera, scene, renderer;

init();
animate();

function init() {

	// カメラ作成
	camera = new THREE.PerspectiveCamera( 70, w / h, 1, 10000 );
	camera.position.set( 0, 300, 500 );

	// シーン作成
	scene = new THREE.Scene();

	// メインオブジェクト作成
	var UserCubes = new THREE.UserCubes1( scene );

	// レンダラー作成
	renderer = new THREE.CanvasRenderer();
	renderer.setSize( w, h );

	// 配置
	document.getElementById("three_area").appendChild( renderer.domElement );

}

function animate() {

	requestAnimationFrame( animate );
	render();

}

var radius = 600;
var theta = 0;

function render() {

	theta += 0.1;

	camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
	camera.position.y = radius * Math.sin( THREE.Math.degToRad( theta ) );
	camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
	camera.lookAt( scene.position );

	renderer.render( scene, camera );

}

</script>
メンテナンス

複数キューブ作成部分を汎用的にオブジェクト化 ( No.1 )
日時: 2018/02/06 19:02
名前: lightbox


日時: 2018/02/06 19:02
名前: lightbox
拡張子:
<script type="text/javascript" src="http://lightbox.in.coocan.jp/three/three.min56.js"></script>
<input type="button" value="削除" onclick='UserCubes.remove();' /> 
<input type="button" value="作成" onclick='UserCubes.renew();' /> 
<div id="three_area" style='width:600px;height:500px;'></div>

<script type="text/javascript">
// WebGL チェック
//if( !( function () { try { return !! window.WebGLRenderingContext && !! //document.createElement( 'canvas' ).getContext( 'experimental-webgl' ); } catch( e ) { return false; } } )() ) {
//	document.write("<span style='font-weight:bold;font-size:30px;'>WebGLが使用できません</span>");
//	document.getElementById("three_area").style.display = 'none';
//}

// Three.js の名前空間でオブジェクト作成
THREE.UserCubes1 = function ( scene, cubeSize, cubeNum, displaySpan ) {

	// キューブの基本サイズ( 見た目は後でスケールで変化する )
	this.cubeSize = ( cubeSize !== undefined ) ? cubeSize : 20;
	// キューブの数
	this.cubeNum = ( cubeNum !== undefined ) ? cubeNum : 100;
	// 表示幅( 発生させる座標の範囲の長さ )
	this.displaySpan = ( displaySpan !== undefined ) ? displaySpan : 800;

	this.geometry = new THREE.CubeGeometry( this.cubeSize, this.cubeSize, this.cubeSize );
	this.group = null
	this.scene = scene;

	this.renew();

};
THREE.UserCubes1.prototype = {
	constructor: THREE.UserCubes1,
	remove: function() {
		this.scene.remove( this.group )
		this.group = null;
	},
	renew: function() {
		if ( this.group == null ) {
			this.group = new THREE.Object3D();
			this.scene.add( this.group );
		}
		for ( var i = 0; i < this.cubeNum; i ++ ) {

			var object = new THREE.Mesh(
				this.geometry,
				new THREE.MeshBasicMaterial( {
					color: Math.random() * 0xffffff,
					transparent: true,
					opacity: 0.5 }
				)
			);

			// 正座標に発生させて、原点に半分戻す
			object.position.x = Math.random() * this.displaySpan - this.displaySpan/2;
			object.position.y = Math.random() * this.displaySpan - this.displaySpan/2;
			object.position.z = Math.random() * this.displaySpan - this.displaySpan/2;

			object.scale.x = Math.random() * 2 + 1;
			object.scale.y = Math.random() * 2 + 1;
			object.scale.z = Math.random() * 2 + 1;

			// 向きを360度ランダム
			object.rotation.x = Math.random() * 2 * Math.PI;
			object.rotation.y = Math.random() * 2 * Math.PI;
			object.rotation.z = Math.random() * 2 * Math.PI;

			this.group.add( object )

		}
	
	}
}

var w = 600;
var h = 500;

var camera, scene, renderer;
var UserCubes;

init();
animate();

function init() {

	// カメラ作成
	camera = new THREE.PerspectiveCamera( 70, w / h, 1, 10000 );
	camera.position.set( 0, 300, 500 );

	// シーン作成
	scene = new THREE.Scene();

	// メインオブジェクト作成
	UserCubes = new THREE.UserCubes1( scene );

	// レンダラー作成
	renderer = new THREE.CanvasRenderer();
	renderer.setSize( w, h );

	// 配置
	document.getElementById("three_area").appendChild( renderer.domElement );

}

function animate() {

	requestAnimationFrame( animate );
	render();

}

var radius = 600;
var theta = 0;

function render() {

	theta += 0.1;

	camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
	camera.position.y = radius * Math.sin( THREE.Math.degToRad( theta ) );
	camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
	camera.lookAt( scene.position );

	renderer.render( scene, camera );

}

</script>
このアーティクルの参照用URLをクリップボードにコピー メンテナンス