全屏的微粒子3D动画特效

css

body {margin: 0;overflow: hidden;
}#canvas {background:radial-gradient(circle farthest-corner at center top, #071021, #19324a);
}

需要引入：three.min.js
另外js代码

window.addEventListener("load", init);function init() {let rot = 0; // 角度const renderer = new THREE.WebGLRenderer({canvas: document.getElementById("canvas"),alpha: true});const scene = new THREE.Scene();scene.fog = new THREE.Fog(0xaaaaaa, 50, 2000);const camera = new THREE.PerspectiveCamera(70, 1000);const geometry = new THREE.Geometry();for (let i = 0; i < 10000; i++) {const star = new THREE.Vector3();star.x = THREE.Math.randFloatSpread(2000);star.y = THREE.Math.randFloatSpread(2000);star.z = THREE.Math.randFloatSpread(2000);geometry.vertices.push(star)}const material = new THREE.PointsMaterial({color: 0xffffff});const starField = new THREE.Points(geometry, material);scene.add(starField);function render() {rot += 0.1;const radian = (rot * Math.PI) / 180;camera.position.x = 1000 * Math.sin(radian);camera.position.z = 1000 * Math.cos(radian);camera.lookAt(new THREE.Vector3(0, 0, 0));renderer.render(scene, camera);requestAnimationFrame(render);}render();window.addEventListener("resize", onResize);function onResize() {const width = window.innerWidth;const height = window.innerHeight;renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(width, height);camera.aspect = width / height;camera.updateProjectionMatrix();}// 初始化onResize();
}

html代码

<canvas id="canvas"></canvas>

附上完整版html代码

因为js在后面版本移除了THREE.Geometry();方法，故我选择引入特定版本的js。

如果遇到其它错误自己感觉浏览器的提示自行修改即可

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><style>html,body {width: 100%;height: 100%;margin: 0;overflow: hidden;}#canvas {width: 100%;height: 100%;background:radial-gradient(circle farthest-corner at center top, #071021, #19324a);}</style>
</head>
<body>
<canvas id="canvas"></canvas></body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.js" integrity="sha512-NNyaCC2BKAfte54rx4joMGzGxpCIGxiZkizFH82XB2GR37x+IZN9YwFItYlsS9g1jFuhM9d18sJv9/dDLztdVg==" crossorigin="anonymous"></script>
<script language="JavaScript">window.addEventListener("load", init);function init() {let rot = 0; // 角度const renderer = new THREE.WebGLRenderer({canvas: document.getElementById("canvas"),alpha: true});console.log("==========")const scene = new THREE.Scene();scene.fog = new THREE.Fog(0xaaaaaa, 50, 2000);const camera = new THREE.PerspectiveCamera(70, 1000);const geometry = new THREE.Geometry();for (let i = 0; i < 10000; i++) {const star = new THREE.Vector3();star.x = THREE.Math.randFloatSpread(2000);star.y = THREE.Math.randFloatSpread(2000);star.z = THREE.Math.randFloatSpread(2000);geometry.vertices.push(star)}const material = new THREE.PointsMaterial({color: 0xffffff});const starField = new THREE.Points(geometry, material);scene.add(starField);function render() {rot += 0.1;const radian = (rot * Math.PI) / 180;camera.position.x = 1000 * Math.sin(radian);camera.position.z = 1000 * Math.cos(radian);camera.lookAt(new THREE.Vector3(0, 0, 0));renderer.render(scene, camera);requestAnimationFrame(render);}render();window.addEventListener("resize", onResize);function onResize() {const width = window.innerWidth;const height = window.innerHeight;renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(width, height);camera.aspect = width / height;camera.updateProjectionMatrix();}// 初始化onResize();}</script></html>

全屏的微粒子3D动画特效相关推荐

html画星空,html5 canvas绘制全屏的星空背景动画特效
特效描述:html5 canvas绘制全屏星空背景动画特效.html5 canvas背景动画,星空动画.连线区域跟随鼠标移动,外加碰壁检测代码结构 1. 引入JS 2. HTML代码 var m ...
html5 canvas全屏变色波浪线条动画js特效
下载地址基于html5 canvas+js制作的全屏变色波浪线条动画特效,线条发光背景颜色变换效果. dd:
HTML5怎么让图片和文字重叠,利用HTML5实现全屏图片文字过渡切换特效
特效描述:利用HTML5实现全屏图片文字过渡切换特效.利用HTML5实现全屏图片文字过渡切换特效代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Masupitami Wal ...
html5 特效框架,带37种3D动画特效的跨浏览器CSS3动画框架
AllAnimation.css是一款带37种3D动画特效的跨浏览器CSS3动画框架.它可以轻松的制作出各种CSS3 3D动画效果,可以在移动手机上使用.并且使用极其简单,使用时只需要添加相应的cla ...
html5全屏幻灯片自动切换,html5特效-全屏幻灯片切换动画，支持拖拽
html5全屏幻灯片切换动画的特效,支持拖拽,完整源码下载地址: http://pan.baidu.com/s/1nvwcLxJ 密码: dmgr 效果预览图如下: 全屏幻灯片切换动画,支持拖拽 in ...
左右全屏banner焦点图代码特效+苹果官网首页左右全屏banner焦点图效果+包括JS图片CSS样式等
介绍源码名称:[左右全屏banner焦点图]代码特效+苹果官网首页左右全屏banner焦点图效果+包括JS图片CSS样式等源码大小:16.6KB 开发语言:PHP+Mysql 操作系统:Windo ...
Activity全屏透明动画等
之前弄了很久没有成功,不是透明不了就是不能全屏,下面大概贴以下代码 1创建sty样式,属性如下: <style name="CustomActivityDialog" par ...
迪文DGUS智能屏如何轻松实现3D动画
三维立体的视觉效果已经被广泛应用于人机交互中,三维图形逼真的显示效果往往可以更加直接的传递出视觉信息,减少用户的信息解读门槛. 传统的三维立体静态.动态画面的显示往往对于 GPU 的图像处理性能.显示 ...
图片滚动插件+html5,超赞的jQuery图片滑块动画特效代码汇总
在网站开发过程中,特别是前端开发这块,经常会使用到很多图片滑块动画,也就是一些基于jQuery和HTML5的焦点图插件.本文将为大家收集10个超赞的jQuery图片滑块动画,这些现成的jQuery插件 ...

全屏的微粒子3D动画特效

附上完整版html代码

全屏的微粒子3D动画特效相关推荐

最新文章

热门文章