javascript - 用三个js创建一个背景场景

Question

您好，我正在尝试向我的 Three JS 实验添加背景图像。

代码正在运行，但没有渲染背景。 下面是我的 init 函数:

function init(){
// Create new scene
scene = new THREE.Scene();
var WIDTH = window.innerWidth,
    HEIGHT = window.innerHeight,
    BOXWIDTH = 20;

// Renderer 
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(WIDTH,HEIGHT);
document.body.appendChild(renderer.domElement);

// PerspectiveCamera (POV Angle, Aspect Ration, Near Distance, Far Distance) 
camera = new THREE.PerspectiveCamera(45,WIDTH/HEIGHT,1,20000000);
camera.position.set(0,8000,0);
scene.add(camera);

// Resizer
window.addEventListener('resize', function() {
  var WIDTH = window.innerWidth,
      HEIGHT = window.innerHeight;
  renderer.setSize(WIDTH, HEIGHT);
  camera.aspect = WIDTH / HEIGHT;
  camera.updateProjectionMatrix();
});

// Set the background color of the scene.

// Load the background texture
var texture = THREE.ImageUtils.loadTexture( 'images/background.jpg' );
var backgroundMesh = new THREE.Mesh(
new THREE.PlaneGeometry(2, 2, 0),
new THREE.MeshBasicMaterial({
    map: texture
}));

backgroundMesh .material.depthTest = false;
backgroundMesh .material.depthWrite = false;

// Create your background scene
backgroundScene = new THREE.Scene();
backgroundCamera = new THREE.Camera();
backgroundScene .add(backgroundCamera );
backgroundScene .add(backgroundMesh );

// Create a light, set its position, and add it to the scene.
var light = new THREE.PointLight(0xaaaaaa);
light.position.set(-100,200,100);
scene.add(light);

// Initialize object to perform world/screen calculations
projector = new THREE.Projector();

// Add OrbitControls so that we can pan around with the mouse.
controls = new THREE.OrbitControls(camera, renderer.domElement);
//THREE.GeometryUtils.center( geometry );
controls.minDistance = 0;
controls.maxDistance = 7000000;
/*
controls.minPolarAngle = 0; // radians
controls.maxPolarAngle = Math.PI; // radians

controls.maxPolarAngle = Math.PI/2; */
// To update the mouse position on move
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
}

下面是我的渲染函数

function animate() {

    // Read more about requestAnimationFrame at http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
    requestAnimationFrame(animate);
    // Render the scene.
    renderer.autoClear = false;
    renderer.clear();
    renderer.render(backgroundScene , backgroundCamera );
    renderer.render(scene, camera);
    controls.update();
    // update the tweens from TWEEN library
    TWEEN.update();
    update();
}

是否有我错过的步骤？

Answer 1

这个答案可能为时已晚，但我可以立即看出您的渲染有问题。

renderer.render(backgroundScene , backgroundCamera );
renderer.render(scene, camera);

第二行将覆盖第一行。 我建议您不要制作背景场景和背景相机，而只需将您的背景网格添加到常规场景中即可。

不确定您的目标是什么，但如果这不是一个选项，您可以查看使用 WebGLRenderTarget 渲染到纹理。

https://threejs.org/examples/webgl_rtt.html