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

我错过了一步吗？

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

0 个答案: