5

ThreeJS (JavaScript/WebGL) では、シーンの一部である静的な背景画像を作成するにはどうすればよいですか? CSSを使用すると機能しますが、renderer.domElement.toDataURL('image/png')を介して「スクリーンショット」を作成すると、背景画像が表示されません。ありがとう！

4

2 に答える 2

14

別の背景シーンを使用して、背景イメージをレンダリングできます。

var bg = new THREE.Mesh(
  new THREE.PlaneGeometry(2, 2, 0),
  new THREE.MeshBasicMaterial({map: backgroundTexture})
);

// The bg plane shouldn't care about the z-buffer.
bg.material.depthTest = false;
bg.material.depthWrite = false;

var bgScene = new THREE.Scene();
var bgCam = new THREE.Camera();
bgScene.add(bgCam);
bgScene.add(bg);

次に、レンダリング ループで、実際のシーンの前に bgScene を描画します。

renderer.autoClear = false;
renderer.clear();
renderer.render(bgScene, bgCam);
renderer.render(scene, cam);
于 2012-07-04T00:41:00.260 に答える
0

あなたがパノラマビューアを作ろうとしているのか、それともそのようなものを作ろうとしているのか、私にははっきりしませんでした...

それがあなたの目標だった場合、レンダリングされた球体に正距円筒図法画像を挿入する問題を解決するために私が与えた答えがあります (これは、マウスおよび/または deviceOrientation [スマートフォンの加速度計] によって制御できます):

https://stackoverflow.com/a/37129356/1920145

于 2016-06-10T16:31:45.960 に答える