HTML5 Three.js 3D变形管道

morphing tubes, 使用webgl在3D虚拟现实空间中绘制粒子、几何曲线和梯形。

webgl, geomery

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var contianer, renderer, camera, scene;

var material;
var letters = [];
var vertices = [];
var offsets = [];
var targetVertices, currentVertices;
var mainGeometry
var vertexCount = 32;
var clock = new THREE.Clock();
var boxhelper;
var line;
var helpCube1, helpCube2;
var smallCubes = [];
var mainLines = [];
var time;
var step = 0;
var morphstep = 0;
var current = 0;
var target = 1;
var wait = true;
var waittimer = 0
var randomTarget = 0;
var randomCurrent = 0;
var prevRandom;
var helpCube3

init()

function init() {
    container = document.createElement('div');
    document.body.appendChild(container);

camera = new THREE.PerspectiveCamera(120, window.innerWidth / window.innerHeight, .1, 100000);

camera.position.set(0, 0, 5);
    scene = new THREE.Scene();

scene.fog = new THREE.FogExp2(0x5d4e46, .013);

renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    renderer.setClearColor(0x5d4e46);
    container.appendChild(renderer.domElement);

var size = 10;

//geometry
    for (var i = 0; i < 256; i++) {

var curve = new THREE.CubicBezierCurve3();

for (var j = 0; j < 4; j++) {
            var vec = new THREE.Vector3(Math.floor(Math.random() * size) * size, Math.floor(Math.random() * size) * size, Math.floor(Math.random() * size) * size)
            vec.z -= Math.floor(Math.random() * size * j)
            vec.x += Math.floor(Math.random() * size * j)
            vec.y -= Math.floor(Math.random() * size * j)

curve["v" + j] = vec
        }

var geometry = new THREE.Geometry();
        geometry.vertices = curve.getPoints(vertexCount);

if (i % 32 == 0) {
            var lineGeometry = new THREE.Geometry();
            for (var j = 0; j < vertexCount; j++) {
                var x = geometry.vertices[j].x;
                var y = geometry.vertices[j].y;
                var z = geometry.vertices[j].z;
                lineGeometry.vertices.push(
                    new THREE.Vector3(x, y, z))
            }
            var material = new THREE.LineBasicMaterial({
                color: 0xffffff,
                linewidth: 3
            });
            material.color.setHSL(1, 0, 100);

var line = new THREE.Line(lineGeometry, material);

mainLines.push(line)
            scene.add(line);
        } else {
            vertices.push(geometry.vertices)
        }
    }

boxhelper = new THREE.BoxHelper(line, 0xffffff);
    scene.add(boxhelper);

//light
    var ambient = new THREE.AmbientLight(0xffffff);
    scene.add(ambient);

var material = new THREE.MeshLambertMaterial({
        color: 0xa69e8f
    });

var solidMaterial = new THREE.MeshLambertMaterial({
        color: 0xffffff
    });
    var helpCubeMesh = new THREE.SphereGeometry(1, 32);
    helpCube1 = new THREE.Mesh(helpCubeMesh, solidMaterial);
    scene.add(helpCube1)
    helpCube2 = new THREE.Mesh(helpCubeMesh, solidMaterial);
    scene.add(helpCube2)

window.addEventListener('resize', onWindowResize, false);
    animate();

}

function animate() {
    time = performance.now() * .0002
    morphstep += 4;

if (wait) {
        waittimer += 1;
        randomTarget = Math.floor(Math.random() * (vertices.length))

randomCurrent = Math.floor(Math.random() * (mainLines.length))

wait = false
        waittimer = 0;
        morphstep = 0;

mainGeometry = mainLines[randomCurrent].geometry
        targetVertices = vertices[randomTarget]

} else {
        boxhelper.update(mainLines[randomCurrent]);

helpCube1.position.set(mainGeometry.vertices[0].x, mainGeometry.vertices[0].y, mainGeometry.vertices[0].z)
        helpCube2.position.set(mainGeometry.vertices[vertexCount - 1].x, mainGeometry.vertices[vertexCount - 1].y, mainGeometry.vertices[vertexCount - 1].z)

currentVertices = mainGeometry.vertices

for (var i = 0; i < vertexCount; i++) {
            var point = currentVertices[i]
            var targetPoint = targetVertices[i]

var x = point.x + (targetPoint.x - point.x) * morphstep / 100;
            var y = point.y + (targetPoint.y - point.y) * morphstep / 100;
            var z = point.z + (targetPoint.z - point.z) * morphstep / 100;

mainGeometry.vertices[i].x = x;
            mainGeometry.vertices[i].y = y;
            mainGeometry.vertices[i].z = z;
        }

mainGeometry.verticesNeedUpdate = true;
    }

step += 4;

if (step % 100 == 0) {
        wait = true
        morphstep = 100;
    }

var r = 50 //*Math.sqrt(2)/2
    camera.position.set(r * Math.sin(time) + 50, 50, r * Math.cos(time) + 50)
    camera.lookAt(new THREE.Vector3(50, 50, 50))
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

function random(seed) {
    var x = Math.sin(seed) * 10000;
    return x - Math.floor(x);
}

radians = function(degrees) {
    return degrees * Math.PI / 180;
};

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);
}

编译

CSS

HTML

morphing tubes, 使用webgl在3D虚拟现实空间中绘制粒子、几何曲线和梯形。

webgl, geomery

编辑器支持Emmet

快捷键

morphing tubes, 使用webgl在3D虚拟现实空间中绘制粒子、几何曲线和梯形。

webgl, geomery

HTML5 Three.js 3D洞穴中的火焰和烟雾以及热变形动画特效

HTML5/Three.js 3D地形高度图

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：