HTML5 Three.js点状波动云海动画

Node waves(节点波动图)

webgl, wave

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3051
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var SEPARATION = 100,
    AMOUNTX = 50,
    AMOUNTY = 50;
var container;
var camera, scene, renderer;
var particles, particle, count = 0;
var mouseX = 0,
    mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 1;
init();
animate();

// stats = new Stats();
    // container.appendChild( stats.dom );
    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, false);
    }
    //
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;
    }
}

编译

CSS

HTML

Node waves(节点波动图)

webgl, wave

编辑器支持Emmet

快捷键

Node waves(节点波动图)

webgl, wave

HTML5 Three.js 三维海平面波动动画

HTML5 Three.js柔性卷曲引力（重力）波动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：