ソース掲示板




すべてから検索

キーワード   条件 表示 現行ログ 過去ログ トピックス 名前 本文
Three.js r57 で追加された THREE.GridHelper の使い方
日時: 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>
メンテナンス


日時: 2018/02/06 19:07
名前: lightbox