negl機能一覧 / Exports / Utils

Class: Utils

negl 内部で使用する関数を保持する Utils クラスです。

Table of contents

Methods

• getDiagonalVertices
• getHrefObj
• getResolutionUniform
• getWorldPosition
• isIOS
• isSafari
• isTouchDevices
• lerp
• pointTo
• printMat
• toCamelCase
• tween

Methods

getDiagonalVertices

▸ getDiagonalVertices(hSeg, wSeg, getValue, defaultValue): number[]

対角線上に頂点を詰めた配列を返却します

Parameters

Returns

number[]

頂点データの１次元配列を返却します。

getHrefObj

▸ getHrefObj(args?): undefined | { href: string ; target: "_self" | "_blank" }

{ href, target } を含むオブジェクトを返します。 data-click-* の値を split した配列からURLを取得する際に利用しています。

console.log(utils.getHrefObj('newTab,/detail.html'.split()));
// > { href="/detail.html", target="_blank" }
 
console.log(utils.getHrefObj('/detail.html'.split()));
// > { href="/detail.html", target="_self" }

Parameters

Returns

undefined | { href: string ; target: "_self" | "_blank" }

getResolutionUniform

▸ getResolutionUniform(toRect, mediaRect?): Vector4

テクスチャのアスペクト値の算出

• テクスチャとHTML要素の大きさのアスペクト比からuResolutionを設定します。

Parameters

Returns

Vector4

uResolution に設定する Vector4 オブジェクト x: DOMの横幅 y: DOMの縦幅 z: 横幅に掛ける縦横比 w: 縦幅に掛ける縦横比

getWorldPosition

▸ getWorldPosition(rect, viewport): Object

HTMLの座標をワールド座標に変換します。

Parameters

Returns

Object

isIOS

▸ isIOS(): boolean

iphone、ipadかどうかを判定します。

Returns

boolean

iphone、ipadの時 true。それ以外、false。

isSafari

▸ isSafari(): boolean

サファリブラウザかどうかを判定します。

Returns

boolean

サファリの時 true。それ以外、false。

isTouchDevices

▸ isTouchDevices(): boolean

タッチデバイスかどうかを判定します。

Returns

boolean

タッチデバイスの時、true。それ以外、false。

lerp

▸ lerp(a, b, n?, limit?): number

Lerp 関数

Parameters

Returns

number

線形補間された値

pointTo

▸ pointTo(_mesh, originalDir, targetDir): void

メッシュの向きを指定の方向に回転します

Parameters

Returns

void

printMat

▸ printMat(targetMatrix, col?, label?): void

１次元の配列をテーブル形式で出力します

Parameters

Returns

void

toCamelCase

▸ toCamelCase(s): string

ケバブケースからキャメルケースへ文字列を変換します

Parameters

Returns

string

tween

▸ tween(targets, options): void

gsap.to (opens in a new tab)の簡易版 ライセンスの問題と依存するライブラリを増やしたくなかったため、gsap.toの簡易版の関数を作成しました。

基本的には gsap.to と使い方は変わりませんが、ease や delay は使用できません。 また、gsap.to と異なり、utils.tween では gsap.to の overwrite オプションが常に true の状態の tween となります。

const progress = { value: 0, value2: 1 }
utils.tween(progress, {
 value: 1,   // progress.value は 1 秒かけて　0 -> 1 に遷移します。
 value2: 0,  // progress.value2 は 1 秒かけて　1 -> 0 に遷移します。
 duration: 1,
 onStart() { console.log('スタート時に実行されます。') },
 onUpdate(progress) { console.log('アップデート時に実行されます。') },
 onComplete() { console.log('終了時に実行されます。') },
})

Parameters

Returns

void