Изменить цвет фона, добавить pointlight в three.js

Question

Я играл с three.js. Я сделал куб в кубе каркасного каркаса. Как изменить цвет фона? Я знаю, что я должен что-то сделать для создания skybox и/или точечного источника света, но это, похоже, делает черный экран.

Вот 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, а второй аргумент - альфа. Например:

renderer.setClearColor(0xff0000, .5); 

Это должно привести к тому, что ваш визуализированный фон станет красным, с прозрачностью 50%. Я только начал играть с three.js, поэтому надеюсь, что это сработает для вас.

Редактировать :: теперь, когда у меня было больше секунды, я пробовал это в вашей CodePen. Я положил строку выше в вашей функции init() сразу после инициализации рендерера, и это сработало.