Three.js

https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png

2019/11/20

11/20 Three.js Meetup Tokyo 0

ここ半年くらいのThree.jsアップデートについて。

TypeScript対応がさかん。FMSの猫さんによるコミット多数。

WebXRはMozillaの本気度が高い。

ステンシルバッファ対応。

https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png

my scrap boxes

RainEffect

MeshPhongMaterial

parts of THREE.js

code:DOM.js

let targetDOM = document.getElementById('webgl'); // スクリーンとして使う DOM

code:NewScene.js

new THREE.Scene();

code:BackgroundColorAndFog.js

scene = new THREE.Scene();

scene.background = new THREE.Color().setHSL( 0.51, 0.4, 0.01 );

scene.fog = new THREE.Fog( scene.background, 3500, 15000 );

code:PerspectiveCamera.js

new THREE.PerspectiveCamera ...

code:WebGLRenderer.js

new THREE.WebGLRenderer();

renderer.setClearColor(new THREE.Color(RENDERER_PARAM.clearColor));

renderer.setSize(RENDERER_PARAM.width, RENDERER_PARAM.height);

targetDOM.appendChild(renderer.domElement);

code:Mesh.js

// geometry, material, mesh

// box

geometry = new THREE.BoxGeometry(1.0, 1.0, 1.0);

material = new THREE.MeshBasicMaterial(MATERIAL_PARAM);

box = new THREE.Mesh(geometry, material);

// sphere

new THREE.SphereGeometry(1.5, 16, 16);

// cone

new THREE.ConeGeometry(1.0, 1.5, 32);

// torus

new THREE.TorusGeometry(1.0, 0.4, 32, 32);

// line

sphere = new THREE.Line(geometry, material);

// points

materialPoint = new THREE.PointsMaterial(MATERIAL_PARAM_POINT); // not affected by lights

torus = new THREE.Points(geometry, materialPoint);

code:LambertMesh.js

new THREE.MeshLambertMaterial(MATERIAL_PARAM);

code:PhongMesh.js

new THREE.MeshPhongMaterial(MAT);

code:StoppableRenderer.js

window.addEventListener('keydown', (eve) => {

run = eve.key !== 'Escape';

}, false);

// rendering

render();

function render(){

if(run){requestAnimationFrame(render);}

renderer.render(scene, camera);

}

Object3D

PostProcessing

https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png

code:OrbitControl.js

<script src="./lib/OrbitControls.js"></script>

new THREE.OrbitControls(camera, renderer.domElement);

code:AxesHelper.js

// 右手座標系、Y-Up

axesHelper = new THREE.AxesHelper(5.0);

scene.add(axesHelper);

https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png

code:THREEtime.js

clock = new THREE.Clock();

let time = clock.getDelta();

elasped+=time;

code:JStime.js

startTime = Date.now();

nowTime = Date.now() - startTime;

code:DirectionalLight.js

directionalLight = new THREE.DirectionalLight(

DIRECTIONAL_LIGHT_PARAM.color,

DIRECTIONAL_LIGHT_PARAM.intensity

);

directionalLight.position.x = DIRECTIONAL_LIGHT_PARAM.x;

directionalLight.position.y = DIRECTIONAL_LIGHT_PARAM.y;

directionalLight.position.z = DIRECTIONAL_LIGHT_PARAM.z;

scene.add(directionalLight);

AmbientLight( color : Integer, intensity : Float )

code:AmbientLight.js

ambientLight = new THREE.AmbientLight(

AMBIENT_LIGHT_PARAM.color,

AMBIENT_LIGHT_PARAM.intensity

);

scene.add(ambientLight);

code:PhongLighting.js

material = new THREE.MeshPhongMaterial(MATERIAL_PARAM);

box = new THREE.Mesh(geometry, material);

scene.add(box);

code:ResizeEvent.js

