three.js —— 3D球体旋转
演示demo 2021-08-17 13:52:41

 

XML/HTML Code复制内容到剪贴板
  1. <!doctype html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>3D球体</title>  
  7.     <style>  
  8.         * {  
  9.             padding: 0;  
  10.             margin: 0;  
  11.         }  
  12.     </style>  
  13.     <script src="https://cdn.bootcss.com/three.js/r81/three.js"></script>  
  14. </head>  
  15.   
  16. <body>  
  17.     <script type="text/javascript">  
  18.         var scene,  
  19.             camera,  
  20.             renderer;  
  21.   
  22.         scene = new THREE.Scene(); // 创建场景  
  23.         camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); // 创建相机  
  24.         renderer = new THREE.WebGLRenderer(); // 渲染器  
  25.   
  26.         renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器 大小  
  27.         document.body.appendChild(renderer.domElement);  
  28.   
  29.         scene.add(camera);  
  30.   
  31.         camera.position.z = 600;  
  32.   
  33.         var radius = 3,  
  34.             segemnt = 20,  
  35.             rings = 20,  
  36.             R = 300;  
  37.         // THREE.Group继承自THREE.Object3D对象，并且和THREE.Object3D对象没有任何区别，仅仅是名字上的差异。  
  38.         var group = new THREE.Group();  
  39.         var bows = new THREE.Group();  
  40.   
  41.         var sphereMaterial = new THREE.MeshLambertMaterial({  
  42.             color: 0xff0000  
  43.         });  
  44.   
  45.         for (var i = 0; i < 19; i++) {  
  46.             var ball = new THREE.Mesh(new THREE.SphereGeometry(radius, segemnt, rings), sphereMaterial);  
  47.             ball.position.x = R * Math.sin((Math.PI / 18) * i);  
  48.             ball.position.y = R * Math.cos((Math.PI / 18) * i);  
  49.   
  50.             group.add(ball);  
  51.         }  
  52.         for (var j = 0; j < 36; j++) {  
  53.             var bow = group.clone();  
  54.             bow.rotation.y = Math.PI * 2 / 36 * j;  
  55.             bows.add(bow);  
  56.         }  
  57.         scene.add(bows);  
  58.   
  59.   
  60.         var pointLight = new THREE.PointLight(0Xffffff);  
  61.   
  62.         pointLight.position.x = 0;  
  63.         pointLight.position.y = 0;  
  64.         pointLight.position.z = 1000;  
  65.   
  66.         scene.add(pointLight);  
  67.   
  68.         var mouseX, mouseY, isMove = false;  
  69.         animation();  
  70.   
  71.         function animation() {  
  72.             if (!isMove) {  
  73.                 requestAnimationFrame(animation); //循环调用函数  
  74.                 bows.rotation.y += Math.PI * 0.001;  
  75.                 bows.rotation.x += Math.PI * 0.001;  
  76.                 render(); //渲染界面    
  77.             }  
  78.         }  
  79.   
  80.         function render() {  
  81.             renderer.render(scene, camera);  
  82.         }  
  83.         /**  
  84.             鼠标点击  
  85.         **/  
  86.         document.onmousedown = function(e) {  
  87.             isMove = true;  
  88.             mouseX = e.pageX;  
  89.             mouseY = e.pageY;  
  90.         };  
  91.         document.onmousemove = function(e) {  
  92.             if (isMove) {  
  93.                 var x = e.pageX;  
  94.                 var y = e.pageY;  
  95.                 var _x = x - mouseX;  
  96.                 var _y = y - mouseY;  
  97.                 bows.rotation.x += _y * 0.001 * Math.PI;  
  98.                 bows.rotation.y += _x * 0.001 * Math.PI;  
  99.                 render();  
  100.                 mouseX = x;  
  101.                 mouseY = y;  
  102.             }  
  103.         };  
  104.         document.onmouseup = function() {  
  105.             isMove = false;  
  106.             animation();  
  107.         }  
  108.     </script>  
  109. </body>  
  110.   
  111. </html>  

 

 

 

本文来自于：http://www.yoyo88.cn/demo/587.html

在线演示 (52)
上一篇 下拉框的多选
下一篇 css自动换列
相关的文章
Powered by yoyo苏ICP备15045725号