我是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);
});
提前致谢。
答案 0 :(得分:2)
通过这个声音,我相信您想使用着色器将平面投影到屏幕并将其用作背景。这并不像看起来那么简单,据我所知three.js将需要一个自定义着色器,(除非你想在三个.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);
}
你需要创建一个shaderMaterial,将这两个作为顶点和片段着色器,你可能想要将深度测试设置为false
答案 1 :(得分:1)
如果你的画布将用完整个窗口,那么你也可以通过CSS设置背景。例如:
<style type="text/css">
body{
margin: 0px;
overflow: hidden;
background-image:url('foo.jpg');
background-color:blue;
}
</style>
答案 2 :(得分:0)
您的相机没有位置或目标。