threejs+tweenjs реализует переключение моделей 3D-частиц

внешний интерфейс WebGL three.js WebVR

предисловие

Когда я раньше просматривал форум, я увидел сообщение об использовании three.js для достижения анимации переключения моделей частиц Конкретные эффекты заключаются в следующем:

ты можешь идтипредварительный просмотр.

Однако автор не поделился исходным кодом, он только недавно изучал threejs, и он просто нашел время, чтобы написать похожее демо, надеясь помочь некоторым новичкам, которым нравится threejs. Эффект следующий:

Далее давайте посмотрим, как реализовать такую ​​анимацию переключения системы частиц.

получить модель

Первым шагом для реализации 3D-анимации является проектирование 3D-модели в сцене, и когда мы делаем анимацию переключения моделей 3D-частиц, нам также необходимо преобразовать 3D-модель в нужную нам модель частиц. фронтенд разработчик, а моделировать не умею, поэтому приходится "воровать" плоды чужого труда, идирекламный проспект, открываем панель отладки-сеть-XHR, нажимаем f5 для обновления страницы, и получаем нужную нам 3D модель частиц:

Сохраните полученный файл json локально.

Реализовать идеи

инициализация threejs работает

Сначала инициализируем три элемента threejs: сцену, камеру, средство визуализации. Нам нужна система частиц-носителей для переключения и несколько систем частиц среды (для простоты я инициализировал только систему частиц среды, которая вращается вверх и вниз). Количество частиц в системе частиц-носителей больше, чем максимальное количество вершин всех моделей, чтобы гарантировать, что переключение на каждую модель не будет пропущено, а избыточные точки будут перекрываться с самого начала.

Код инициализации:

// renderer 的承载容器
container = document.createElement('div');
document.body.appendChild(container);
// 初始化相机
camera = new THREE.PerspectiveCamera(105, window.innerWidth / window.innerHeight, 10, 10000);
camera.position.z = 100;
// 初始化场景
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x000000, 0.001);// 雾化
//初始化renderer
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
// 初始化geometry
geometry = new THREE.Geometry();
around = new THREE.Geometry();
// 初始化贴图
var textureLoader = new THREE.TextureLoader();
textureLoader.crossOrigin = '';
var mapDot = textureLoader.load('textures/gradient.png');  // 圆点

Инициализируйте систему частиц-носителей:

//初始变换点组
for (let i = 0; i < 10000; i++) {

    var vertex = new THREE.Vector3();
    vertex.x = 800 * Math.random() - 400;
    vertex.y = 800 * Math.random() - 400;
    vertex.z = 800 * Math.random() - 400;

    geometry.vertices.push(vertex);

    geometry.colors.push(new THREE.Color(1, 1, 1));

}
material = new THREE.PointsMaterial({ size: 4, sizeAttenuation: true, color: 0xffffff, transparent: true, opacity: 1, map: mapDot });

material.vertexColors = THREE.VertexColors;
particles = new THREE.Points(geometry, material);
scene.add(particles);

После загрузки полученной 3D-модели через JSONLoader полученный объект геометрии помещается в массив glist для переключения модели:

Загрузите модель loadObject:

var loader = new THREE.JSONLoader();
loader.load('obj/game.js', function (geo, materials) {
    var colors = [];
    for (var i = 0; i < geo.vertices.length; i++) {
        colors.push(new THREE.Color("rgb(255, 255, 255)"))
    }

    geo.colors = colors;

    //调整geometry在场景中的位置和大小

    geo.center();
    geo.normalize();
    geo.scale(500, 500, 500)
    geo.rotateX(Math.PI / 4)
    geo.rotateY(-Math.PI / 8)
    glist.push(geo)
})

Добавить прослушиватель событий страницы

//事件监听
document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener("mousewheel", onDocumentMouseWheel, false);
document.addEventListener("keydown", onDocumentKeyDown, false);
window.addEventListener('resize', onWindowResize, false);

Что касается мониторинга событий, я сделал следующее:

  1. Удерживая нажатой кнопку мыши, перетащите ее, чтобы повернуть систему частиц в сцене.
  2. Прокрутите колесико мыши, чтобы увеличить или уменьшить масштаб камеры.
  3. При нажатии клавиш со стрелками на клавиатуре вверх и вниз отображается анимация переключения моделей частиц.

Эффект:

Определите угол поворота модели в соответствии со смещением перетаскивания мыши, код:

function onDocumentMouseMove(event) {
    geometry.rotateY((event.pageX - mouseX) / 1000 * 2 * Math.PI);
    geometry.rotateX((event.pageY - mouseY) / 500 * 2 * Math.PI);

    event.preventDefault();
    mouseX = event.pageX;
    mouseY = event.pageY;
}

Определите высоту камеры по оси Z в соответствии с величиной прокрутки колеса для достижения масштабирования, код:

function onDocumentMouseWheel() {
    camera.position.z += event.deltaY;
}

Определите ключевое значение клавиши клавиатуры и решите, следует ли отображать анимацию движения, код:

function onDocumentKeyDown(event) {
    if (event.which == 40 && objIndex < 4) {
        objIndex++;
        tweenObj(objIndex);
        flag = true;
    } else if (event.which == 38 && objIndex > 0) {
        objIndex--;
        tweenObj(objIndex);
        flag = true;
    }
}

Показать анимацию с помощью tweenjs

function tweenObj(index) {
    geometry.vertices.forEach(function (e, i, arr) {
        var length = glist[index].vertices.length;
        var o = glist[index].vertices[i % length];
        new TWEEN.Tween(e).to({
            x: o.x,
            y: o.y,
            z: o.z
        }, 1000).easing(TWEEN.Easing.Exponential.In).delay(1000 * Math.random()).start();
    })
    camera.position.z = 750;
}

задержка Случайное число в пределах 1000 мс, чтобы сделать анимацию более плавной.

оказывать

Это самый важный шаг и причина, по которой вся сцена может двигаться.

function render() {
    //初始粒子体系绕Y轴匀速转动
    if (!flag) {
        geometry.rotateY(Math.PI / 200)
    }
    //环境粒子转动
    around.rotateX(Math.PI / 1000)
    //tween 实时更新粒子位置
    TWEEN.update();
    // 指定相机角度
    camera.lookAt(scene.position);
    // 随机变换顶点颜色
    geometry.colors.forEach(function (color) {
        color.setRGB(Math.random() * 1, Math.random() * 1, Math.random() * 1);
    });
    // 设置几何体的顶点和颜色可以被更新
    geometry.verticesNeedUpdate = true;
    geometry.colorsNeedUpdate = true;
    // 渲染器渲染
    renderer.render(scene, camera);
}

TWEEN.update() и геометрия.verticesNeedUpdate = true вместе определяют возможность отображения анимации переключения системы частиц.

исходный код

гитхаб-адрес

Эпилог

Хотя threejs редко используется в повседневном бизнес-разработке, с развитием webGL и аппаратных устройств, я считаю, что threejs будет сиять в области webVR в будущем, давайте вместе с нетерпением ждем этого.

Добро пожаловать, обратите внимание, в будущем будет совместное использование апплетов threejs и WeChat ^^!

Категории