PlaneGeometry Mesh在Three中給出黑屏.JS

我是ThreeJS的新手。我想爲場景設置BG圖像，當我運行以下代碼時，我只有空白（黑色）屏幕。PlaneGeometry Mesh在Three中給出黑屏.JS

任何人都可以告訴我在下面的代碼中有什麼問題嗎？

$().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); 

    });

在此先感謝。

來源

2013-03-05 Baskar.M

如果您的畫布將用完整個窗口，那麼您也可以通過CSS設置背景。例如：

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

來源

2013-03-06 21:03:12 kronuus

您的相機沒有位置或目標。

來源

2013-03-05 17:42:59 gaitat

通過這樣的聲音，我相信你想使用着色器的平面上投射到屏幕上，並用它作爲背景。這並不像看起來那麼直截了當，據我所知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; 
}

這將使三個標準。 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); 
}

你需要創建一個shaderMate rial與這兩個作爲頂點和片段着色器，並且您可能需要將深度測試設置爲false

來源

2014-01-29 03:20:58 pailhead

PlaneGeometry Mesh在Three中給出黑屏.JS

回答

相關問題