经验啦

  1. 首页 > 科技 > >

纳米|技术分享：用JS实现的3D海浪涌动特效

it芯片三星高通骁龙台积电纳米

纳米|技术分享：用JS实现的3D海浪涌动特效

分享一个基于ThreeJS的3D海浪涌动特效 ， 效果如下：

常可用于页面背景 ， 3D效果 ， 视觉观感很好 ， 海浪会随机涌动 ， 科幻感、技术感强烈 。
代码说明代码会引用ThreeJS库 ， 版本号为56 。 注：必须是此版本 。
页面背景色可在Body的style中自行调节 。


<body style=\"background:#000000\">
完整源码如下 ， 直接保存为html文件即可使用 。
也可对源码优化修改 ， 以实现更好效果 ， 如果不想修改后的源码泄露出去 ， 可用JShaman对JS代码进行加密 。
源码

<body style=\"background:#000000\">
<script src=https://mparticle.uc.cn/"three.js\" type=\"application/javascript\"></script>
<div></div>
<script>
var SEPARATION = 100
AMOUNTX = 100
AMOUNTY = 70;
var container;
var camera scene renderer;
var particles particle count = 0;
var mouseX = 85
mouseY = -342;
var windowHalfX = window.innerWidth / 2;
【纳米|技术分享：用JS实现的3D海浪涌动特效】var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(120 window.innerWidth / window.innerHeight 1 10000);
camera.position.z = 1000;
scene = new THREE.Scene();
particles = new Array();
var PI2 = Math.PI * 2;
var material = new THREE.ParticleCanvasMaterial({
color: 0xe1e1e1
program: function(context) {
context.beginPath();
context.arc(0 0 .6 0 PI2 true);
context.fill();

);
var i = 0;
for (var ix = 0; ix < AMOUNTX; ix++) {
for (var iy = 0; iy < AMOUNTY; iy++) {
particle = particles[i++
= new THREE.Particle(material);
particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2);
particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2);
scene.add(particle);


renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth window.innerHeight);
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.x += (mouseX - camera.position.x) * .05;
camera.position.y += (-mouseY - camera.position.y) * .05;

相关经验推荐


上一篇：立讯精密|给充电做减法，“一站式”充电体验：Anker 安克65W三口超能充

下一篇：|行业资讯丨国内安卓商店要求剧本杀APP全面下架；广州一“剧本杀”商家被判侵权