コメント |
@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 |