コメント |
@HTML
<script type="text/javascript" src="http://lightbox.in.coocan.jp/three/three.min56.js"></script><div id="three_area" style='width:600px;height:500px;'></div><script type="text/javascript">
// WebGL チェック
//if( !( function () { try { return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( //'experimental-webgl' ); } catch( e ) { return false; } } )() ) {
// document.write("<span style='font-weight:bold;font-size:30px;'>WebGLが使用できません</span>");
// document.getElementById("three_area").style.display = 'none';
//}
// Three.js の名前空間でオブジェクト作成
THREE.UserCubes1 = function ( scene, cubeSize, cubeNum, displaySpan ) {
// キューブの基本サイズ( 見た目は後でスケールで変化する )
this.cubeSize = ( cubeSize !== undefined ) ? cubeSize : 20;
// キューブの数
this.cubeNum = ( cubeNum !== undefined ) ? cubeNum : 100;
// 表示幅( 発生させる座標の範囲の長さ )
this.displaySpan = ( displaySpan !== undefined ) ? displaySpan : 800;
this.geometry = new THREE.CubeGeometry( this.cubeSize, this.cubeSize, this.cubeSize );
this.objects = [];
for ( var i = 0; i < this.cubeNum; i ++ ) {
var object = new THREE.Mesh(
this.geometry,
new THREE.MeshBasicMaterial( {
color: Math.random() * 0xffffff,
transparent: true,
opacity: 0.5 }
)
);
// 正座標に発生させて、原点に半分戻す
object.position.x = Math.random() * this.displaySpan - this.displaySpan/2;
object.position.y = Math.random() * this.displaySpan - this.displaySpan/2;
object.position.z = Math.random() * this.displaySpan - this.displaySpan/2;
object.scale.x = Math.random() * 2 + 1;
object.scale.y = Math.random() * 2 + 1;
object.scale.z = Math.random() * 2 + 1;
// 向きを360度ランダム
object.rotation.x = Math.random() * 2 * Math.PI;
object.rotation.y = Math.random() * 2 * Math.PI;
object.rotation.z = Math.random() * 2 * Math.PI;
this.objects.push( object );
scene.add( object );
}
};
var w = 600;
var h = 500;
var camera, scene, renderer;
init();
animate();
function init() {
// カメラ作成
camera = new THREE.PerspectiveCamera( 70, w / h, 1, 10000 );
camera.position.set( 0, 300, 500 );
// シーン作成
scene = new THREE.Scene();
// メインオブジェクト作成
var UserCubes = new THREE.UserCubes1( scene );
// レンダラー作成
renderer = new THREE.CanvasRenderer();
renderer.setSize( w, h );
// 配置
document.getElementById("three_area").appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
render();
}
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>
@HEND
@DIV
<script type="text/javascript" src="http://lightbox.in.coocan.jp/three/three.min56.js"></script>
<div id="three_area" style='width:600px;height:500px;'></div>
<script type="text/javascript">
// WebGL チェック
//if( !( function () { try { return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( //'experimental-webgl' ); } catch( e ) { return false; } } )() ) {
// document.write("<span style='font-weight:bold;font-size:30px;'>WebGLが使用できません</span>");
// document.getElementById("three_area").style.display = 'none';
//}
// Three.js の名前空間でオブジェクト作成
THREE.UserCubes1 = function ( scene, cubeSize, cubeNum, displaySpan ) {
// キューブの基本サイズ( 見た目は後でスケールで変化する )
this.cubeSize = ( cubeSize !== undefined ) ? cubeSize : 20;
// キューブの数
this.cubeNum = ( cubeNum !== undefined ) ? cubeNum : 100;
// 表示幅( 発生させる座標の範囲の長さ )
this.displaySpan = ( displaySpan !== undefined ) ? displaySpan : 800;
this.geometry = new THREE.CubeGeometry( this.cubeSize, this.cubeSize, this.cubeSize );
this.objects = [];
for ( var i = 0; i < this.cubeNum; i ++ ) {
var object = new THREE.Mesh(
this.geometry,
new THREE.MeshBasicMaterial( {
color: Math.random() * 0xffffff,
transparent: true,
opacity: 0.5 }
)
);
// 正座標に発生させて、原点に半分戻す
object.position.x = Math.random() * this.displaySpan - this.displaySpan/2;
object.position.y = Math.random() * this.displaySpan - this.displaySpan/2;
object.position.z = Math.random() * this.displaySpan - this.displaySpan/2;
object.scale.x = Math.random() * 2 + 1;
object.scale.y = Math.random() * 2 + 1;
object.scale.z = Math.random() * 2 + 1;
// 向きを360度ランダム
object.rotation.x = Math.random() * 2 * Math.PI;
object.rotation.y = Math.random() * 2 * Math.PI;
object.rotation.z = Math.random() * 2 * Math.PI;
this.objects.push( object );
scene.add( object );
}
};
var w = 600;
var h = 500;
var camera, scene, renderer;
init();
animate();
function init() {
// カメラ作成
camera = new THREE.PerspectiveCamera( 70, w / h, 1, 10000 );
camera.position.set( 0, 300, 500 );
// シーン作成
scene = new THREE.Scene();
// メインオブジェクト作成
var UserCubes = new THREE.UserCubes1( scene );
// レンダラー作成
renderer = new THREE.CanvasRenderer();
renderer.setSize( w, h );
// 配置
document.getElementById("three_area").appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
render();
}
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>
@END |