|
日時: 2018/02/06 19:49
名前: lightbox
|
拡張子:
<script type="text/javascript">
// 主となるライブラリを複数回ロードしない
if ( window['loadThree'] !== true ) {
window['loadThree'] = true;
document.write("<"+"script type=\"text/javascript\" src=\"http://lightbox.in.coocan.jp/three/three.min57.js\"></"+"script>");
}
</script>
<script type="text/javascript" src="http://lightbox.in.coocan.jp/three/OrbitControls.js"></script>
<script type="text/javascript">
var w = 600;
var h = 500;
// 変数から表示エリアを作成
document.write("<div id=\"three_area\" style='width:"+w+"px;height:"+h+"px;'></div>");
// お決まり『三種の神器』
var camera, scene, renderer;
var controls, cube;
// 環境作成
init();
// ループ処理
animate();
// ****************************************************************
// 表示環境の準備( 開始は animate )
// ****************************************************************
function init() {
camera = new THREE.PerspectiveCamera( 70, w / h, 1, 10000 );
camera.position.set( 0, 0, 500 );
// マウスコントロール( 左ドラッグ : 回転、中央ドラッグ : スケール、右ドラッグ : 位置変更 )
// ※ カメラ位置は変わっていません
controls = new THREE.OrbitControls( camera );
controls.autoRotate = true;
controls.autoRotateSpeed = 5; //default 2.0
controls.addEventListener( 'change', render );
scene = new THREE.Scene();
// キューブ
var geometry = new THREE.CubeGeometry( 200, 200, 200 );
for ( var i = 0; i < geometry.faces.length; i ++ ) {
geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
}
var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors } );
cube = new THREE.Mesh( geometry, material );
scene.add( cube );
renderer = new THREE.CanvasRenderer();
renderer.setSize( w, h );
document.getElementById("three_area").appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
controls.update();
}
function render() {
renderer.render( scene, camera );
}
</script>
|