[Three.js] С Метавселенной дорога к WEB3D открыта

«Это 19-й день моего участия в ноябрьском испытании обновлений. Подробную информацию об этом событии см.:Вызов последнего обновления 2021 г.".

Что происходит, когда видеоигры встречаются с Web 2.0?Когда виртуальные миры встречаются с геопространственными картами Земли? Когда симуляция становится реальностью, а жизнь и бизнес становятся виртуальными? Ваш аватар становится вашим онлайн-агентом, когда вы перемещаетесь по физическому миру с помощью виртуального мира? Все это происходит в Метавселенной.

Метавселенная представляет будущее, измененное виртуальными мирами и широким использованием 3D-технологий.Three.js— очень впечатляющая 3D-библиотека JavaScript, которая также использует WebGL (или 2D Canvas) для рендеринга. С улучшением стандарта API WebGL и поддержкой WebXR,Three.jsОн стал основным инструментом, который можно использовать для создания захватывающих впечатлений. В то же время улучшилась поддержка браузерами 3D-рендеринга и API-интерфейсов устройств WebXR, что делает Интернет все более привлекательной платформой для 3D-контента.

Three.js

Three.jsдаРикардо Кабельо (@mrdoob)Библиотека JavaScript, разработанная в 2010 году (сейчас у нее много участников на Github). Этот невероятный инструмент позволяет пользователям управлять 3D-графикой в браузере очень простым и интуитивно понятным способом, используя технологию WebGL. А технология WebGL очень популярна и широко поддерживается браузерами.

WebGL создает богатые интерактивные возможности для многих устройств и браузеров,Нажмите, чтобы просмотретьУровень поддержки браузера.

Начинать

Эта статья будет построена с использованием Vue в качестве основного фреймворка.Three.jsНапример, вы можете обратиться к кодуGitHub.

Сначала установите зависимости:

npm install three --save

Построить

Теперь начните добавлять код на страницу следующим образом:

<template>
    <div id="app"></div>
</template>

<script>
import * as THREE from "three";
export default {
    name: "App",
    data() {
        return {};
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            const scene = new THREE.Scene();

            // 创建一个基本透视相机 camera
            const camera = new THREE.PerspectiveCamera(
                75,
                window.innerWidth / window.innerHeight,
                0.1,
                1000
            );
            camera.position.z = 4;

            // 创建一个抗锯齿渲染器
            const renderer = new THREE.WebGLRenderer({ antialias: true });

            // 配置渲染器清除颜色
            renderer.setClearColor("#000000");

            // 配置渲染器尺寸
            renderer.setSize(window.innerWidth, window.innerHeight);

            // 添加渲染器到DOM
            document.body.appendChild(renderer.domElement);

            // 创建一个立方体网格
            const geometry = new THREE.BoxGeometry(1, 1, 1);
            const material = new THREE.MeshBasicMaterial({ color: "#433F81" });
            const cube = new THREE.Mesh(geometry, material);

            // 将立方体到场景中
            scene.add(cube);

            const render = function () {
                requestAnimationFrame(render);

                cube.rotation.x += 0.01;
                cube.rotation.y += 0.01;

                renderer.render(scene, camera);
            };

            render();
        },
    },
};
</script>

Затем добавьте простые стили:

body {
    margin: 0;
}
canvas {
    width: 100%;
    height: 100%;
}

выполнить скриптyarn serve, откройте браузер, и вы увидите следующий эффект:

это каждыйThree.jsОбщий шаблон приложений включаетWebGlRenderer,Scene,Camera,следующим образом:

Создать визуализаторWebGlRenderer
СоздайтеScene
СоздайтеCamera

Рендерер — это место, где размещаются результаты сцены. существуетThree.js, может быть несколько сцен, и каждая сцена может иметь разные объекты.

Создал по примеруWebGLRenderer, передайте размер окна в качестве параметра и добавьте его в DOM.

// 创建一个抗锯齿渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });

