普段Unity使ってお仕事させていただいているのですが、新しい趣味が欲しかったのでthree.jsをお勉強することにしました。
作ったやつ。正直まだ何が何だかわかっていない状態
それっぽい部分のコードを変えてみた。
参考にしたコードは、
three.jsのサンプルの
webGL_line_sphere.htmlってやつ。
正直サンプルの方が綺麗。
コード
line.js
puts 'The best way to log and share programmers knowledge.'
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - lines - spheres</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background-color: #ffffff;
margin: 0px;
overflow: hidden;
}
a {
color:#111111;
}
#info {
position: absolute;
top: 100px; width: 100%;
color: #ffffff;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: center;
z-index:100;
}
a {
color: #ffffff;
text-decoration: none;
}
a:hover {
color: #ffffff;
}
</style>
</head>
<body>
<script src="../build/three.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var SCREEN_WIDTH = window.innerWidth,
SCREEN_HEIGHT = window.innerHeight,
r = 450,
n =0,
mouseX = 0, mouseY = 0,
windowHalfX = window.innerWidth / 2,
windowHalfY = window.innerHeight / 2,
camera, scene, renderer;
init();
animate();
function init() {
var container;
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 80, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 3000 );
camera.position.z = 1000;
scene = new THREE.Scene();
var i, line, vertex1, vertex2, material, p,
parameters = [ [ 0.5, 0xff7700, 1, 2 ], [ 0.5, 0xff9900, 1, 1 ], [ 0.6, 0xffaa00, 0.75, 1 ], [ 1, 0xffaa00, 0.5, 1 ], [ 0.7, 0x000833, 0.8, 1 ],
[ 0.8, 0xaaaaaa, 0.75, 2 ], [ 0.9, 0xFFD464, 0.5, 1 ], [ 1.0, 0xffffff, 0.25, 100 ], [ 1.1, 0xffffff, 0.125, 100 ] ];
var geometry = createGeometry();
for( i = 0; i < parameters.length; ++ i ) {
p = parameters[ i ];
material = new THREE.LineBasicMaterial( { color: p[ 1 ], opacity: p[ 2 ], linewidth: p[ 3 ] } );
line = new THREE.LineSegments( geometry, material );
line.scale.x = line.scale.y = line.scale.z = p[ 0 ];
line.originalScale = p[ 0 ];
//line.rotation.y = Math.random() * Math.PI;
//line.updateMatrix();
scene.add( line );
}
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
container.appendChild( renderer.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
//
window.addEventListener( 'resize', onWindowResize, false );
// test geometry swapability
setInterval( function () {
var geometry = createGeometry();
scene.traverse( function ( object ) {
if ( object instanceof THREE.Line ) {
object.geometry.dispose();
object.geometry = geometry;
}
} );
},100 );
}
function createGeometry() {
n+= 0.1;
var geometry = new THREE.Geometry();
for ( i = 0; i < 150; i ++ ) {
var vertex1 = new THREE.Vector3();
vertex1.x = Math.random() * 10*Math.sin(n) - 1;
vertex1.y = Math.random() * 10*Math.cos(n) - 1;
//vertex1.z = (Math.random() * 10 - 1)*Math.sin(n);
vertex1.normalize();
vertex1.multiplyScalar( r );
vertex2 = vertex1.clone();
vertex2.multiplyScalar( Math.random() *2 + 1 );
geometry.vertices.push( vertex1 );
geometry.vertices.push( vertex2 );
}
return geometry;
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove( event ) {
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}
function onDocumentTouchStart( event ) {
if ( event.touches.length > 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
function onDocumentTouchMove( event ) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
//camera.position.y = ( - mouseY + 200 - camera.position.y ) * .05;
// camera.lookAt( scene.position );
renderer.render( scene, camera );
//var time = Date.now() * 0.0001;
for ( var i = 0; i < scene.children.length; i ++ ) {
var object = scene.children[ i ];
// if ( object instanceof THREE.Line ) {
//object.rotation.y = time * ( i < 4 ? ( i + 1 ) : - ( i + 1 ) );
//if ( i < 5 ) object.scale.x = object.scale.y = object.scale.z = object.originalScale * (i/5+1) * (1 + 0.5 * Math.sin( 7*time ) );
//}
}
}
</script>
</body>
</html>
よくわからなかったやつ
line.js
<script src="js/Detector.js"></script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
Detector.jsは、webGL未対応ブラウザでエラー文章を表示させるために必要らしい。
レンダラーを初期化する前にこれを記述するとちゃんと、エラーメッセージを提出してくれるのだと。
参考リンク
http://gupuru.hatenablog.jp/entry/2014/01/05/224813
line.js
parameters = [ [ 0.5, 0xff7700, 1, 2 ], [ 0.5, 0xff9900, 1, 1 ], [ 0.6, 0xffaa00, 0.75, 1 ], [ 1, 0xffaa00, 0.5, 1 ], [ 0.7, 0x000833, 0.8, 1 ],
[ 0.8, 0xaaaaaa, 0.75, 2 ], [ 0.9, 0xFFD464, 0.5, 1 ], [ 1.0, 0xffffff, 0.25, 100 ], [ 1.1, 0xffffff, 0.125, 100 ] ];
var geometry = createGeometry();
for( i = 0; i < parameters.length; ++ i ) {
p = parameters[ i ];
material = new THREE.LineBasicMaterial( { color: p[ 1 ], opacity: p[ 2 ], linewidth: p[ 3 ] } );
line = new THREE.LineSegments( geometry, material );
line.scale.x = line.scale.y = line.scale.z = p[ 0 ];
line.originalScale = p[ 0 ];
//line.rotation.y = Math.random() * Math.PI;
//line.updateMatrix();
scene.add( line );
}
次によくわからなかったのは、ここでした。
僕は、はじめに配列を作ってそのあとfor文を用いて、parameterのそれぞれの値を、一気にラインに突っ込むという手法を知らなかったので、かなりお勉強になりました。これC#でも使えそう。
あと、
LineBasicMaterialは、ライン専用にマテリアルでした。なんでライン専用のマテリアルなんてあるんだろう。。。。全部一緒でいいじゃん。。(じゃダメなのかな)
参考
あと、LineSegmentsってなんだろうってなって見てみたら実際にラインを作るやつっぽかったです。
createPrimitive的なやつかな
参考サイト
あと、
scean.traverceについて、トラバースの引数に渡されたすべての子オブジェクトに適用されるような関数らしい。よくわからん。ちなみに第二引数の数値を変えると、fpsが変わりまくった気がした。
sceanそのものの状態を変化させるのかな
参考
line.js
function createGeometry() {
n+= 0.1;
var geometry = new THREE.Geometry();
for ( i = 0; i < 150; i ++ ) {
var vertex1 = new THREE.Vector3();
vertex1.x = Math.random() * 10*Math.sin(n) - 1;
vertex1.y = Math.random() * 10*Math.cos(n) - 1;
//vertex1.z = (Math.random() * 10 - 1)*Math.sin(n);
vertex1.normalize();
vertex1.multiplyScalar( r );
vertex2 = vertex1.clone();
vertex2.multiplyScalar( Math.random() *2 + 1 );
geometry.vertices.push( vertex1 );
geometry.vertices.push( vertex2 );
}
return geometry;
}
これのpushのやつ。
実際に頂点座標を頂点配列の中に入れ込むやつみたい。
2つ頂点あるのは、ラインだからだよね
参考
以上
初投稿でした。