three.js實現的3D球狀拖動旋轉效果
分享一段程式碼例項,它利用three.js實現了3D球狀元素的旋轉效果。
預設狀態下可以自動旋轉,也可以利用滑鼠拖動旋轉。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { padding: 0; margin: 0; } </style> <script src="https://cdn.bootcss.com/three.js/r81/three.js"></script> </head> <body> <script type="text/javascript"> var scene, camera, renderer; scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); scene.add(camera); camera.position.z = 600; var radius = 3, segemnt = 20, rings = 20, R = 300; var group = new THREE.Group(); var bows = new THREE.Group(); var sphereMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 }); for (var i = 0; i < 19; i++) { var ball = new THREE.Mesh(new THREE.SphereGeometry(radius, segemnt, rings), sphereMaterial); ball.position.x = R * Math.sin((Math.PI / 18) * i); ball.position.y = R * Math.cos((Math.PI / 18) * i); group.add(ball); } for (var j = 0; j < 36; j++) { var bow = group.clone(); bow.rotation.y = Math.PI * 2 / 36 * j; bows.add(bow); } scene.add(bows); var pointLight = new THREE.PointLight(0Xffffff); pointLight.position.x = 0; pointLight.position.y = 0; pointLight.position.z = 1000; scene.add(pointLight); var mouseX, mouseY, isMove = false; animation(); function animation() { if (!isMove) { requestAnimationFrame(animation); bows.rotation.y += Math.PI * 0.001; bows.rotation.x += Math.PI * 0.001; render(); } } function render() { renderer.render(scene, camera); } document.onmousedown = function(e) { isMove = true; mouseX = e.pageX; mouseY = e.pageY; }; document.onmousemove = function(e) { if (isMove) { var x = e.pageX; var y = e.pageY; var _x = x - mouseX; var _y = y - mouseY; bows.rotation.x += _y * 0.001 * Math.PI; bows.rotation.y += _x * 0.001 * Math.PI; render(); mouseX = x; mouseY = y; } }; document.onmouseup = function() { isMove = false; animation(); } </script> </body> </html>
相關文章
- three.js實現的地球3D旋轉效果JS3D
- CSS3實現的3D旋轉效果CSSS33D
- css3實現環狀旋轉效果CSSS3
- | / - 的旋轉效果實現(轉)
- javascript 3D旋轉滾動效果JavaScript3D
- 使用RxJava實現ImageView的拖動、旋轉和縮放RxJavaView
- css3實現的3D立體旋轉效果CSSS33D
- css3實現的立方體3D旋轉效果CSSS33D
- CSS 3D旋轉效果CSS3D
- SVG實現的圓環旋轉效果SVG
- iOS實現3D旋轉iOS3D
- 如何實現圖片的3D旋轉,而且是不停旋轉?3D
- Three.js 進階之旅:物理效果-3D乒乓球小遊戲 ?JS3D遊戲
- canvas實現的旋轉太極圖效果Canvas
- 使用Three.js實現神奇的3D文字懸浮效果JS3D
- css3實現的旋轉的陀螺效果CSSS3
- js和css3實現360旋轉滾動效果JSCSSS3
- 滑鼠懸浮div實現旋轉效果
- js滑鼠拖動立方體3D運動效果JS3D
- css3實現的滾動的檯球效果CSSS3
- 3D旋轉效果程式碼例項3D
- CSS3 3d旋轉魔方效果CSSS33D
- css3實現的立方體旋轉效果CSSS3
- js實現的div拖動效果例項程式碼JS
- 滑鼠懸浮實現環形旋轉效果
- HTML+CSS實現太極旋轉效果HTMLCSS
- js拖動實現左右圖片對比效果JS
- Qt實現遮罩效果並可以拖動伸縮QT遮罩
- 基於three.js的3D粒子動效實現JS3D
- css3實現的旋轉載入等待效果CSSS3
- 使用 three.js 中的 CSS3DRenderer 實現 3d 卡片的效果JSCSSS33D
- css3實現網狀球體效果程式碼例項CSSS3
- 拖動滾動條實現側欄導航定位效果
- 拖動滾動條實現內容自動載入效果
- jQuery實現的自定義可以拖動的彈出層效果jQuery
- CSS3邊框旋轉動畫實現效果CSSS3動畫
- canvas實現太陽、地球和月亮旋轉效果Canvas
- 自定義實現MIUI的拖動視差效果(阻尼效果)UI