問題タブ [uv-mapping]

「膨らんだ」が正しい用語かどうかはわかりませんが、今思いつくのはそれだけです。レーザーをシミュレートするために、三角形のストリップに沿って幅 1 ピクセル (技術的にはすべてのテクスチャにこの問題があります) の画像をマッピングしようとしています。完全に均一で正方形になると、次のようになります。

そしてそのワイヤーフレーム:

しかし、ポイントを内側にスライドさせると問題が発生します。UV は、三角形が完全に水平であるかのようにマッピングしようとするため、間違っています。

そしてそのワイヤーフレーム：

今のところ、どのようにマッピングするかを調べるために検索する用語さえ思いつきません。正面のマッピングだけでなく、ストライプがストリップ自体と一緒に縮小するようにマッピングしたい。任意のヒント？きっと今は考えられない、とても簡単なことだと思います。

しばらくの間、three.js カスタム オブジェクトにテクスチャを正しく適用することが困難でした。特に押し出された楕円形のオブジェクト。周りを見回したところ、バウンディング ボックスを使用してオブジェクトの UV マッピングを生成する必要があることがわかりました。ただし、これを行う方法が正確にはわかりません。これがどのように機能するかについての詳細な説明が見つからないようです。このプロセスを詳しく説明してくれる人はいますか?

ありがとう、zaidi92

UV テクスチャを正しくマッピングしようとしていますが、失敗しています...

アプリで次の結果が得られました。

結果は私が待っていたものではありません。次の説明されたビューが必要です。

ソースコードは次のとおりです。

http://pastebin.com/aDg981Bk

単一のテクスチャを含むメッシュをレンダリングしようとしていますが、UV データのストライド パラメータが正しくないため、結果が奇妙になります。

glGenBuffers とバインディング呼び出しを省略しました。

私はこの方法でパックされたデータを持っています:

私はデータを設定します：

私はそれを描きます：

しかし、結果はテクスチャ レベルでは少し奇妙に思えます...

UV データをシェーダーに送信する方法、またはより実用的な方法で再フォーマットする方法を教えてください。

ThreeJS をいじって、非正方形のクワッド テクスチャリングの古典的な問題に遭遇しました: http://www.xyzw.us/~cass/qcoord/

問題は、ThreeJS ではテクスチャ座標を vec2 でしか設定できないことです (私が知っている限りでは..) そして、これに何時間も費やした後、最終的に有効な解決策を見つけたので、それをコミュニティと共有し、より良いアイデアを得たいと思いましたか? コードは次のとおりです。

まず、3 つの JS を使用してクワッドを作成するための JavaScript:

そして今、カスタムシェーダーコード:

頂点シェーダー:

およびフラグメント シェーダー:

ほら。私はそれが何人か、あるいは数年後に私自身を助けることができることを願っています... ;)

THREE.js OBJ ローダーを使用してモデルをシーンにインポートする作業を行っています。

MeshNormalMaterial をそれに割り当てると、うまく表示されるので、ジオメトリをうまくインポートできることはわかっています。ただし、UV 座標を必要とするものを使用すると、次のエラーが表示されます。

これは、読み込まれた OBJ に UV 座標がないためだとわかっていますが、必要なテクスチャ座標を生成する方法があるかどうか疑問に思っていました。私が試してみました

...しかし、役に立たない。

three.js を使用して UV テクスチャを自動的に生成する方法はありますか? または座標を自分で割り当てる必要がありますか?

UV を完了比率として使用して、プレーンの頂点の位置を変更するデフォーマを作成しています。つまり、頂点の UV が (.5,.5) の場合、それはプレーンの中心にあります。

(Three.js) Custom Mesh UV Display Textureからリンクされた画像は、左上から始まる UV を適切に表示します。

しかし、UV を左下隅から開始するように扱わない限り、私のデフォーマは垂直方向に反転しているように見えます。

OpenGL ES には異なる UV 座標がありますか? OpenGL のUVは左下隅から始まると述べています。three.js はどれを使用しますか?

追加クレジット:正しい UV マッピング Three.jsから、答えがplaneGeometry.jsのどこかにあることがわかりました。

私は Three.js を掘り下げており、vrml を試しています。現在は collada ファイルを使用しています。

collada ファイルのインポートは機能します。フォールバックとして webGL とキャンバスで動作します: 私の 3D モデルは回転し、モデルを表示します...そして webGL では、影やバンプなどの素晴らしい効果を得ることができます.

別のテクスチャ ファイルをロードして、それを webGL レンダラーに割り当てることはできましたが、この特定のケースでは、キャンバス レンダラーが完全に失敗します。フレームが 60fps から 2fps に低下し、ポリゴン上でテクスチャが「スライド」します。

テクスチャをモデルに「修正」するために何かを見逃していると思いますか、テクスチャをインポートするときにいくつかのパラメータが欠けているのでしょうか? 繰り返しますが、テクスチャを変更せずに正常に動作しています...しかし、私は本当にそうする必要があります:p

ここに作業プレビューがあります: http://dokmixer.com/three-tests/

そして、魔法が失敗する部分は次のとおりです。

調べる部分は最初のifステートメントです（他のキャンバス対応デバイスに展開する前に、Safariでキャンバスをテストしているため）。新しいマテリアルを割り当てると、レンダラーが完全に失敗します。Safari でページに移動すると、効果をテストできます。

注：関連情報があればOSXに取り組んでいます。

どんな助けでも感謝します:)

編集：ソース画像ファイルだけを置き換えるのではなく、ここに新しい素材を設定していると思いますか？