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); 

    }); 

Заранее спасибо.

Answer 1

Если ваш холст будет использовать все окно, вы также можете просто установить фон с помощью CSS. Например:

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

Answer 2

Ваша камера не имеет положения или цели.

Answer 3

звуки этого, я считаю, что вы хотите использовать затенение проект самолета на экран и использовать его в качестве фона. Это не так просто, как может показаться, и, насколько мне известно, для трех. 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