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

回答

相关问题