首页 网站特效 PHP/Mysql 网站模板 视频教程 整站源码 云服务器 免责声明

素材码 > html/css > html5 canvas+three.js绘制3D地球自转动画特效

html5 canvas+three.js绘制3D地球自转动画特效

更新时间:2018-10-30 码币:1
357058607
html5 canvas+three.js绘制3D地球自转动画特效 应用简介

html5 canvas+three.js绘制3D地球自转动画特效,挺逼真的效果,支持鼠标拖动地球全方位旋转。

js代码

<script src="js/three.min.js"></script> 
<script> 
    var canvasBox = document.getElementById("canvasBox"
    var W = canvasBox.clientWidth 
    var H = canvasBox.clientHeight 
 
    function onWindowResize() { 
        camera.aspect = window.innerWidth / window.innerHeight; 
        camera.updateProjectionMatrix(); 
        renderer.setSize( window.innerWidth, window.innerHeight) 
    } 
 
    window.addEventListener('resize', onWindowResize, false) 
 
    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(00500); 
        camera.up.set(010
        camera.lookAt({x: 0, y:0, z:0}
    } 
 
    function intRender() { 
        renderer = new THREE.WebGLRenderer({antialias:true}
        renderer.setSize(W, H) 
        canvasBox.appendChild(renderer.domElement) 
    } 
 
    function intLight() { 
        light = new THREE.DirectionalLight(0xffffff, 1
        light.position.set(5050500
        scene.add(light) 
    } 
 
    var xkbg, earth, cloud; 
    var SEPARATION = 25, AMOUNTX = 34, AMOUNTY = 20
    var particles, particle, count = 0
    function intModels() { 
      /* 宇宙背景 */ 
      var yz_geometry = new THREE.SphereGeometry(50050050); 
      var yz_material = new THREE.MeshPhongMaterial({ 
        map: THREE.ImageUtils.loadTexture('./images/negy.jpg'), 
        side: THREE.DoubleSide 
      }); 
      xkbg = new THREE.Mesh(yz_geometry, yz_material); 
      xkbg.position.set(000); 
      scene.add(xkbg); 
      //地球 
      var earth_geometry = new THREE.SphereGeometry(1005050); 
      var earth_material = new THREE.MeshPhongMaterial({ 
        map: THREE.ImageUtils.loadTexture('./images/earth4.jpg'), 
        side: THREE.DoubleSide 
      }); 
      earth = new THREE.Mesh(earth_geometry, earth_material); 
      earth.position.set(000); 
      earth.rotation.x = 0.42
      earth.rotation.y = 60
      scene.add(earth); 
      //云层 
      var cloud_geometry = new THREE.SphereGeometry(1015050); 
      var cloud_material = new THREE.MeshPhongMaterial({ 
        map: THREE.ImageUtils.loadTexture('./images/earth_cloud.png'), 
        transparent: true, 
        opacity: .8 
      }); 
      cloud = new THREE.Mesh(cloud_geometry, cloud_material); 
      cloud.position.set(000); 
      earth.add(cloud); 
      //云层2 
      var cloud2_geometry = new THREE.SphereGeometry(1025050); 
      var cloud2_material = new THREE.MeshPhongMaterial({ 
        map: THREE.ImageUtils.loadTexture('./images/earth_cloud.png'), 
        transparent: true, 
        opacity: .8 
      }); 
      cloud2 = new THREE.Mesh(cloud2_geometry, cloud2_material); 
      cloud2.position.set(000); 
      cloud2.rotation.y = 10
      earth.add(cloud2); 
    } 
 
    var mouseX, mouseY, isMove = true; 
    //自转 
    function zizhuan() { 
      if (isMove) { 
        requestAnimationFrame(zizhuan); 
        earth.rotation.y -= 0.0005
        renderer.render(scene, camera); 
      } 
      xkbg.rotation.y -= 0.0005
    } 
    //拖拽 
    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); 
        earth.rotation.x = earth.rotation.x > 0.8 ? 0.8 : earth.rotation.x; 
        earth.rotation.x = earth.rotation.x < -0.8 ? -0.8 : earth.rotation.x; 
        earth.rotation.x += disY * 0.00005 * Math.PI; 
        earth.rotation.y += disX * 0.00005 * Math.PI; 
        renderer.render(scene, camera); 
      } 
    } 
    document.onmouseup = function() { 
      console.log(xkbg.rotation.y) 
      console.log(earth.rotation.x) 
      isMove = true; 
      setTimeout(function() { 
        zizhuan(); 
      }1000
    } 
     
    //滑动鼠标让地球放大缩小 
    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(-1Math.min(1, value)); 
        if (delta == 1{ 
          num++; 
          num = num > 10 ? 10 : num; 
        } else { 
          num--; 
          num = num < -15 ? -15 : num; 
        } 
        camera.position.set(00400 + num * 10); 
      }); 
    } 
     
    function intStart() { 
      intScene(); 
      intCamera(); 
      intRender(); 
      intLight(); 
      intModels(); 
      zizhuan(); 
      intsScale(); 
      renderer.render(scene, camera); 
    } 
 
    intStart(); 
</script>


  • 收藏
  • 投诉
评论列表