Three.js 的 Skybox [英] Skybox for Three.js
本文介绍了Three.js 的 Skybox的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在为我的个人作业在 Three.js 上自学，而且我对计算机图形学的东西还是很陌生.我想在我的动画系统中添加 Skybox，但经过多次尝试，我未能做到.在代码中，我做了很多注释，让它运行起来.
I was self-learning on three.js for my individual assignment and me still new to this computer graphic things. I want to add Skybox in my animation system but I failed to do it after a lot of trials. In the code, I put a lot of notes to make it run.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mine</title>
<style>
/*body{
margin: 0;
padding: 0;
background-color: #000000;
font-size: 0;
overflow: hidden;}
*/
canvas{
width: 100%; height: 100%;
}
</style>
</head>
<body>
<script src="build/three.js"></script>
<script src="FirstPersonControls.js"></script>
<script src="build/three.min.js"></script>
<script src="OrbitControls.js"></script>
<script>
//adding the scene with camera
var scene = new THREE.Scene();
var meshes=[];
var clock=new THREE.Clock();
var camera = new THREE.PerspectiveCamera(
45, window.innerWidth / window.innerHeight, 0.01, 1000 );
camera.position.set(0,5,60);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio(window.devicePixelRatio);
// renderer.setClearColor(0xffffff);
renderer.shadowMap.enabled=true;
renderer.shadowMap.type=0;
renderer.gammaInput=true;
renderer.gammaOutput=true;
renderer.domElement.style.position = 'relative';
document.body.appendChild( renderer.domElement );
//controls
// var controls = new THREE.FirstPersonControls(camera,renderer.domElement);
// controls.movementSpeed=200;
// controls.lookSpeed=0.1;
// controls.lookVertical=true;
// controls.lon=-1.5*180/Math.PI;
var sunLight = new THREE.SpotLight(0xffffff, 0.3, 0, Math.PI / 2);
sunLight.position.set(1000, 2000, 1000);
sunLight.castShadow = true;
sunLight.shadow.bias = -0.0002;
sunLight.shadow.camera.far = 4000;
sunLight.shadow.camera.near = 750;
sunLight.shadow.camera.fov = 30;
scene.add(sunLight);
var ambientLight = new THREE.AmbientLight(0x3f2806);
scene.add(ambientLight);
var pointLight = new THREE.PointLight(0xffaa00, 1, 5000);
pointLight.position.set(0, 0, 0);
scene.add(pointLight);
//adding the geometry (spheregeometry)
var geometry = new THREE.SphereGeometry( 10, 90, 50 );
var material = new THREE.MeshPhongMaterial( {
shininess: 100,
color: 0xffffff,
specular: 0xffffff,
//envMap: cubeCamera1.renderTarget.texture,
transparent: true,
side: THREE.BackSide,
blending: THREE.AdditiveBlending,
depthWrite: false
} );
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );
// var cubegeometry = new THREE.CubeGeometry (1000, 1000, 1000);
// var cubeMaterials =
// [
// new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("violence_ft.jpg"), side: THREE.DoubleSide}),
// new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("violence_bk.jpg"), side: THREE.DoubleSide}),
// new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("violence_up.jpg"), side: THREE.DoubleSide}),
// new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("violence_dn.jpg"), side: THREE.DoubleSide}),
// new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("violence_rt.jpg"), side: THREE.DoubleSide}),
// new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("violence_lf.jpg"), side: THREE.DoubleSide})
// ];
// // var cubeMaterials = new Three.MeshFaceMaterial( cubeMaterials );
// var cubenew = new Three.Mesh( cubegeometry, cubeMaterials);
// scene.add(cubenew);
// function loop(){
// requestAnimationFrame(loop);
// var delta=clock.getDelta();
// controls.update(delta);
// renderer.render(scene,camera);
// }
// loop();
//rendering the scene
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
//animating the scene
// cube.rotation.x += 0.01;
// cube.rotation.y += 0.01
var render = function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
};
render();
</script>
</body>
</html>推荐答案
您可以通过使用CubeTextureLoader 然后将纹理分配给 scene.background
you can add a skybox by loading the 6 textures of the box into a cubemap using the
CubeTextureLoader and then assigning the texture to scene.background
{
const loader = new THREE.CubeTextureLoader();
const texture = loader.load([
'resources/images/cubemaps/computer-history-museum/pos-x.jpg',
'resources/images/cubemaps/computer-history-museum/neg-x.jpg',
'resources/images/cubemaps/computer-history-museum/pos-y.jpg',
'resources/images/cubemaps/computer-history-museum/neg-y.jpg',
'resources/images/cubemaps/computer-history-museum/pos-z.jpg',
'resources/images/cubemaps/computer-history-museum/neg-z.jpg',
]);
scene.background = texture;
}
参见这个
这篇关于Three.js 的 Skybox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
