세 js에서 배경 장면 만들기

Question

안녕하세요, 세 JS 실험에 배경 이미지를 추가하려고합니다.

코드가 작동하지만 배경이 렌더링되지 않습니다. 내가 그리워 단계가 있습니까

다음

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

두 번째 줄이 첫 번째 줄을 덮어 씁니다. backgroundscene 및 배경 카메라를 만들지 말고 backgroundMesh를 일반 장면에 추가하면됩니다.

목표가 무엇인지 모르지만이 옵션이 아닌 경우 WebGLRenderTarget을 사용하여 텍스처를 렌더링 할 수 있습니다.

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