左ドラッグで回転します。

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

IE
中央ドラッグで拡大・縮小
右ドラッグ不可 : IE9/IE10 とも 

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











拡張子:txtvbswsfjsphpjavahtmlutf8sjis
<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>

拡張子:txtvbswsfjsphpjavahtmlutf8sjis
USER = {};
USER.camera = null;
USER.scene = null;
USER.renderer = null;
USER.controls = null;

USER.animate = function () {
	requestAnimationFrame( USER.animate );
	USER.controls.update();
}

USER.render = function() {
	USER.renderer.render( USER.scene, USER.camera );
}

USER.orbit = function() {

	USER.controls = new THREE.OrbitControls( USER.camera );
	USER.controls.addEventListener( 'change', USER.render );

}