poop particles buffergeometry example buffergeometryを使えば、よりWebGLネイティヴに近い書き方ができるらしい。Particle(頂点だけなので四角)を大量に描画することに向いている。 three.js examples es6記法で書き直す exampleはシンプルに書かれている…

See the Pen 450,000 GL_POINTS by naoyashiga (@naoyashiga) on CodePen. Three.jsのPointCloudを使って、四角をたくさん描画してみました。この四角はGL_POINTSと呼ばれるもので、WebGLにおいて頂点の役割を果たしています。PointCloudはこのGL_POINTSの集…

See the Pen Sparkle Particles by naoyashiga (@naoyashiga) on CodePen.three.jsのexampleに載っている、このコードをかなりパクって参考にしました。 three.js examples

凸包を扱うConvexGeometryを使ってみました。参考ページを読むと、自力でGeometryを使うのが、一番自由に作成できるみたいですね。

ray detecting click event in THREE.js | ヨモツネット・マウスポインタを消す Pointer Lock and First Person Shooter Controls - HTML5 Rocks

r51→r52 Moved *Controls to examples/js/controls. Migration · mrdoob/three.js Wiki · GitHubPathControlのようなカメラの動きを使うメソッドはthree.jsとは別にライブラリを読み込む必要がある。

Cubeの各面に異なるマテリアルを使う 見事にハマったのでメモしておく。 //Cube var materials = []; for(var i = 0;i < 6;i++){ materials.push(new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) ); } var CUBE_WIDTH = 200; var CUBE_…

demo ★inspire three.js webgl - geometry - vertex colors 正二十面体のジオメトリーを作成 var ICOSAHEDRON_RADIUS = 1;//正20面体の半径 var ICOSAHEDRON_DETAIL = 2;//分割回数 var color,f,f2,f3,p,n,vertexIndex, //正20面体のジオメトリー geometry =…

demo 三角関数による位置・大きさの調整 ・参考 https://threejsdoc.appspot.com/doc/three.js/examples/canvas_particles_waves.html https://threejsdoc.appspot.com/doc/three.js/examples/canvas_particles_floor.html particles = new Array(); まずパ…

demo ParticleはCloneできる Cloneはベクトルを複製することを指す。 .clone() Vector3 Clones this vector. THREE.jsのソースはこちら。 https://github.com/mrdoob/three.js/blob/master/src/objects/Particle.js THREE.Particle.prototype.clone = functi…

demo CanvasRendererとは何か? THREE.jsが持つ描画モードの一つ。WebGLを使わずにCanvasのコンテキスト2Dのものを使用して描画している。WebGLを使う描画モードはWebGLRendererである。ドキュメントの説明はこちら。 The Canvas renderer displays your beau…

demo 平行投影カメラ 平行投影カメラで撮影すると、遠近感がなくなり、近くのものも遠くのものも同じ大きさに見える。反対に遠近法を考慮する透視投影カメラ(PerspectiveCamera)もある。これを使ってカメラワークを回転させると、酔う感じが強い気がする。そ…

demo Meshの位置を変えて複数の立方体を作成する //ジオメトリーを生成 var geometry = new THREE.CubeGeometry(60,60,60); //マテリアル(ランバート反射)を生成 var material = new THREE.MeshPhongMaterial({color:0x660000}); //キューブの個数 var cubeN…

THREE.jsを使い始めた(再開し始めた?)理由 ズバリかっこいいから!TwitterでTHREE.js作成者のMr.doob氏やその周りのクリエイターがつくったものを見て、自分も作りたいと思った。それらがすべてWebGLを使ったものではないかもしれないけど、見て楽しめるもの…