3 js。他のテクスチャ/画像をクリックしたときのチェンジテクスチャの読み込み

Question

Threejsで360画像ビューを作成したいとします。私は4枚の画像を持っていて、1枚は3枚で、残りの3枚はサムネイルのようにページの最下部にあるので、サムネイルをクリックすると360度の画像が変わるはずです。

私のCodepenは、その360画像は黒で、そのコードはcodepenには表示されませんが、localhostでは正常に動作します。 Localhostプレビューは以下の通りです。それらの3つの画像が下部に表示されます。

ローカルホストの画像コード。

var material = new THREE.MeshBasicMaterial({ 
       map: new THREE.TextureLoader().load('assets/image3.jpg') 
      }); 

Answer 1

あなたは、単に球の材料を更新する必要があります。すべての画像を先にロードして、素材として保存してください。また、私はあなたの球の中に座っていると推測しています。 backSideのみレンダリングする必要があります。あなたはloadイベントで行うよう

//globals 
var images = []; 

//preload 
for (var i = 0; i < numberOfImages; i++) { 
var loadImage = new THREE.TextureLoader().load('path/to/image/imageName_'+i, function(texture) { 

    var material = new THREE.MeshBasicMaterial({map:texture, side:THREE.BackSide}); 

    images.push(material); 
    } 
} 

そして、サムネイルをクリックする上で、配列から右の材料を選択すると、球のフラットobject.material.needsUpdate = true

EDITを設定し、材料を更新：あなたは、単にプリロードテクスチャを保存することができ配列内の既存のmaterial.mapを更新してください。フラグを立てることを忘れないでくださいobject.material.needsUpdate = true;