PlaneGeometry Mesh 在 Three.JS 中出现黑屏答案

【问题标题】：PlaneGeometry Mesh gives black screen in Three.JSPlaneGeometry Mesh 在 Three.JS 中出现黑屏
【发布时间】：2013-02-20 04:53:25
【问题描述】：

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

    });

提前致谢。

【问题讨论】：

标签： three.js

【解决方案1】：

听上去，我相信您想使用着色器将平面投影到屏幕上并将其用作背景。这并不像看起来那么简单，据我所知，three.js 将需要一个自定义着色器，（除非您想在 three.js 中处理投影矩阵）。

shader本身很简单，我最近在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);
}

你需要用这两个作为顶点和片段着色器创建一个shaderMaterial，你可能想要将深度测试设置为false

【讨论】：

【解决方案2】：

如果你的画布会用完整个窗口，那么你也可以通过 CSS 设置背景。例如：

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

【讨论】：

【解决方案3】：

您的相机没有位置或目标。

【讨论】：