window.addEventListener('resize', () => { ...

code:UpdateMVP.js

camera.updateProjectionMatrix();

code:Color.js

var color = new THREE.Color( 1, 0, 0 );

https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png

TransformとGroup

「移動してから回転する」のようなコードを書いても、THREE.jsの世界では原点を中心とした回転が先に実行される。

グループを利用して回避する。

e.g; アナログ時計の針の動きを実装する

let group = new THREE.Group();

group.add(box);

scene.add(group);

group.rotation.y += 0.02;

https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png

Particle, PostEffect

THREE.Fog

頂点カラーがつく

code:Particle.js

materialPoint = new THREE.PointsMaterial(MATERIAL_PARAM_POINT);

geometry = new THREE.Geometry();

for(let i = 0; i <= COUNT; ++i){

let point = new THREE.Vector3(x, y, z); // sets position

geometry.vertices.push(point);

}

let particle = new THREE.Points(geometry, materialPoint);

scene.add(particle);

code:Particle(Depricated).js

//Depricated

// 形状データを作成

var geometry = new THREE.Geometry();

var numParticles = 200000;

for(var i = 0 ; i < numParticles ; i++) {

geometry.vertices.push(new THREE.Vector3(

Math.random() * 2000 - 1000,

Math.random() * 2000 - 1000,

Math.random() * 2000 - 1000));

}

// マテリアルを作成

var texture =THREE.ImageUtils.loadTexture('images/particle1.png');

var material = new THREE.ParticleBasicMaterial({

size: 10, color: 0xff8888, blending: THREE.AdditiveBlending,

transparent: true, depthTest: false, map: texture });

// 物体を作成

var mesh = new THREE.ParticleSystem(geometry, material);

mesh.position = new THREE.Vector3(0, 0, -1200);

mesh.sortParticles = false;

scene.add(mesh);

glass material

https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png

Animation Mixer

https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png

Callback

code:callback.js

earthTexture = earthLoader.load('earth.jpg', () => {

moonTexture = moonLoader.load('moon.jpg', init);

});

https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png

MATH

code:length.js

Math.hypot(arg1, arg2, arg3...)

code:round.js

// toFixed(number)

Number.parseFloat(x).toFixed(2);

code:lerp2.js

function lerp2(a, b, t) { return a + t * (b - a); }

code:lerp.js

function lerp(x0, y0, x1, y1, x) {

return y0 + (y1 - y0) * (x - x0) / (x1 - x0);

}

Vector

XOR shift

snoise

fBm

code:fbm.js

function random(x, y){

let dot = x * 12.9898 + y * 78.233;

let wave = Math.sin(dot);

let a = wave * 43758.5453123;

return a - Math.floor(a);

//return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);

}

function noise(x, y){

//vec2 xy = vec2(1., .0);

//vec2 i = Math.floor(co);

let ix = Math.floor(x);

let iy = Math.floor(y);

//vec2 f = fract(co);

let fx = ix - Math.floor(ix);

let fy = iy - Math.floor(iy);

//vec4 x = vec4(

// random(i)

// ,random(i + xy.xy)

// ,random(i + xy.yx)

// ,random(i + xy.xx));

let xx = random(ix, iy);

let xy = random(ix + 1., iy);

let xz = random(ix, iy + 1.);

let xw = random(ix + 1., iy + 1.);

//vec2 u = f * f * (3. - 2. * f);

let ux = fx * fx * (3. - 2. * fx);

let uy = fy * fy * (3. - 2. * fy);

//return mix(x.x, x.y, u.x)

// + (x.z - x.x) * u.y * (1. - u.x)

// + (x.w - x.y) * u.x * u.y;

return lerp(xx, xy, ux) + (xz - xx) * uy * (1. - ux) + (xw - xy) * ux * uy;

}

function fbm(x, y){

let v = .0;

let a = .5;

let f = 0.;

for (let i = 0; i < 12; i++) {

v += a * Math.abs(noise(x, y));

p *= 2.;

a *= .5;

}

return v;

}

// make cloud using fBm

const CLOUD_PARTS = 1000;

let col=1.;

for(let j=-CLOUD_PARTS;j<CLOUD_PARTS;++j) for(let k=-CLOUD_PARTS;k<CLOUD_PARTS;++k){

col *= fbm(j, k);

col *= fbm(-j -t, -k -t);

col *= fbm(-j -t * .5, -k -t * .5);

}

// then use col value for particle(position (j, k)) is present or not

HSV

code:quaternion.js

let quaternion = box.quaternion; // object's quaternion

// setup rotator Quaternion

let rotator = new THREE.Quaternion();

let axis = new THREE.Vector3(anyX, anyY, anyZ).normalize();

rotator.setFromAxisAngle(axis, anyAngleRad);

quaternion.multiply(rotator); // apply rotator

code:equals.js

===

!==

厳密等価演算子

オペランド同士が、型を変換することなく(上に示した通り)厳密に等しいならば真を返します。

glTF