three.js を使用しているときに、webgl 2D 空間のピクセル精度のテクスチャで問題が発生しています。テクスチャのピクセルが正確に配置されるように、頂点を半ピクセル移動することで初めて解決しました。ここで見つけてください：three.js transparent png texture strange border webgl
私の最初の試行は、ブラウザー ウィンドウ全体を覆う 100% の幅と高さのキャンバスで行われました。カメラの設定は次のようになりました。
camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 500, 1000 );
今、カメラのサイズを特別なサイズに変更しようとしています。たとえば、1000 x 1000 ピクセルです。このために、カメラの設定を次のように変更しました。camera = new THREE.OrthographicCamera( -500, 500, 500, -500, - 500, 1000 );
この設定では、ピクセルの正確なテクスチャではなく、再びぼやけています。私の計画は、webgl キャンバスが Web ページのどこかにある静的なキャンバスの画像のように動作することです カメラの設定について誰か助けてもらえますか? すべてをフィドルでセットアップしようとしましたが、外部サーバーからテクスチャをロードする際に問題がありました。とにかく、多分あなたは見てみることができます: http://jsfiddle.net/kayhR/4/
だから私の質問は、ぼやけたテクスチャが得られないように、キャンバスとカメラが正しく設定されていることを確認するにはどうすればよいかということです。