ソース掲示板




すべてから検索

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

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

対象スレッド 件名: Three.js 簡単キューブ
名前: lightbox
処理選択
パスワード

件名 Three.js 簡単キューブ
名前 lightbox
コメント
@SHOW
[[左ドラッグ]]で回転します。

[[Google Chrome]]
このページは、スクロールするので、SHIFT キーを押しながら[[マウスホイールを動かす]]と、拡大・縮小します。
中央ドラッグでも拡大・縮小
[[右ドラッグ]]で移動

[[IE]]
中央ドラッグで拡大・縮小
@C:red(右ドラッグ不可 : IE9/IE10 とも )

[[Firefox]]
中央ドラッグでも拡大・縮小するが、スクロールもしてしまう
[[右ドラッグ]]で移動
@END

@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/OrbitControls.js"></script>
<script type="text/javascript" src="http://lightbox.in.coocan.jp/three/user_three.js"></script>

<div id="three_area" style='width:600px;height:400px;border: solid #000000 1px;'></div>

<script>

	var w = 600;
	var h = 400;

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

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

	// キューブ作成
	var geometry = new THREE.CubeGeometry( 200, 200, 200 );

	geometry.faces[ 0 ].color.setHex( 0x40c0c0 ); // 面の色設定
	geometry.faces[ 1 ].color.setHex( 0xc040c0 );
	geometry.faces[ 2 ].color.setHex( 0xc0c040 );
	geometry.faces[ 3 ].color.setHex( 0xa0c0c0 );
	geometry.faces[ 4 ].color.setHex( 0xc0a0c0 );
	geometry.faces[ 5 ].color.setHex( 0xc0c0a0 );

	var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors } );
	var cube = new THREE.Mesh( geometry, material );
	cube.position.set( 0, 0, 0 )
	USER.scene.add( cube );

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

	// 表示エリア設定
	document.getElementById("three_area").appendChild( USER.renderer.domElement );

	// コントロール作成
	USER.orbit();
	USER.controls.autoRotate = true;
	USER.controls.autoRotateSpeed = 2; //default 2.0

	// アニメーション開始
	USER.animate();

</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/OrbitControls.js"></script>
<script type="text/javascript" src="http://lightbox.in.coocan.jp/three/user_three.js"></script>

<div id="three_area" style='width:600px;height:400px;border: solid #000000 1px;'></div>

<script>

	var w = 600;
	var h = 400;

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

	// シーン作成
	@C:red(USER).scene = new THREE.Scene();

	// キューブ作成
	var geometry = new THREE.CubeGeometry( 200, 200, 200 );

	geometry.faces[ 0 ].color.setHex( 0x40c0c0 ); // 面の色設定
	geometry.faces[ 1 ].color.setHex( 0xc040c0 );
	geometry.faces[ 2 ].color.setHex( 0xc0c040 );
	geometry.faces[ 3 ].color.setHex( 0xa0c0c0 );
	geometry.faces[ 4 ].color.setHex( 0xc0a0c0 );
	geometry.faces[ 5 ].color.setHex( 0xc0c0a0 );

	var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors } );
	var cube = new THREE.Mesh( geometry, material );
	cube.position.set( 0, 0, 0 )
	@C:red(USER).scene.add( cube );

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

	// 表示エリア設定
	document.getElementById("three_area").appendChild( @C:red(USER).renderer.domElement );

	// コントロール作成
	@C:red(USER).orbit();
	@C:red(USER).controls.autoRotate = true;
	@C:red(USER).controls.autoRotateSpeed = 2; //default 2.0

	// アニメーション開始
	@C:red(USER).animate();

</script>
@END