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

快乐打工仔发布于 2年前分类：实例代码

分享一段代码实例，它利用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旋转效果属于前端实例代码，有关更多实例代码大家可以查看。

我来回复

暂无回复内容