Three.js 使用立方体组成的水面波动动画

Three.js Cube Wave 要玩WebGL，先得升级电脑配置和手机！

three, wave

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

(function(main) {
    main(this, document, THREE);
})(function(window, document, THREE, undefined) {
    var scene, camera, renderer,
        fov, aspectRatio,
        farPlane, nearPlane,
        height, width,
        mainLight, ambientLight,
        cubes, props, stats, gui,
        counter = 0,
        toRad = Math.PI / 180;

function requestAnimationFrame() {
        return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function(callback) {
                window.setTimeout(callback, 1000 / 60);
            };
    }

function resize() {
        height = window.innerHeight;
        width = window.innerWidth;
        renderer.setSize(width, height);
        camera.aspect = width / height;
        camera.updateProjectionMatrix();
    }

function createScene() {
        height = window.innerHeight;
        width = window.innerWidth;
        aspectRatio = width / height;

fov = 50;
        nearPlane = 0.1;
        farPlane = 5000;

scene = new THREE.Scene();
        scene.background = new THREE.Color(0x2196f3);
        center = {
            x: width / 2,
            y: height / 2
        };

camera = new THREE.PerspectiveCamera(
            fov,
            aspectRatio,
            nearPlane,
            farPlane
        );
        camera.position.set(0, 0, 100);

scene.add(camera);

renderer = new THREE.WebGLRenderer({
            alpha: true,
            antialias: true
        });

renderer.setSize(width, height);

container = document.getElementById('container');
        container.appendChild(renderer.domElement);
    }

function createLights() {
        mainLight = new THREE.HemisphereLight(0xffffff, 0x000000, 0.5);
        scene.add(mainLight);

ambientLight = new THREE.AmbientLight(0xffff99, 0.25);
        scene.add(ambientLight);
    }

function moveCubes() {
        counter++;
        var cube, cubeArr = cubes.children;
        for (var i = 0, len = cubeArr.length; i < len; i++) {
            cube = cubeArr[i];
            cube.position.y = props.amplitude * Math.sin((props.frequency * (counter + cube.loc.r + cube.loc.c)));
        }
    }

function createGUI() {
        stats = new Stats();
        document.body.appendChild(stats.domElement);
        gui = new dat.GUI();
        gui.add(props, 'frequency', 0, 1).step(0.05);
        gui.add(props, 'amplitude', 1, 30);
    }

function render() {
        stats.begin();
        moveCubes();
        renderer.render(scene, camera);
        window.requestAnimationFrame(render);
        stats.end();
    }

function init() {
        props = {
            frequency: 0.25,
            amplitude: 5
        }
        createGUI();
        createScene();
        createLights();
        createCubes();
        render();
    }

window.requestAnimationFrame = (requestAnimationFrame)();
    window.onresize = resize;
    window.onload = init;

});

编译

CSS

HTML

Three.js Cube Wave 要玩WebGL，先得升级电脑配置和手机！

three, wave

编辑器支持Emmet

快捷键

Three.js Cube Wave 要玩WebGL，先得升级电脑配置和手机！

three, wave

Three.js 立方体组成的球体动画

使用Three.js和Simplex-noise实现的三维波动曲面动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：