Сетчатая анимация Three.js: добавление движения к 3D-объектам
Описание
Three.js позволяет новичкам легко создавать увлекательную 3D-графику и анимацию в Интернете. С помощью анимации сетки вы можете оживить свои 3D-объекты, добавив движение и изменив их внешний вид. Такие методы, как анимация по ключевым кадрам и цели преобразования, обеспечивают плавные переходы и интерактивный опыт. Three.js предоставляет удобный для начинающих API, учебные пособия и документацию, которые помогут вам. Исследуйте захватывающий мир анимации сетки с помощью Three.js и сделайте свои веб-проекты визуально ошеломляющими и интерактивными. Будьте готовы раскрыть свой творческий потенциал и вывести свои проекты на новый уровень с анимацией сетки Three.js.
1. Название
2. Описание
3. Фрагмент
4. Объяснение
5. Полный код
6. Вывод
7. Резюме
8. Следующий и предыдущий блог
3. Фрагмент
/*-------------box geometry-------------*/
const demoMeshGeometry = new THREE.BoxGeometry(10, 10, 10);
const demoMeshMaterial = new THREE.MeshBasicMaterial({
color: '#ff0',
});
demoMesh = new THREE.Mesh(demoMeshGeometry, demoMeshMaterial);
demoMesh.position.set(0, 5, 0)
scene.add(demoMesh)
4. Объяснение
Фрагмент кода создает коробчатую сетку с помощью Three.js. Вот упрощенное объяснение:
- `demoMeshGeometry` определяет геометрию меша, определяя его размер как 10 единиц ширины, высоты и глубины.
- `demoMeshMaterial` определяет материал, используемый для меша, устанавливая его цвет на желтый (`'# ff0'`).
— «demoMesh» — это фактический объект сетки, созданный путем объединения геометрии и материала.
— Позиция сетки устанавливается на «(0, 5, 0)», что означает он будет размещен в центре сцены, на высоте 5 единиц над землей.
- Наконец, сетка добавлена к сцене, что делает ее видимой в 3D-окружении.
Таким образом, этот код создает простую сетку желтого прямоугольника размером 10 единиц и размещает ее в центре сцены, немного над землей.
let time = Date.now()
function animate() {
const currentTime = Date.now()
const deltaTime = currentTime - time
time = currentTime
demoMesh.rotation.y += 0.001 * deltaTime
demoMesh.rotation.x += 0.001 * deltaTime
requestAnimationFrame(animate)
renderer.render(scene, camera);
}In the given code snippet, we have the following lines:
Фрагмент кода устанавливает цикл анимации с использованием Three.js. Вот упрощенное объяснение:
- Переменная `time` инициализируется текущей отметкой времени с помощью `Date.now()`. Он будет использоваться для расчета разницы во времени между кадрами анимации.
— Определена функция `animate`, которая будет вызываться рекурсивно для обновления и рендеринга сцены.
– Внутри функции `animate` текущая метка времени сохраняется в переменной `currentTime`, и вычисляется разница во времени (`deltaTime`) между текущим и предыдущим кадрами.
- Поворот объекта `demoMesh` обновляется путем увеличения `y` и `x` углы поворота с небольшим значением, умноженным на `deltaTime`. Это создает эффект плавного вращения с течением времени.
– Функция requestAnimationFrame вызывается, чтобы запросить у браузера повторный вызов `animate` для следующего кадра, создавая цикл анимации.
– Наконец, средство визуализации используется для рендеринга обновленной сцены с точки зрения камеры.
Таким образом, этот код устанавливает непрерывный цикл анимации, который постепенно вращает объект demoMesh по осям y и x. Скорость вращения определяется временем, прошедшим между кадрами, что приводит к плавной и динамичной анимации.
5. Полный код
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js - Boilerplate</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="/cdn/editor/css/main.css">
<style>
body {
background-color: grey
}
html,
body {
margin: 0;
height: 100%;
}
#c {
width: 100%;
height: 100%;
display: block;
color: rgb(40, 63, 141);
}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script type="importmap">
{
"imports": {
"three": "./threeJS/build/three.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from './threeJS/examples/jsm/controls/OrbitControls.js';
import * as DAT from './threeJS/newadded/DatGUI.js';
var canvas, renderer, scene, camera, controls, demoMesh;
// var gui = new DAT.GUI();
function init() {
canvas = document.querySelector('#c');
renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(window.innerWidth, window.innerHeight);
scene = new THREE.Scene();
scene.background = new THREE.Color('black');
const cubeTextureLoader = new THREE.CubeTextureLoader()
scene.background = new THREE.Color('green');
const ambientLight = new THREE.AmbientLight(0xffffff, 0.7)
scene.add(ambientLight)
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
scene.add(directionalLight);
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.y = 10;
camera.position.z = 25;
controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.6;
controls.screenSpacePanning = false;
controls.update();
/*-----------------texture-------------------*/
var map = new THREE.TextureLoader().load('./static/image/land.jpg');
const floorGeometry = new THREE.PlaneGeometry(50, 50, 128, 128);
const floorMaterial = new THREE.MeshStandardMaterial({
color: '#777777',
metalness: 0.2,
roughness: 0.6,
envMapIntensity: 0.5,
side: THREE.DoubleSide,
map: map
});
const floor = new THREE.Mesh(floorGeometry, floorMaterial)
floor.receiveShadow = true;
floor.rotation.x = - Math.PI * 0.5;
floor.position.set(0, 0, 0);
scene.add(floor);
/*-------------box geometry-------------*/
const demoMeshGeometry = new THREE.BoxGeometry(10, 10, 10);
const demoMeshMaterial = new THREE.MeshBasicMaterial({
color: '#ff0',
});
demoMesh = new THREE.Mesh(demoMeshGeometry, demoMeshMaterial);
demoMesh.position.set(0, 5, 0)
scene.add(demoMesh)
}
let time = Date.now()
function animate() {
const currentTime = Date.now()
const deltaTime = currentTime - time
time = currentTime
demoMesh.rotation.y += 0.001 * deltaTime
demoMesh.rotation.x += 0.001 * deltaTime
requestAnimationFrame(animate)
renderer.render(scene, camera);
}
init()
animate();
</script>
</body>
</html>
6. Вывод
7. Резюме
что мы узнали из этого блога
В сегодняшнем блоге мы узнали об анимации сетки Three.js. Мы рассмотрели, как создать базовую сцену с вращающейся сеткой, используя BoxGeometry и MeshBasicMaterial. Мы также реализовали простой цикл анимации с помощью requestAnimationFrame и рассчитали разницу во времени между кадрами для достижения плавной анимации. Регулируя углы поворота сетки с течением времени, мы создали привлекательный и динамичный эффект анимации. Этот блог послужил введением в анимацию сетки в Three.js, предоставив новичкам основу для экспериментов и создания собственных интерактивных 3D-анимаций.
8. Следующий и предыдущий блог
предыдущий блог : Создание потрясающих 3D-визуализаций с помощью Three.js: руководство для начинающих
следующий блог : Пример текстуры THREEJS
