1

この画像を入れようとしています -- https://hdfreefoto.files.wordpress.com/2014/09/bright-milky-way-over-the-lake-at-night.jpg -- 私のパノラマの背景としてthree.js シーン。

次のコードがあります。

var sphere = new THREE.SphereGeometry(200, 200, 32);
sphere.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));

var sphereMaterial = new THREE.MeshBasicMaterial();
sphereMaterial.map = THREE.ImageUtils.loadTexture(<path to above image>);

var sphereMesh = new THREE.Mesh(sphere, sphereMaterial);
scene.add(sphereMesh);

でも

  1. 段ボールを通して表示し、360 度回転すると、背景が 360 度回転しません (ただし、それよりも小さくなります)。どうすれば整列できますか?

  2. ラップトップで表示すると、画像を回転できますが、画面のサイズに合わないようです

特定の背景画像を three.js パノラマとして完全に合わせる方法に関するガイドラインはありますか?

4

1 に答える 1

0

私の知る限り、ガイドラインはありませんが、three.js の例でテストできます。

ここにもキュービック マップがありますが、これはパノラマを作成する一般的または簡単な方法ではありません。この場合、webGL ではなく CSS で機能します。

webGL equirectangular パノラマ コードでわかるように、正しいコードは次のようになります。

var geometry = new THREE.SphereGeometry( 500, 60, 40 );
geometry.scale( - 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {
  map: new THREE.TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' )
} );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
于 2016-05-10T04:36:57.093 に答える