在三个js中创建背景场景 [英] Create a background scene in three js

问题描述

我正在尝试将背景图像添加到我的Three JS实验中.

Hi I am trying to add a background image to my Three JS experiment.

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

The code is working but no background is being rendered. Below is my init function:

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

我错过了一步吗?

推荐答案

这个答案可能为时已晚，但我可以立即判断出您的渲染存在问题.

This answer might be too late, but I can tell straight away there is something wrong with your rendering.

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

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

The second line will overwrite the first. I would suggest you don't make a backgroundscene and background camera, but simply add your backgroundMesh to the regular scene.

不确定您的目标是什么，但是如果不是这样，您可以使用WebGLRenderTarget来呈现到纹理.

Not sure what your goal is, but if that is not an option you can have a look at rendering to a texture using WebGLRenderTarget.

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

这篇关于在三个js中创建背景场景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！