three实现三维宇宙全景效果代码-html代码-BFW代码库

three实现三维宇宙全景效果代码

代码语言：html

所属分类：其他

代码描述：three实现三维宇宙全景效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

    <meta charset="UTF-8">





    <style>
        html, body {
          margin: 0; 
          overflow: hidden;
        }
        #space-container-top {
          opacity: 0.6;
          position: absolute;
          top: 0;
          z-index:10;
        }
        img.cosmos {
         position: absolute;
         z-index: 20;
         width: 24vw;
         margin: auto;
         top: 0; left: 0; bottom: 0;  right: 0;
        }
    </style>




</head>

<body >
    <div id="space-container">
    </div>
    <div id="space-container-top"></div>
 <!--    <img class="cosmos center" src="//repo.bfw.wiki/bfwrepo/icon/60b2c443baaca.png" /> -->


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.88.js"></script>
    <script>
        var camera1, camera2, scene1, scene2, renderer1, renderer2;
        
        var isUserInteracting = false,
        onMouseDownMouseX = 0,
        onMouseDownMouseY = 0,
        lon = 0,
        onMouseDownLon = 0,
        lat = 0,
        onMouseDownLat = 0,
        phi = 0,
        theta = 0;
        
        init();
        animate();
        
        function init() {
        
          var container1, mesh1;
          var container2, mesh2;
        
          container1 = document.getElementById('space-container');
          container2 = document.getElementById('space-container-top');
        
          camera1 = new THREE.PerspectiveCamera(155, window.innerWidth / window.innerHeight, 1, 1500);
          camera1.target = new THREE.Vector3(0, 0, 0);
        
          camera2 = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 1, 1500);
          camera2.target = new THREE.Vector3(0, 0, 0);
        
          scene1 = new THREE.Scene();
          scene2 = new THREE.Scene();
        
          var geometry1 = new THREE.SphereGeometry(1500, 160, 40);
          geometry1.scale(-1, 1, 1);
        
          var geometry2 = new THREE.SphereGeometry(500, 160, 40);
          geometry2.scale(-1, 1, 1);
        
          THREE.TextureLoader.prototype.crossOrigin = '';
        
          var material1 = new THREE.MeshBasicMaterial({
            map: new THREE.TextureLoader().load('//repo.bfw.wiki/bfwrepo/image/62e67065356ee.png') });
        
        
          var material2 = new THREE.MeshBasicMaterial({
            map: new THREE.TextureLoader().load('h//repo.bfw.wiki/bfwrepo/icon/5de90f964d501.png') });
        
        
          mesh1 = new THREE.Mesh(geometry1, material1);
          mesh2 = new THREE.Mesh(geometry2, material2);
        
          scene1.add(mesh1);
          scene2.add(mesh2);
        
        
          renderer1 = new THREE.WebGLRenderer({ alpha: true });
          renderer1.setPixelRatio(window.devicePixelRatio);
          renderer1.setSize(window.innerWidth, window.innerHeight);
          container1.appendChild(renderer1.domElement);
        
          renderer2 = new THREE.WebGLRenderer({ alpha: true });
          renderer2.setPixelRatio(window.devicePixelRatio);
          renderer2.setSize(window.innerWidth, window.innerHeight);
          container2.appendChild(renderer2.domElement);
        
          renderer1.domElement.id = 'canvas-bottom';
          renderer2.domElement.id = 'canvas-top';
        
          document.addEventListener('mousedown', onDocumentMouseDown, false);
          document.addEventListener('mousemove', onDocumentMouseMove, false);
          document.addEventListener('mouseup', onDocumentMouseUp, false);
          document.addEventListener('wheel', onDocumentMouseWheel, false);
        
          //
        
         .........完整代码请登录后点击上方下载按钮下载查看