not good but great

プログラミング、アート、映画・本の感想について書きます。

THREE.js

threejsのbuffergeometry exampleをes6で書いてみた

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

Three.jsのPointCloudを使ってGL_POINTSを大量に描画する

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

Three.jsを使ってモバイルでグリグリ動かすのは難しいと思った

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

THREE.jsでConvexGeometryを使う

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

Raycasterの当たり判定で壁をつくる

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

CameraのControlを使うときはバージョンに注意

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

Cubeの各面に異なるマテリアルを使うときは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_…

THREE.jsで多面体をSpotlightで照らす

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 三角関数による位置・大きさの調整 ・参考 three.js canvas - particles - wavesthree.js canvas - particles - floor particles = new Array(); まずパーティクル一つ一つの位置を扱う必要があるので、作成したパーティクルを配列に入れる。 //パーテ…

パーティクルをCloneして、球の中に球を描画する

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

CanvasRendererを用いたパーティクル描画で数Bの空間ベクトルの知識が役立った話

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

Lineメソッドを用いて、格子状の背景を設定

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

Meshの位置を変えて複数の立方体を作成する

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

THREE.jsをとりあえず触ってみたいと思ってから、直方体を回転させてみるまでの手順

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