javascript - 更改背景颜色，在 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() 函数中，并且它起作用了。