Three.js实例:SkyboxforThree.js

我在 three.js 上自学了我的个人作业,我仍然不熟悉这个计算机图形。我想在我的动画系统中添加 Skybox,但经过大量试验后未能做到这一点。在代码中,我做了很多笔记以使其运行。

<!DOCTYPE html>
<html>
<head>
<meta cht="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.Map.enabled=true;
renderer.Map.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..bias = -0.0002;
sunLight..camera.far = 4000;
sunLight..camera.near = 750;
sunLight..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>
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;
}
Seethis

本站系公益性非盈利分享网址,本文来自用户投稿,不代表边看边学立场,如若转载,请注明出处

(452)
Python绘制八边形代码:Javascript画布绘制一个八边形
上一篇
资深web前端:后端Web开发vs前端 Web开发的未来
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(33条)