html5 canvas实现梦幻的3D刺猬球
2023-09-27 14:28:19 时间
今天要为大家带来一款html5 canvas实现的梦幻的3D刺猬球。页面非常梦幻。效果图如下:
html代码:
<div> <canvas width="1366" height="62" style="width: 1366px; height: 62px;"> </canvas> </div>
js代码:
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight, r = 200, mouseX = 0, mouseY = 0, windowHalfX = window.innerWidth / 2, windowHalfY = window.innerHeight / 2, camera, scene, renderer; init(); animate(); function init() { var container; container = document.createElement('div'); document.body.appendChild(container); camera = new THREE.PerspectiveCamera(80, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 3000); camera.position.z = 1000; scene = new THREE.Scene(); var i, line, vertex1, vertex2, material, p, parameters = [[3.5, 0x90CEBF, 0.5, 1]], geometry = new THREE.Geometry(); for (i = 0; i < 1500; i++) { var vertex1 = new THREE.Vector3(); vertex1.x = Math.random() * 2 - 1; vertex1.y = Math.random() * 2 - 1; vertex1.z = Math.random() * 2 - 1; vertex1.normalize(); vertex1.multiplyScalar(r); vertex2 = vertex1.clone(); vertex2.multiplyScalar(Math.random() * 0.09 + 1); geometry.vertices.push(vertex1); geometry.vertices.push(vertex2); } for (i = 0; i < parameters.length; ++i) { p = parameters[i]; material = new THREE.LineBasicMaterial({ color: p[1], opacity: p[2], linewidth: p[3] }); line = new THREE.Line(geometry, material, THREE.LinePieces); line.scale.x = line.scale.y = line.scale.z = p[0]; line.originalScale = p[0]; line.rotation.y = Math.random() * Math.PI; line.updateMatrix(); scene.add(line); } renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); container.appendChild(renderer.domElement); document.addEventListener('mousemove', onDocumentMouseMove, false); document.addEventListener('touchstart', onDocumentTouchStart, false); document.addEventListener('touchmove', onDocumentTouchMove, false); // window.addEventListener('resize', onWindowResize, false); } function onWindowResize() { windowHalfX = window.innerWidth / 2; windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function onDocumentMouseMove(event) { mouseX = event.clientX - windowHalfX; mouseY = event.clientY - windowHalfY; } function onDocumentTouchStart(event) { if (event.touches.length > 1) { event.preventDefault(); mouseX = event.touches[0].pageX - windowHalfX; mouseY = event.touches[0].pageY - windowHalfY; } } function onDocumentTouchMove(event) { if (event.touches.length == 1) { event.preventDefault(); mouseX = event.touches[0].pageX - windowHalfX; mouseY = event.touches[0].pageY - windowHalfY; } } // function animate() { requestAnimationFrame(animate); render(); } function render() { camera.position.y += (-mouseY + 200 - camera.position.y) * .05; camera.lookAt(scene.position); renderer.render(scene, camera); var time = Date.now() * 0.0001; for (var i = 0; i < scene.children.length; i++) { var object = scene.children[i]; if (object instanceof THREE.Line) { object.rotation.y = time * (i < 4 ? (i + 1) : -(i + 1)); } } }
注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/6585
相关文章
- 数字孪生3D可视化智慧化社区管理平台
- JAVA智能设备基于OpenGL的3D开发技术 之AABB碰撞检测算法论述
- 云技术正在改变3D打印行业生态
- 西数开始生产首款512GB 64层3D NAND芯片
- Top 10:HTML5、JavaScript 3D游戏引擎和框架
- UIST '16 paper NormalTouch and TextureTouch: High-fidelity 3D Haptic Shape Rendering on Handheld
- CSS3 3D变换
- HTML5 Canvas 高仿逼真 3D 布料图案效果
- 『创意欣赏』30幅逼真的 3D 虚拟现实环境呈现
- 苹果3D识别领先高通两年 但安卓厂商对手机3D不感冒
- 3d激光雷达开发(kd树)
- 基于html5制作3D拳击游戏源码下载
- 基于HTML5/CSS3可折叠的3D立方体动画
- 干货分享: Unity 3D模型如何导给Cocos Creator使用
- 32.qt quick-模仿QQ登录界面实现3D旋转(Rotation、Flipable)