ソース掲示板




すべてから検索

キーワード   条件 表示 現行ログ 過去ログ トピックス 名前 本文
Three.js ( Canvas ) : テクスチャキューブ
日時: 2013/03/30 15:48
名前: lightbox







<script type="text/javascript" src="http://homepage2.nifty.com/lightbox/three/three.min57.js"></script>
<script type="text/javascript" src="http://homepage2.nifty.com/lightbox/three/user_play1.js"></script>
<script type="text/javascript"> 
 
var camera, scene, renderer; 
var user_play; 
 
// 表示エリア作成 
document.write("<div id=\"three_area\" style='width:700px;height:700px;background-color:#000;'></div>"); 
 
// 処理開始 
build_3d_world(); 
 
function build_3d_world() { 
 
	// カメラ 
	camera = new THREE.PerspectiveCamera( 70, 700 / 700, 1, 10000 ); 
 
	// シーン 
	scene = new THREE.Scene(); 

	// 別ドメインの場合必要です
	THREE.ImageUtils.crossOrigin = null;
 
	var map = THREE.ImageUtils.loadTexture( "http://homepage2.nifty.com/lightbox/three/crate.gif" );
	map.wrapS = map.wrapT = THREE.RepeatWrapping = 1000;
	map.repeat.set( 1, 3 );

	materials = [
		new THREE.MeshLambertMaterial( { ambient: 0xbbbbbb, map: map, side: THREE.DoubleSide } ),
		new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true, transparent: true, opacity: 0.1, side: THREE.DoubleSide } )
	];

	object = THREE.SceneUtils.createMultiMaterialObject( new THREE.CubeGeometry( 100, 100, 100, 4, 4, 4 ), materials );
	object.position.set( 0, 0, 0 );
	scene.add( object );
 
	// レンダラー 
	renderer = new THREE.CanvasRenderer(); 
	renderer.setSize( 700, 700 ); 
 
	// 実装 
	document.getElementById("three_area").appendChild( renderer.domElement ); 
 
	// アニメーション 
	user_play = new THREE.UserPlay1( scene, camera, renderer, animate, 150 ); 
	user_play.start(); 
 
} 
// ループ処理 
function animate() { 
 
	requestAnimationFrame( animate ); 
	user_play.render(); 
 
} 
 
</script>
メンテナンス

THREE.UserPlay1 ( No.1 )
日時: 2013/03/30 15:51
名前: lightbox


日時: 2013/03/30 15:51
名前: lightbox
THREE.UserPlay1 = function ( scene, camera, renderer, animate, radius ) {

	this.scene = scene;
	this.camera = camera;
	this.renderer = renderer;
	this.radius = ( radius !== undefined ) ? radius : 600;

	this.theta = 0
	this.animate = animate;


};
THREE.UserPlay1.prototype = {
	constructor: THREE.UserPlay1,
	start: function() {
		this.animate();
	},
	render: function() {
		this.theta += 0.1;

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

		this.camera.lookAt( this.scene.position );
		this.renderer.render( this.scene, this.camera );
	}

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