更改背景颜色,在three.js中添加一个点光源
Change background colour, add a pointlight in three.js
我一直在玩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 );
}
非常感谢您的帮助。
renderer.setClearColor( 0xffffff, 1 );
应该做你。第一个参数是RGB中的背景色,第二个参数是alpha。例如:
renderer.setClearColor( 0xff0000, .5 );
这应该将渲染的背景设置为红色,透明度为50%。我自己刚开始玩three.js,所以我希望这对你有用。
编辑:现在我已经有一秒钟多的时间了,我已经在你的CodePen中试用了。在初始化渲染器后,我立即将上面的行放在init()函数中,它就工作了。
相关文章:
- 添加点击事件以自动完成
- 添加点击事件
- 在Selectize.js下拉列表中的附加按钮上添加点击事件
- 在D3图表中添加点
- 制作从上一个已知点到新添加点(d3)的路径(线)的动画
- HighCharts:如何在热图中的colorAxis上添加点击事件
- Chrome应用程序在Webview中的按钮/输入上添加点击事件
- 如何在 iOS 设备上使用 JavaScript(或 CSS)添加点击事件
- 通过 JS 向元素添加点击量
- 如何将点光源指向特定方向
- 添加点击操作以搜索引导
- 如何为画布内随机定位的框添加点击事件
- 三.js为相机添加点光源
- Google 放置 API 自动完成 - 添加点击事件
- 如何添加点击事件或链接 HTML5 画布对象
- 是否可以向画布代码添加点击事件
- 如何在谷歌地图上添加点击监听器放置Javascript
- 在网络表单回发后添加点击事件
- 添加点击到谷歌地图 API v3
- 更改背景颜色,在three.js中添加一个点光源