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会转动的地球-上流阁 Web前端html5网页three.js、earth会转动的地球-上流阁

*文章为作者独立观点,不代表上流阁立场
本文由 江风成 授权 上流阁 发表,并经上流阁编辑。转载此文章须经作者同意,并请附上出处(上流阁)及本页链接。原文链接https://www.o6c.com/web/2017/12/21/1089.html
发表评论

1 条评论
  • 沙发 心悸 

    很实用. 历害了江老板

相关文章
thinkphp PHPExcel导入到数据库,插入空白数据的解决方案
thinkphp PHPExcel导入到数据库,插入空…
laravel接收get传值和接收post传值
laravel接收get传值和接收post传值
web前端之常用js方法整理common共同引用
web前端之常用js方法整理common共同引用
web前端之js处理金额大写转换
web前端之js处理金额大写转换
java时间当天、昨天、本周、本月的工具类
java时间当天、昨天、本周、本月的工具类
PHP CURL支持HTTP、HTTPS 请求亲测可用
PHP CURL支持HTTP、HTTPS 请求亲测可用
javaweb开发程序员php开发,微信开发。接受定制开发

最新评论