更改背景顏色，在three.js中添加一個點光源

Question

我一直在玩three.js。我在線框立方體內製作了一個立方體。我如何改變背景顏色？我知道我必須做一些關於創建天空盒和/或點光源的東西，但這似乎只是製造黑屏。

這裏是COdepen：http://codepen.io/FredHair/pen/Cagpf

我的代碼：

var width = window.innerWidth; 
var height = window.innerHeight; 

var scene, camera, renderer; 
var cube; 
var fov = 30, 
isUserInteracting = false, 
cameraDistance = 100, 
onMouseDownMouseX = 0, onMouseDownMouseY = 0, 
lon = 0, onMouseDownLon = 0, 
lat = 0, onMouseDownLat = 0, 
phi = 0, theta = 0; 

$(function() { 
init(); 
}); 

function init() { 
scene = new THREE.Scene(); 
camera = new THREE.PerspectiveCamera(fov, window.innerWidth/window.innerHeight, 1, 1000); 
camera.position.set(0, 0, 100); 
renderer = new THREE.WebGLRenderer({antialias:true}); 
renderer.setSize(window.innerWidth, window.innerHeight); 
$('#container').append(renderer.domElement); 

cube = new THREE.Mesh(
    new THREE.BoxGeometry(23, 33, 18), 
    new THREE.MeshBasicMaterial({color:0xFF6600, wireframe:true}) 
); 

scene.add(cube); 

cube2 = new THREE.Mesh(
    new THREE.BoxGeometry(10, 10, 10), 
    new THREE.MeshBasicMaterial({color:0xFF6600, }) 
); 

scene.add(cube2); 

cube = new THREE.Mesh(
    new THREE.BoxGeometry(23, 33, 18), 
    new THREE.MeshBasicMaterial({color:0xFF6600, wireframe:true}) 
); 

scene.add(cube); 

$(document).on('mousedown', onMouseDown); 
$(document).on('mousewheel', onMouseWheel); 
$(window).on('resize', onWindowResize); 
animate(); 
} 

function animate() { 
requestAnimationFrame(animate); 
render(); 
} 

function render() { 

lon += .15; 
lat = Math.max(- 85, Math.min(85, lat)); 
phi = THREE.Math.degToRad(90 - lat); 
theta = THREE.Math.degToRad(lon); 

camera.position.x = cameraDistance * Math.sin(phi) * Math.cos(theta); 
camera.position.y = cameraDistance * Math.cos(phi); 
camera.position.z = cameraDistance * Math.sin(phi) * Math.sin(theta); 

camera.lookAt(scene.position); 

renderer.render(scene, camera); 
} 

function onMouseWheel(event) { 

cameraDistance += event.originalEvent.deltaY * 0.1; 
cameraDistance = Math.min(cameraDistance, camera.far); 
cameraDistance = Math.max(cameraDistance, camera.near); 
} 

function onMouseDown(event) { 

event.preventDefault(); 
onPointerDownPointerX = event.clientX; 
onPointerDownPointerY = event.clientY; 
onPointerDownLon = lon; 
onPointerDownLat = lat; 

$(document).on('mousemove', onMouseMove); 
$(document).on('mouseup', onMouseUp); 
} 

function onMouseMove(event) { 
lon = (event.clientX - onPointerDownPointerX) * 0.1 + onPointerDownLon; 
lat = (event.clientY - onPointerDownPointerY) * 0.1 + onPointerDownLat; 
} 

function onMouseUp(event) { 
$(document).off('mousemove'); 
$(document).off('mouseup'); 
} 

function onWindowResize() { 
renderer.setSize(window.innerWidth, window.innerHeight); 
camera.projectionMatrix.makePerspective(fov, window.innerWidth/window.innerHeight, 1, 1000); 
} 

任何幫助是極大的讚賞。

Answer 1

renderer.setClearColor(0xffffff, 1); 

應該這樣做。第一個參數是RGB中的背景色，第二個參數是alpha。例如：

renderer.setClearColor(0xff0000, .5); 

這應該將您的渲染背景設置爲紅色，透明度爲50％。我剛剛開始玩three.js，所以我希望這對你有用。

編輯::現在我已經有一秒多了，我已經在CodePen中試過了。在初始化渲染器後，我立即將上面的代碼行放在init（）函數中，並且它工作正常。