我在 three.js 上自学了我的个人作业，我仍然不熟悉这个计算机图形。我想在我的动画系统中添加 Skybox，但经过大量试验后未能做到这一点。在代码中，我做了很多笔记以使其运行。
<!DOCTYPE html>
<html>
<head>
<meta cht="utf-8">
<le>Mine</le>
<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';
doent.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.MeshPngMaterial( {
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>
1
您可以通过使用CubeTextureLoader将框的 6 个纹理加载到立方体贴图中，然后将纹理分配给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;
}
本站系公益性非盈利分享网址，本文来自用户投稿，不代表边看边学立场，如若转载，请注明出处
评论列表（8条）