LoginSignup
56
55

More than 5 years have passed since last update.

@sa-k0(kazuki sako)

Three.jsではじめてwebGLコンテンツをつくるときに参考なった公式Example

Posted at

残された時間は3週間、初めてのThree.js、なんとか納めるために序盤戦で役に立った
公式のExample(https://threejs.org/examples/) を紹介するコーナです。
最初の3日くらいはひたすらExampleを見てコピペしたり改変したりの作業をしていた。

まずはじめに

Exampleをみる前にまずは基本の基本を抑えるために以下のページを見て
Boxを回転します。
https://threejs.org/docs/index.html#manual/introduction/Creating-a-scene

すると

  • rendererというものをappendChildすればいい。
  • updateはrequestAnimationFrameで行う。
  • rendererをそこで更新する。
  • meshはgeometryとmaterialをつくって生成して、sceneにaddする

などなどの基礎知識が得られた。

animation / keyframes / json

プロジェクトでは3dモデルとアニメーションを使うことが決まっていたのでこれから見始めた。
右下をview sourceを押せばソースコード見れる。

特別なところは

真ん中らへんの

new THREE.ObjectLoader().load( 'models/json/pump/pump.json', function ( model ) {
  scene.add( model );
  mixer = new THREE.AnimationMixer( model );
  mixer.clipAction( model.animations[ 0 ] ).play();
  animate();
} );

とanimateの中の

mixer.update( clock.getDelta() );

この辺。

  • ObjectLoaderでpathをしていすればmodelのmeshが得られる
  • AnimationMixerをつくってmodelをいれてclipActionをplayする
  • mixer.updateで更新する
  • 前フレームとのdeltaTimeはTHREE.ClockというのをつくってgetDelta()したら得られるらしい
  • window.onresizeの中をみるとウインドウサイズが変わった時のcanvasのサイズの変え方がわかった

という知見が得られる。特にTHREE.ClockでgetDeltaするのはどこでも使える知識なので
早めに入手できてよかった。
ウインドウサイズまわりもどのサンプルにも書いてあるけどここで覚えた。

loader / fbx

3Dモデルは用意してもらうかたちだったが一応fbxでも読み込めるように準備しておかなければ
と思い、次はこっちをみた。
基本はさっきのと変わらなかった。

  • FBXLoaderを別ファイルでインポートしないとfbxはloadできない
  • onProgressっていうの使ってloadするとprogress取れる機能があるらしい(使わなかった)

余談だが、FBXLoaderをインポートするのに、exampleのようにscriptタグを書くのではなくて
requireしたくて少しハマった。

これの解決方法はしっかり覚えていないんですが
exports-loader　https://github.com/webpack-contrib/exports-loader
(もしかしたらimports-loaderも必要かも...)

をnpm installまたはyarn addして

webpack.configに以下かいて

resolve: {
  alias: {
    'three-extras': path.resolve(__dirname, 'node_modules/three/examples/js/')
  }
}

example以下の使いたいのがあるjsファイル内で
import FBXLoader from 'imports-loader?THREE=three!exports-loader?THREE.FBXLoader!three-extras/loaders/FBXLoader'

冗長だけどとりあえずこれで解決した。(たぶん)

結局fbx使わなかったけれど、この知見は他で役に立った。

loader / json /blender

プロジェクトでは結局fbxをblenderでjsonに変換して使うことにしたが、
何らかの理由で上のObjectLoaderじゃなくてJsonLoaderをつかわないといけなくなったので
これも確認した。

  • このExampleだけで得られる知見は特になかった。

が、このあたりで***Loader.load('hogehoge' ()=>{});とか書くのが嫌になってきて
これ辺りの記事(http://qiita.com/sawa-zen/items/cba55a23411753f1353e)
をみながらモデルやらテクスチャやらをpreloadしてから使っていた。

以下は参考に書いたソースコードの抜粋です

const loader = new THREE.JSONLoader();
const json = PreLoad.getData("modelName"); //preloadjsをラップしたクラス,loadQue.getResult('hoge')のデータが返ってくる
const tex = PreLoad.getData("textureName");

const threeTex = new THREE.Texture(tex);
threeTex.needsUpdate = true;
const model = loader.parse(json);

const material = model.materials[0];
material.map = threeTex;
const mesh = new THREE.Mesh(model.geometry, material);

こんな感じでかけばネストがなくて気持ち少し楽

buffergeometry / instancing / dynamic

紙吹雪みたいなのを大量にだしたいことが決まっていたので
ここはシェーダーでgpuパーティクル？かなと思いこれを確認した。

これは優秀なサンプル

こちらの記事(https://tkmh.me/blog/2016/12/05/555/) と合わせて読んでいくと理解が深まった。

  • シェーダーでのパーティクルはinstancedBufferGeometryを使う
  • それに、vertex, index, uv(テクスチャ使うなら)をsetするのが基本(正確にはこれらも必須というわけではないと思う)
  • offestとorientationは独自実装(それぞれvertex shaderで位置と角度を計算するための値)

ちなみに、後々わかったことでPlaneをつかいたいだけならわざわざ手書きでindexやらvertexやら書かなくても

const plane = new THREE.PlaneBufferGeometry(1, 1, 10, 10);
let vertices = plane.attributes.position.clone();
let uv = plane.attributes.uv.clone();
let indices = plane.index.clone();
this.geometry = new THREE.InstancedBufferGeometry();

this.geometry.addAttribute('position', vertices);
this.geometry.addAttribute('uv', uv);
this.geometry.setIndex(indices);

こういう感じで、一回planeのbuffergeometryつくってそれの値をつかって
instancedBufferGeometryにaddなりsetなりすれば簡単で短い。

このサンプル、理解がするまでに何度も見直したりパラメーター変えたりのスタディをした。

postprocessing / background

独自にポストエフェクトを書くことが予想できたのでとりあえずこれ。

  • three.jsでのポストエフェクトのかけ方
  • EffectComposerというものを使って、パスを分けて？レンダリングすること

基本的なpostprocessingはthree/examples/js/postporcessing 以下にあるので
このサンプルで使用されているもの以外にも使えばいいと思います。

また、シェーダーでのポストエフェクトを独自で作成したくなると踏んだので
そのあたりもここで一度調査した。

結局、sampleを解体するのがいいかなと思って、CopyShaderという
ただ画面をコピーしているだけのシンプルそうなものがあったのでそれベースで
オリジナルでシェーダー書けるようにしたのがこちら。

PPTest.js
import postVert from '../../shader/postVert.glsl'
import postFrag from '../../shader/postFrag.glsl'
import * as THREE from 'three'

const PPTest = function ( map, opacity ) {
  THREE.Pass.call( this );

  this.map = map;
  this.opacity = ( opacity !== undefined ) ? opacity : 1.0;

  this.uniforms = {
    "tDiffuse": { value: null },
    "opacity":  { value: 1.0 }
  }

  this.material = new THREE.ShaderMaterial( {

    uniforms: this.uniforms,
    vertexShader: postVert,
    fragmentShader: postFrag,
    depthTest: false,
    depthWrite: false

  } );

  this.needsSwap = false;

  this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
  this.scene  = new THREE.Scene();

  this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
  this.quad.frustumCulled = false; // Avoid getting clipped
  this.scene.add( this.quad );

};

PPTest.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {

  constructor: THREE.PPTest,

  render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {

    var oldAutoClear = renderer.autoClear;
    renderer.autoClear = false;

    this.quad.material = this.material;

    this.uniforms[ "opacity" ].value = this.opacity;
    this.uniforms[ "tDiffuse" ].value = this.map;
    this.material.transparent = ( this.opacity < 1.0 );

    renderer.render( this.scene, this.camera, this.renderToScreen ? null : readBuffer, this.clear );

    renderer.autoClear = oldAutoClear;
  }

} );

export default PPTest;

要らなさそうな部分は削って、materialのvertexshader, fragmentshaderを
自分で書いたものを入れるようにしてExportした。Exportできるの重要
jsを書き始めたの最近なのでPrototypeとかよく知らない仕様...
今改めるとコンストラクタのopacityとか不要そうだし削っても良かった気がする。

ちなみに、ここでshaderファイルをwebpackでimportするのどうしようってなって
いくつかloaderを試して、以下を使った。
https://www.npmjs.com/package/shader-loader

以下画面のRを1.0にするだけのを書いてテストしたコード

postVert.glsl
varying vec2 vUv;

void main() {

  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

}
postFrag.glsl
uniform float opacity;
uniform sampler2D tDiffuse;
varying vec2 vUv;

void main() {
  vec4 texel = texture2D( tDiffuse, vUv );
  texel.r = 1.0;
  gl_FragColor = opacity * texel;
}

intaractive / cubes

マウスインタラクションを加えたかったのでとりあえずこれを見た。

  • rayを飛ばしてマウスの座標を得る

そして、結局この記事がとてもシンプルで良かった。
http://qiita.com/edo_m18/items/5aff5c5e4f421ddd97dc

マウスインタラクションについては以上です。

おわりに

長くて、中途半端な記事を読んでいただいてありがとうございます。
間違っていること、ご質問等あればよろしくお願いします。

上記のExampleを3,4日眺めたり触ったりした段階でかなり
three.jsの環境での制作環境になれることができたので
初めての時に、時間がなくても一度要件を分解して
たくさんあるExampleから似ているものを一通りさらっていくのおすすめです。

56
55
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
56
55