// 配置渲染器清除颜色
renderer.setClearColor("#000000");

// 配置渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight);

// 添加渲染器到DOM
document.body.appendChild(renderer.domElement);

Сначала нужно создать пустую сцену, куда будет добавлен созданный кубический объект:

const scene = new THREE.Scene();

Наконец создайте камеруcamera,Будузрение, соотношение сторон и ближняя и дальняя плоскости как параметры:

const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);

На данный момент 3 основных элемента приложения Three.js завершены.

Геометрия, материалы и сетки

Второй распространенный шаблон — добавление объектов на сцену:

Создать геометрию
Создать материал
Создать сетку
Добавьте сетку на сцену.

В Three.js сетка представляет собой комбинацию геометрии и материала.

Геометрия — это математическая формула для объекта, в Three.js много геометрии, которая будет рассмотрена в последующих главах, геометрия предоставляет вершины объекта, которые нужно добавить на сцену.

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

Теперь, когда мы знаем, что такое сетки, геометрия и материалы, мы добавим их в сцену. В примере куб создается с использованием базового материала:

// 创建一个立方体网格
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: "#1b55e3" });
const cube = new THREE.Mesh(geometry, material);

// 将立方体到场景中
scene.add(cube);

запрос кадра анимации

Последний фрагмент кода предназначен для анимации сцены с помощьюrequestAnimationFrame, что позволяет функции работать со скоростью 60 кадров в секунду (максимум).

const render = () => {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
};

render();

куб анимация

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

// Rotation (XYZ)  弧度
cube.rotation.x;
cube.rotation.y;
cube.rotation.z;

// Position (XYZ)
cube.position.x;
cube.position.y;
cube.position.z;

// Scale (XYZ)
cube.scale.x;
cube.scale.y;
cube.scale.z;

В примере, если X и Y являются анимацией кубического вращения:

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

приставка

В качестве внешнего интерфейса консоль является лучшим инструментом отладки. Консоль является важным инструментом при работе с Three.js.

накопление эффекта

Теперь, когда логика примера понятна, в сцену будет добавлено больше фрагментов с целью создания более сложных фрагментов.

/**
 * 创建材质的方法
 */
const createMesh = (boxOptions, meshOptions) => {
    const geometry = new THREE.BoxGeometry(...boxOptions);
    const material = new THREE.MeshBasicMaterial(meshOptions);
    return new THREE.Mesh(geometry, material);
};

const cube01 = createMesh([1, 1, 1], {
    color: "#A49FEF",
    wireframe: true,
    transparent: true,
});
scene.add(cube01);

const cube01_wireframe = createMesh([3, 3, 3], {
    color: "#433F81",
    wireframe: true,
    transparent: true,
});
scene.add(cube01_wireframe);

const cube02 = createMesh([1, 1, 1], {
    color: "#A49FEF",
});
scene.add(cube02);

const cube02_wireframe = createMesh([3, 3, 3], {
    color: "#433F81",
    wireframe: true,
    transparent: true,
});

scene.add(cube02_wireframe);

const bar01 = createMesh([10, 0.05, 0.5], {
    color: "#00FFBC",
});
bar01.position.z = 0.5;
scene.add(bar01);

const bar02 = createMesh([10, 0.05, 0.5], {
    color: "#ffffff",
});
bar02.position.z = 0.5;
scene.add(bar02);

const render = () => {
    requestAnimationFrame(render);

    cube01.rotation.x += 0.01;
    cube01.rotation.y += 0.01;

    cube01_wireframe.rotation.x += 0.01;
    cube01_wireframe.rotation.y += 0.01;

    cube02.rotation.x -= 0.01;
    cube02.rotation.y -= 0.01;

    cube02_wireframe.rotation.x -= 0.01;
    cube02_wireframe.rotation.y -= 0.01;

    bar01.rotation.z -= 0.01;
    bar02.rotation.z += 0.01;

    renderer.render(scene, camera);
};

render();

Эффект после бега следующий: