Web前端html5网页three.js、earth会转动的地球

今天web前端的项目，由于设计banner设计的一个地球，老板想让他转起来。所以几经辛苦到网上找到了素材进行了更改:附下载链接

html代码：

<!DOCTYPE html>
<html lang=”en”>

<head>
<meta charset=”utf-8″>
<title></title>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<meta name=”description” content=”” />
<meta name=”keywords” content=”” />
<script src=”three.min.js”></script>
<!–[if lte IE 8]>
<link rel=”stylesheet” href=”css/ie/v8.css” />
<![endif]–>
<style type=”text/css”>
html,body{ margin:0px; width:97%;height:97%;background-color: #000; }
#cha_earth canvas {
background: none;
}
#charity-main {
height:100%;
background: url(charity_top.png) no-repeat center top;
}
.cha_earth {
height:100%;
width: 100%;
padding: 8px;
/*height: 800px; background: url(../images/cha_earth.jpg) no-repeat center top !important; */
}
</style>
</head>

<body class=”landing”>
<div id=”charity-main”>
<section class=”cha_earth” id=”earth”>
</section>
</div>
<script src=”earth.js”></script>
</body>

</html>

js代码如下（earth.js）

/*
* @Author: tiandong
* @Date: 2016-04-26 18:17:15
* @Last Modified by: tiandong
* @Last Modified time: 2016-04-26 18:17:15
*/

window.onload = function() {
var container, stats;
var camera, scene, renderer;
var group;
var mouseX = 0,
mouseY = 0;
container = document.getElementById(‘earth’);
var position = container.getBoundingClientRect()
var earthW = position.width;
var earthH = position.height;

var windowHalfX = earthW / 2;
var windowHalfY = earthH / 2;

var rate = earthW/earthH;

init();
animate();

function init() {

camera = new THREE.PerspectiveCamera(60, earthW / earthH, 1, 2000);
camera.position.z = 430;

scene = new THREE.Scene();

group = new THREE.Group();
scene.add(group);
var texture= THREE.ImageUtils.loadTexture( “earth_full-3.jpg” )
texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;
var geometry = new THREE.SphereGeometry(200, 20, 20);
var material = new THREE.MeshLambertMaterial( { map: texture});

var mesh = new THREE.Mesh(geometry, material);
group.add(mesh);

var light;
function initLight() {
light = new THREE.DirectionalLight(0xffffff, 2.0, 2.0);//设置平行光源
light.position.set( 200, 0, 200 );//设置光源向量
scene.add(light);// 追加光源到场旿
}
initLight()

if ( window.WebGLRenderingContext ) { renderer = new THREE.WebGLRenderer( { alpha: true } ); }

else { renderer = new THREE.CanvasRenderer(); }

renderer.setSize(earthW, earthH);
//renderer.setClearColor(0x000000, 0);

container.appendChild(renderer.domElement);

var canvas = renderer.domElement;

var gl = canvas.getContext(‘webgl’) || canvas.getContext(‘experimental-webgl’);

//gl.clearColor(0.0, 0.0, 0.0, 0.0);

window.addEventListener(‘resize’, onWindowResize, false);

}

function onWindowResize() {
position = container.getBoundingClientRect()
earthW = position.width;
earthH = position.height
camera.aspect =earthW/earthH;
camera.updateProjectionMatrix();
renderer.setSize(earthW, earthH);

}

function animate() {
requestAnimationFrame(animate);
render();
}

function render() {
camera.position.x += (mouseX – camera.position.x) * 0.05;
camera.position.y += (-mouseY – camera.position.y) * 0.05;
camera.lookAt(scene.position);

group.rotation.y += 0.005;

renderer.render(scene, camera);

}
}

其他文件见附件：

https://www.o6c.com/wp-content/uploads/2017/12/webglEarth.rar

效果图如下：

Web前端html5网页three.js、earth会转动的地球

1人评论了“Web前端html5网页three.js、earth会转动的地球”

发表评论取消回复

1人评论了“Web前端html5网页three.js、earth会转动的地球”

发表评论 取消回复

发表评论取消回复