ソース掲示板




すべてから検索

キーワード   条件 表示 現行ログ 過去ログ トピックス 名前 本文

  メンテナンス 前画面に戻る

対象スレッド 件名: Three.js ( Canvas ) : テクスチャキューブ
名前: lightbox
処理選択
パスワード

件名 Three.js ( Canvas ) : テクスチャキューブ
名前 lightbox
コメント
@HTML
<script type="text/javascript" src="http://lightbox.in.coocan.jp/three/three.min57.js"></script>
<script type="text/javascript" src="http://lightbox.in.coocan.jp/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://lightbox.in.coocan.jp/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>
@HEND
@DIV
<script type="text/javascript" src="http://lightbox.in.coocan.jp/three/three.min57.js"></script>
<script type="text/javascript" src="http://lightbox.in.coocan.jp/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(); 

	@C:#ff0000(// 別ドメインの場合必要です
	THREE.ImageUtils.crossOrigin = null;)
 
	var map = THREE.ImageUtils.loadTexture( "http://lightbox.in.coocan.jp/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>
@END