three.js - PlaneGeometry Mesh が Three.JS で黒い画面を表示する

Question

私はThreeJSの初心者です。シーンに BG 画像を設定したいのですが、次のコードを実行すると空白の (黒い) 画面しか表示されません。

次のコードで何が問題だったのか教えてもらえますか?

$().ready(function(){

    var width= window.innerWidth;
    var height = window.innerHeight;

    var renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setSize( width, height );
    document.body.appendChild(renderer.domElement);
    renderer.setClearColorHex(0xffffff, 1.0);
    // renderer.clear(); 


    /*SEttingup BG*/
    var bg = new THREE.Mesh(
      new THREE.PlaneGeometry(2, 2, 0,0),
      new THREE.MeshBasicMaterial({map: new THREE.ImageUtils.loadTexture("2/bharatpriyankaweddingphotography (6).jpg")})
    );

    // The bg plane shouldn't care about the z-buffer.
    bg.materials[0].depthTest = false;
    bg.materials[0].depthWrite = false;
    console.log(bg);
    var bgScene = new THREE.Scene();
    var bgCam = new THREE.Camera();
    bgScene.add(bgCam);
    bgScene.add(bg);

    // renderer.autoClear = false;
    renderer.clear();
    renderer.render(bgScene, bgCam);
    // renderer.render(scene, cam);

    });

前もって感謝します。

score 2 · Accepted Answer

この音から、シェーダーを使用して飛行機をスクリーンに投影し、それを背景として使用したいと考えています。これは見た目ほど単純ではありません。私が知る限り、three.js にはカスタムシェーダーが必要です (three.js で射影行列をいじりたくない場合を除きます)。

シェーダー自体は非常にシンプルです。最近、webgl facebook グループで同様の質問に回答し、回答を貼り付けました。

var yourPlaneGeometry = new THREE.PlaneGeometry(2,2,1,1);

シェーダー

varying vec2 vUv;

void main() {
vUv = uv;
vec4 transformedPos = vec4( position.xy, 0.01, 1.0 );
gl_Position = transformedPos;
}

これにより、標準の three.js プレーンがフルスクリーンクワッドとしてレンダリングされます。

//read the uv value from the vertex shader
varying vec2 vUv;
uniform sampler2D yourTexture; 
void main(){
vec3 tex = texture2d(yourTexture,vUv).xyz;
gl_FragColor = vec4(tex, 1.0);
}

これら 2 つを頂点シェーダーおよびフラグメントシェーダーとして使用して shaderMaterial を作成する必要があり、深度テストを false に設定することをお勧めします。

score 1 · Accepted Answer

キャンバスがウィンドウ全体を使い果たす場合は、CSS を介して背景を設定することもできます。例えば：

<style type="text/css">
body{
  margin: 0px;
  overflow: hidden;
  background-image:url('foo.jpg');
  background-color:blue;  
}
</style>

score 0 · Accepted Answer

0

カメラには位置またはターゲットがありません。

于 2013-03-05T17:42:59.230 に答える

three.js - PlaneGeometry Mesh が Three.JS で黒い画面を表示する

3 に答える 3

Related

Reference