🐯SVGタイガーの謎
SVGのデモもあったな、SVGといえばSVGタイガー
ガオー
p5に移植するのもかなり手慣れたものになった
余裕が出てきたのでようやっとソース読む
必須ではないようだが、moduleタグの中で必要なサンプル(という名のほぼライブラリ)を読み込んでいく。大抵こういう形をしている。
<script type="module">
import * as THREE from 'https://unpkg.com/three/build/three.module.js';
import Stats from 'https://unpkg.com/three/examples/jsm/libs/stats.module.js';
import { GUI } from 'https://unpkg.com/three/examples/jsm/libs/dat.gui.module.js';
import { OrbitControls } from 'https://unpkg.com/three/examples/jsm/controls/OrbitControls.js';
import { SVGLoader } from 'https://unpkg.com/three/examples/jsm/loaders/SVGLoader.js';
let renderer, stats, scene, camera, gui, guiData;
threeのサンプルではここが相対pathになってたり、npmとかもやもやしていたが、本家をみるとCDNがあってそれが使えたのが一つの発見だった。
Render/scene/cameraなどの概念もglTFのチートシートで一般的な常識をみにつけられた。
その後呼び出されるのはinitiとanimate関数だが、animateの中ではrequestAnimationFrameという関数が呼び出されている。そしてこれはthree.jsでもなんでもない。ただのループ用のコールバック関数だ。
p5のdrawとそんなに違いない。
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
Threeではこの構文をレンダラまたはアニメーションループと呼んでいるようだ。なぜ使うかの解説もあった。
逆にとめたくないときは使うなということだが、バッテリーとの兼ね合いがあるんだな。
ロードする
その後ローダーと呼ばれるものを使い、多彩な3D(今回は2D)オブジェクトを読み込む。3D系だと似たような書き方が多い気がするが、ロードの関数に戻り値はなくて、ロード関数のなかで読み込んだデータをsceneにぶちこんでいるのようだ。
function loadSVG( url ) {
//
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xb0b0b0 );
//
const helper = new THREE.GridHelper( 160, 10 );
helper.rotation.x = Math.PI / 2;
scene.add( helper );
//
const loader = new SVGLoader();
loader.load( url, function ( data ) {
const paths = data.paths;
非同期の理由なのか3Dの世界観なのか、別の描き方もできる気がするからサンプル作った人の趣味だろうか。
const mesh = new THREE.Mesh( geometry, material );
今回はSVGなのでgeometryがSVGのシェープ materialが色ということみたいだった。
scene.add( group );
今回はmeshをグループというまとまりにして、シーンにaddしているglTFではノードと呼んでいる概念に違いない。
カメラ、ちょっとだけかじっちゃおうか
動きの部分はthreeのorbit jsmがやってくれているので、細かいカメラ移動や処理の事は分からないが、リサイズで出てくる処理があるので、少しだけ調べてみる。
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
aspectはアスペクト比に違いない。
プロジェクションとは「投影」を意味することで、これは普通のカメラと違うところかもしれない。
写経、写経、写経して、一晩寝かせたあたりでコード読む
経験上、概念とサンプルコード読むだけだと、理解がうまくいかないことがある。そのため、動くコードが欲しいのだが、動かすまでに結構手数が必要だったりするものも多い。しかし万難排して、まず自分のテリトリー内で動くコードをつかめれば、翌日はコード読む気になっていることは多い。コードが読めればリファレンスに手が届くようになって、リファレンスに手が届くと周辺仕様を読む気になって、そのあたりで概念に戻ると、合点がいくようになる。他の類似製品やライブラリ、オーサリングツール、ちょっと次元をずらしたもの(今回の場合はSVG)などで比較検討するのも、個人的にはおすすめしたいところ。
で、やりたいことは毛筆だったんだが。
この素材を読み込ましたい。
なんじゃパッピーって、、
SVGは25MB以下ならばgithubさんからrawデータで送り込ませていただけることもわかった。このあたりまだ不安もあるが使えるうちは使っちゃおう。
なんか、うまく動かないがSVG編はこれでやめる、なんとなくだが、メッシュンところがうまくいってない気がする。
おまけSVGタイガーの謎
彼の名はゴーストスクリプトタイガー、どうもサンプルように作られたらしい 出自はeps
tiger.eps
A dramatic colored picture of a tiger's head.
お願い致します