|
日時: 2018/02/06 19:07
名前: 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">
var w = 600;
var h = 500;
// 変数から表示エリアを作成
document.write("<div id=\"three_area\" style='width:"+w+"px;height:"+h+"px;'></div>");
// お決まり『三種の神器』
var camera, scene, renderer;
// 環境作成
init();
// ループ処理
animate();
// ****************************************************************
// 表示環境の準備( 開始は animate )
// ****************************************************************
function init() {
camera = new THREE.PerspectiveCamera( 70, w / h, 1, 10000 );
camera.position.set( 0, 0, 0 );
scene = new THREE.Scene();
// size == step で4つの正方形ができます
// その際、一辺は size x 2 のサイズになります
// ( step は、小さい正方形の一辺です )
// ステップの倍数が size にならないと、正しく描画されません
var grid = new THREE.GridHelper( 300, 50 );
// 色変更
grid.material.color = new THREE.Color( 0x000000 );
scene.add( grid );
renderer = new THREE.CanvasRenderer();
renderer.setSize( w, h );
document.getElementById("three_area").appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
render();
console.log("ok");
}
var radius = 600;
var theta = 0;
function render() {
theta += 0.1;
camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
camera.position.y = radius * Math.sin( THREE.Math.degToRad( theta ) );
camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
</script>
|