Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
JavaScript
(function() { 'use strict'; // 'To actually be able to display anything with Three.js, we need three things: // A scene, a camera, and a renderer so we can render the scene with the camera.' // - http://threejs.org/docs/#Manual/Introduction/Creating_a_scene var scene, camera, renderer; // I guess we need this stuff too var container, HEIGHT, WIDTH, fieldOfView, aspectRatio, nearPlane, farPlane, stats, geometry, particleCount, i, h, color, size, materials = [], mouseX = 0, mouseY = 0, windowHalfX, windowHalfY, cameraZ, fogHex, fogDensity, parameters = {}, parameterCount, particles; init(); animate(); function init() { HEIGHT = window.innerHeight; WIDTH = window.innerWidth; windowHalfX = WIDTH / 2; windowHalfY = HEIGHT / 2; fieldOfView = 75; aspectRatio = WIDTH / HEIGHT; nearPlane = 1; farPlane = 1000; /* fieldOfView ― Camera frustum vertical field of view. aspectRatio ― Camera frustum aspect ratio. nearPlane ― Camera frustum near plane. farPlane ― Camera frustum far plane. - http://threejs.org/docs/#Reference/Cameras/PerspectiveCamera In geometry, a frustum (plural: frusta or frustums) is the portion of a solid (normally a cone or pyramid) that lies between two parallel planes cutting it. - wikipedia. */ cameraZ = farPlane / 3; /* So, 1000? Yes! move on! */ fogHex = 0x000000; /* As black as your heart. */ fogDensity = 0.0007; /* So not terribly dense? */ camera = new THREE.PerspectiveCamera(fieldOfView, aspectRatio, nearPlane, farPlane); camera.position.z = cameraZ; scene = new THREE.Scene(); scene.fog = new THREE.FogExp2(fogHex, fogDensity); container = document.createElement('div'); document.body.appendChild(container); document.body.style.margin = 0; document.body.style.overflow = 'hidden'; geometry = new THREE.Geometry(); /* NO ONE SAID ANYTHING ABOUT MATH! UGH! */ particleCount = 20000; /* Leagues under the sea */ /* Hope you took your motion sickness pills; We're about to get loopy. */ for (i = 0; i < particleCount; i++) { var vertex = new THREE.Vector3(); vertex.x = Math.random() * 2000 - 1000; vertex.y = Math.random() * 2000 - 1000; vertex.z = Math.random() * 2000 - 1000; geometry.vertices.push(vertex); } /* We can't stop here, this is bat country! */ parameters = [ [ [1, 1, 0.5], 5 ], [ [0.95, 1, 0.5], 4 ], [ [0.90, 1, 0.5], 3 ], [ [0.85, 1, 0.5], 2 ], [ [0.80, 1, 0.5], 1 ] ]; parameterCount = parameters.length; /* I told you to take those motion sickness pills. Clean that vommit up, we're going again! */ for (i = 0; i < parameterCount; i++) { color = parameters[i][0]; size = parameters[i][1]; materials[i] = new THREE.PointCloudMaterial({ size: size }); particles = new THREE.PointCloud(geometry, materials[i]); particles.rotation.x = Math.random() * 6; particles.rotation.y = Math.random() * 6; particles.rotation.z = Math.random() * 6; scene.add(particles); } /* If my calculations are correct, when this baby hits 88 miles per hour... you're gonna see some serious shit. */ renderer = new THREE.WebGLRenderer(); /* Rendererererers particles. */ renderer.setPixelRatio(window.devicePixelRatio); /* Probably 1; unless you're fancy. */ renderer.setSize(WIDTH, HEIGHT); /* Full screen baby Wooooo! */ container.appendChild(renderer.domElement); /* Let's add all this crazy junk to the page. */ /* I don't know about you, but I like to know how bad my code is wrecking the performance of a user's machine. Let's see some damn stats! */ stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.top = '0px'; stats.domElement.style.right = '0px'; container.appendChild(stats.domElement); /* Event Listeners */ window.addEventListener('resize', onWindowResize, false); document.addEventListener('mousemove', onDocumentMouseMove, false); document.addEventListener('touchstart', onDocumentTouchStart, false); document.addEventListener('touchmove', onDocumentTouchMove, false); } function animate() { requestAnimationFrame(animate); render(); stats.update(); } function render() { var time = Date.now() * 0.00005; camera.position.x += (mouseX - camera.position.x) * 0.05; camera.position.y += (-mouseY - camera.position.y) * 0.05; camera.lookAt(scene.position); for (i = 0; i < scene.children.length; i++) { var object = scene.children[i]; if (object instanceof THREE.PointCloud) { object.rotation.y = time * (i < 4 ? i + 1 : -(i + 1)); } } for (i = 0; i < materials.length; i++) { color = parameters[i][0]; h = (360 * (color[0] + time) % 360) / 360; materials[i].color.setHSL(h, color[1], color[2]); } renderer.render(scene, camera); } function onDocumentMouseMove(e) { mouseX = e.clientX - windowHalfX; mouseY = e.clientY - windowHalfY; } /* Mobile users? I got your back homey */ function onDocumentTouchStart(e) { if (e.touches.length === 1) { e.preventDefault(); mouseX = e.touches[0].pageX - windowHalfX; mouseY = e.touches[0].pageY - windowHalfY; } } function onDocumentTouchMove(e) { if (e.touches.length === 1) { e.preventDefault(); mouseX = e.touches[0].pageX - windowHalfX; mouseY = e.touches[0].pageY - windowHalfY; } } function onWindowResize() { windowHalfX = window.innerWidth / 2; windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } })();
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Three Js云实验-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号