three.js实现的地球3D旋转效果

快乐打工仔 分类:实例代码

分享一段代码实例,它利用three.js实现了地球的3D旋转效果。

特别说明:由于网络问题,可能需要多等候几秒钟才能查看完整效果。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
body {
margin: 0;
}
#canvasBox {
width: 100%;
height: 99.5%;
position: absolute;
}
</style>
</head>
<body>
<div id="canvasBox"></div>
<script src="https://cdn.bootcss.com/three.js/r76/three.min.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
var canvasBox = document.getElementById("canvasBox");
var W = $("#canvasBox").width();
var H = $("#canvasBox").height();
//随浏览器窗口变化而变化
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
$(window).on("resize", function() {
onWindowResize();
})
var num = 0;
var scene, camera, renderer, light;
function intScene() {
scene = new THREE.Scene();
}
function intCamera() {
camera = new THREE.PerspectiveCamera(45, W / H, 1, 1000);
camera.position.set(0, 0, 400);
camera.up.set(0, 1, 0);
camera.lookAt({
x: 0,
y: 0,
z: 0
})
}
function intRender() {
renderer = new THREE.WebGLRenderer({
antialias: true
});
//renderer = new THREE.CanvasRenderer();
renderer.setSize(W, H);
canvasBox.appendChild(renderer.domElement);
}
function intLight() {
light = new THREE.DirectionalLight(0xffffff, 0.6);
light.position.set(0, 0, 400);
scene.add(light);
}
var xkbg, earth, texts;
function intModels() {
/* 宇宙背景 */
var yz_geometry = new THREE.SphereGeometry(500, 500, 50);
var yz_material = new THREE.MeshPhongMaterial({
map: THREE.ImageUtils.loadTexture('demo/js/img/yuzhou.jpg'),
side: THREE.DoubleSide
});
xkbg = new THREE.Mesh(yz_geometry, yz_material);
xkbg.position.set(0, 0, 0);
scene.add(xkbg);
//地球
var earth_geometry = new THREE.SphereGeometry(100, 50, 50);
var earth_material = new THREE.MeshPhongMaterial({
map: THREE.ImageUtils.loadTexture('demo/js/img/earthj.jpg'),
side: THREE.DoubleSide
});
earth = new THREE.Mesh(earth_geometry, earth_material);
earth.position.set(0, 0, 0);
xkbg.add(earth);
}
var mouseX, mouseY, isMove = true;
//自转
function zizhuan() {
if (isMove) {
requestAnimationFrame(zizhuan);
xkbg.rotation.y -= 0.002;
renderer.render(scene, camera);
}
}
//拖拽
document.onmousedown = function(e) {
isMove = false;
mouseX = e.pageX;
mouseY = e.pageY;
}
document.onmousemove = function rt(e) {
if (!isMove) {
var disX = e.pageX - mouseX;
var disY = e.pageY - mouseY;
requestAnimationFrame(zizhuan);
xkbg.rotation.x = xkbg.rotation.x > 0.8 ? 0.8 : xkbg.rotation.x;
xkbg.rotation.x = xkbg.rotation.x < -0.8 ? -0.8 : xkbg.rotation.x;
xkbg.rotation.x += disY * 0.00005 * Math.PI;
xkbg.rotation.y += disX * 0.0001 * Math.PI;
renderer.render(scene, camera);
}
}
document.onmouseup = function() {
console.log(xkbg.rotation.y)
isMove = true;
setTimeout(function() {
zizhuan();
}, 2000)
}
//滑动鼠标让地球放大缩小
function intsScale() {
$(document).on('mousewheel DOMMouseScroll', function(ev) {
var e = ev || event;
e.preventDefault();
var value = e.originalEvent.wheelDelta || -e.originalEvent.detail;
var delta = Math.max(-1, Math.min(1, value));
if (delta == 1) {
num++;
num = num > 10 ? 10 : num;
} else {
num--;
num = num < -15 ? -15 : num;
}
camera.position.set(0, 0, 400 + num * 10);
});
}
function intStart() {
intScene();
intCamera();
intRender();
intLight();
intModels();
zizhuan();
intsScale();
renderer.render(scene, camera);
}
intStart();
</script>
</body>
</html>

three.js实现的地球3D旋转效果,这样的场景在实际项目中还是用的比较多的,关于three.js实现的地球3D旋转效果就介绍到这了。

three.js实现的地球3D旋转效果属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容