Three.js 电线网动画

Wire 3D js，彼此连接的立方体矩阵。

Three.js

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var DIM = 7,
    GAP = 5,
    LIMIT = 2.3,
    BOXSPEED = 0.05,
    BOXSIZE = 0.85;
var gridRotation = 0.01;
var boundingBoxes = [];

function BoundingBox(x, y, z, speed, limits) {
    this.x = x || 0;
    this.y = y || 0;
    this.z = z || 0;
    this.speed = speed || 0.05;
    this.limits = limits || {};
};
BoundingBox.prototype.CheckBounds = function(dx, dy, dz) {
    // Check X
    if (this.x + dx <= this.limits.minX)
        this.x -= (this.speed * dx);
    else if (this.x + dx >= this.limits.maxX)
        this.x -= (this.speed * dx);
    else
        this.x += (this.speed * dx);

// Check Y
    if (this.y + dy <= this.limits.minY)
        this.y -= (this.speed * dy);
    else if (this.y + dy >= this.limits.maxY)
        this.y -= (this.speed * dy);
    else
        this.y += (this.speed * dy);

// Check Z
    if (this.z + dz <= this.limits.minZ)
        this.z -= (this.speed * dz);
    else if (this.z + dz >= this.limits.maxZ)
        this.z -= (this.speed * dz);
    else
        this.z += (this.speed * dz);
};

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer({
    alpha: true
});

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var boxController = new THREE.Object3D();
var lineController = new THREE.Object3D();
var count = 0;

setUpBoxes();
setUpLines();

scene.add(boxController);
scene.add(lineController);

camera.position.set(-2.5, -2.5, 20);
window.addEventListener('resize', onWindowResize, false);
render();

function setUpBoxes() {
    var geometry = new THREE.BoxGeometry(BOXSIZE, BOXSIZE, BOXSIZE);
    var material = new THREE.MeshNormalMaterial();

for (var i = -DIM / 2; i < DIM / 2; i++) {
        for (var j = -DIM / 2; j < DIM / 2; j++) {
            for (var k = -DIM / 2; k < DIM / 2; k++) {
                var x = i * GAP;
                var y = j * GAP;
                var z = k * GAP;

var limits = {
                    minX: x - LIMIT,
                    minY: y - LIMIT,
                    minZ: z - LIMIT,
                    maxX: x + LIMIT,
                    maxY: y + LIMIT,
                    maxZ: z + LIMIT
                };

var box = new THREE.Mesh(geometry, material);
                box.position.set(x, y, z);
                boxController.add(box);

boundingBoxes.push(new BoundingBox(x, y, z, BOXSPEED, limits));
                count++;
            }
        }
    }
};

function setUpLines() {
    var material = new THREE.LineBasicMaterial({
        color: 0xFC354C
    });

for (var i = 0; i < DIM; i++) {
        for (var j = 0; j < DIM; j++) {

var geometry1 = new THREE.BufferGeometry();
            var geometry2 = new THREE.BufferGeometry();
            var geometry3 = new THREE.BufferGeometry();

var vertexArray1 = [],
                vertexArray2 = [],
                vertexArray3 = [];

for (var k = 0; k < DIM; k++) {
                var index1 = i * (DIM * DIM) + j * DIM + k;
                var index2 = i * (DIM * DIM) + k * DIM + j;
                var index3 = k * (DIM * DIM) + i * DIM + j;

vertexArray1.push(boxController.children[index1].position.x);
                vertexArray1.push(boxController.children[index1].position.y);
                vertexArray1.push(boxController.children[index1].position.z);

vertexArray2.push(boxController.children[index2].position.x);
                vertexArray2.push(boxController.children[index2].position.y);
                vertexArray2.push(boxController.children[index2].position.z);

vertexArray3.push(boxController.children[index3].position.x);
                vertexArray3.push(boxController.children[index3].position.y);
                vertexArray3.push(boxController.children[index3].position.z);
            }

geometry1.addAttribute('position', new THREE.BufferAttribute(new Float32Array(vertexArray1), 3));
            geometry2.addAttribute('position', new THREE.BufferAttribute(new Float32Array(vertexArray2), 3));
            geometry3.addAttribute('position', new THREE.BufferAttribute(new Float32Array(vertexArray3), 3));

lineController.add(new THREE.Line(geometry1, material)); // XY Plane
            lineController.add(new THREE.Line(geometry2, material)); // XZ Plane
            lineController.add(new THREE.Line(geometry3, material)); // YZ Plane
        }
    }
};

function render() {
    boxController.rotation.x += gridRotation;
    lineController.rotation.x += gridRotation;
    camera.rotation.z += 0.0075;

var index = 0;

for (var i = 0; i < DIM; i++) {
        for (var j = 0; j < DIM; j++) {

var lineGroup1 = lineController.children[index++].geometry.attributes.position;
            var lineGroup2 = lineController.children[index++].geometry.attributes.position;
            var lineGroup3 = lineController.children[index++].geometry.attributes.position;

lineGroup1.needsUpdate = true;
            lineGroup2.needsUpdate = true;
            lineGroup3.needsUpdate = true;

var subIndex1 = 0,
                subIndex2 = 0,
                subIndex3 = 0;

for (var k = 0; k < DIM; k++) {
                var boxIndexXY = i * (DIM * DIM) + j * DIM + k;
                var boxIndexXZ = i * (DIM * DIM) + k * DIM + j;
                var boxIndexYZ = k * (DIM * DIM) + i * DIM + j;

boundingBoxes[boxIndexXY].CheckBounds(getRandomNormal(), getRandomNormal(), getRandomNormal());

boxController.children[boxIndexXY].position.x = boundingBoxes[boxIndexXY].x;
                boxController.children[boxIndexXY].position.y = boundingBoxes[boxIndexXY].y;
                boxController.children[boxIndexXY].position.z = boundingBoxes[boxIndexXY].z;

lineGroup1.array[subIndex1++] = boundingBoxes[boxIndexXY].x;
                lineGroup1.array[subIndex1++] = boundingBoxes[boxIndexXY].y;
                lineGroup1.array[subIndex1++] = boundingBoxes[boxIndexXY].z;

lineGroup2.array[subIndex2++] = boundingBoxes[boxIndexXZ].x;
                lineGroup2.array[subIndex2++] = boundingBoxes[boxIndexXZ].y;
                lineGroup2.array[subIndex2++] = boundingBoxes[boxIndexXZ].z;

lineGroup3.array[subIndex3++] = boundingBoxes[boxIndexYZ].x;
                lineGroup3.array[subIndex3++] = boundingBoxes[boxIndexYZ].y;
                lineGroup3.array[subIndex3++] = boundingBoxes[boxIndexYZ].z;

}
        }
    }

requestAnimationFrame(render);
    renderer.render(scene, camera);
};

function getRandomNormal() {
    return Math.floor(Math.random() * 2) ? -1 : 1;
}

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

编译

CSS

HTML

Wire 3D js，彼此连接的立方体矩阵。

Three.js

编辑器支持Emmet

快捷键

Wire 3D js，彼此连接的立方体矩阵。

Three.js

Three.js GSAP使用鼠标滚轮和滑动来操控3D双绞线螺旋动画

Three.js 万花筒式动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：