PK Creative празднует Китайский Новый год. Я участвую в "Творческом конкурсе Весеннего фестиваля". Подробности см.:Творческий конкурс "Праздник весны"
задний план
Год Тигра🐅Приближается Праздник Весны, в этой статье используетсяReact + Three.jsСтек технологий для развлечения3Dтворческая страница. Знания, содержащиеся в этой статье, в основном включают:ShadowMaterial,MeshPhongMaterialИспользование и использование двух основных материаловLoadingManagerОтображение прогресса загрузки модели,OrbitControlsсмягчение анимации,TWEENПростые эффекты анимации движения и многое другое.
выполнить
👀Онлайн-превью, адаптированное для мобильного терминала:dragonir.github.io/3d/#/lunar
Представить ресурсы
вGLTFLoader,FBXLoaderиспользуется для добавления к модели,OrbitControlsУправление отслеживанием пользовательских снимков,TWEENИспользуется для создания анимации движения.
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { TWEEN } from "three/examples/jsm/libs/tween.module.min.js";
инициализация сцены
Эта часть контента в основном используется для инициализации сцены и параметров.Для подробного объяснения вы можете перейти по ссылке в конце статьи, чтобы прочитать мою предыдущую статью, и я не буду повторяться в этой статье.
container = document.getElementById('container');
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
container.appendChild(renderer.domElement);
// 场景
scene = new THREE.Scene();
scene.background = new THREE.TextureLoader().load(bgTexture);
// 雾化效果
scene.fog = new THREE.Fog(0xdddddd, 100, 120);
// 摄像机
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(100, 100, 100);
camera.lookAt(new THREE.Vector3(0, 0, 0));
// 平行光
const cube = new THREE.Mesh(new THREE.BoxGeometry(0.001, 0.001, 0.001), new THREE.MeshLambertMaterial({ color: 0xdc161a }));
cube.position.set(0, 0, 0);
light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(20, 20, 8);
light.target = cube;
scene.add(light);
// 环境光
const ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);
// 聚光灯
const spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-20, 20, -2);
scene.add(spotLight);
💡Туман сцены туман
В этом примере при открытии страницыФункция, что модель подгружается издалека и ближнего, а цвет меняется с белого на цветнойчерезFogосуществленный.FogКласс определяет линейный туман, и плотность тумана увеличивается линейно с расстоянием, то есть эффект тумана объектов в сцене изменяется линейно с расстоянием.
Конструктор:Fog(color, near, far).
-
colorАтрибут: Указывает цвет тумана.Например, если он установлен на красный, удаленный объект в сцене черный, ближайший объект в сцене имеет свой собственный цвет, а цвет объекта между самым дальним и самым наиболее близким является смесь собственного цвета объекта и цвета тумана. -
nearАтрибут: указывает минимальное расстояние для применения эффекта тумана, а расстояние от активной камеры меньшеnearобъекты не будут затронуты туманом. -
farАтрибут: указывает максимальное расстояние для применения эффекта тумана, расстояние от активной камеры большеfarобъекты не будут затронуты туманом.
Создайте землю
В этом примере используется фоновое изображение, мне нужноМатериалы, которые могут отображать как прозрачные фоны дисплея, так и тени.Создайте землю, поэтому используйтеShadowMaterialматериал.
var planeGeometry = new THREE.PlaneGeometry(100, 100);
var planeMaterial = new THREE.ShadowMaterial({ opacity: .5 });
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.set(0, -8, 0);
plane.receiveShadow = true;
scene.add(plane);
💡Материал теней ShadowMaterial
Этот материал может принимать тени, но в остальном он полностью прозрачен.
Конструктор:ShadowMaterial(parameters: Object)
-
parameters: (необязательно) Объект, определяющий внешний вид материала с одним или несколькими свойствами.
специальные свойства:
-
.isShadowMaterial[Boolean]: используется для проверки того, является ли этот класс или производный класс теневым материалом. По умолчаниюtrue. Поскольку оно обычно используется для внутренней оптимизации, значение этого свойства изменять не следует. -
.transparent[Boolean]: Определяет, является ли этот материал прозрачным. По умолчаниюtrue.
Создайте магический круг
в тигре🐅Нижняя поверхность создает крутое вращениесамосветящийсяКруглый магический круг.
cycle = new THREE.Mesh(new THREE.PlaneGeometry(40, 40), new THREE.MeshPhongMaterial({
map: new THREE.TextureLoader().load(cycleTexture),
transparent: true
}));
cycle.rotation.x = -0.5 * Math.PI;
cycle.position.set(0, -9, 0);
cycle.receiveShadow = true;
scene.add(cycle);
Наклейка Magic Array:
💡Сетчатый материал MeshPhongMaterial
Материал для глянцевых поверхностей с зеркальными бликами. В материале используются нефизическиеBlinn-Phongмодель для расчета коэффициента отражения.
Конструктор:MeshPhongMaterial(parameters: Object)
-
parameters: (необязательно) Объект, определяющий внешний вид материала с одним или несколькими свойствами.
специальные свойства:
-
.emissive[Color]: Излучаемый (светлый) цвет материала, который в основном представляет собой собственный цвет, не подверженный влиянию других источников света. По умолчанию черный. -
.emissiveMap[Texture]: Установите карту излучения (свечения). По умолчаниюnull. Цвет карты эмиссии регулируется цветом и интенсивностью эмиссии. Если у вас есть карта эмиссии, убедитесь, что цвет эмиссии не черный. -
.emissiveIntensity[Float]: Интенсивность излучаемого света. Настройте цвет свечения. По умолчанию1. -
.shininess[Float]:specularСтепень подсветки, чем выше значение, тем ярче будет. По умолчанию30. -
.specular[Color]: зеркальный цвет материала. По умолчанию0x111111цветColor. Это определяет глянцевитость и глянцевый цвет материала. -
.specularMap[Texture]: Значение карты бликов влияет на то, насколько карты бликов и окружения влияют на поверхность. По умолчаниюnull.
и
MeshLambertMaterialиспользуется вLambertianВ зависимости от модели этот материал может имитировать глянцевые поверхности с зеркальными бликами (например, окрашенное дерево). использоватьPhongКогда модель затенения вычисляет затенение, она вычисляет тень каждого пикселя, что аналогичноMeshLambertMaterialв использованииGouraudРезультаты этой модели более точны, но за счет некоторой производительности.MeshStandardMaterialиMeshPhysicalMaterialТакже используйте эту модель затенения. существуетMeshStandardMaterialилиMeshPhysicalMaterialПроизводительность обычно выше при использовании этого материала на , за счет некоторой графической точности.
текстовая модель
использоватьFBXLoaderзагрузитьГун Си Фа Цай и мир каждый годбуквальный3DТекстовая модель.
const fbxLoader = new FBXLoader();
fbxLoader.load(textModel, mesh => {
mesh.traverse(child => {
if (child.isMesh) {
meshes.push(mesh);
child.castShadow = true;
child.receiveShadow = true;
// 调节材质的金属度、粗糙度、颜色等样式
child.material.metalness = .2;
child.material.roughness = .8;
child.material.color = new THREE.Color(0x111111);
}
});
mesh.position.set(4, 6, -8);
mesh.rotation.set(-80, 0, 0);
mesh.scale.set(.32, .32, .32);
group.add(mesh);
});
📹Билибили3DУчебный портал по генерации текста:Плагин для китайской версии iBlender Иностранцы учат вас использовать китайские иероглифы Китайский шрифт Font 3D Китайские и японские иероглифы Учебное пособие по плагину Blender
модель тигра
Модель тиграgltfформат, используяGLTFLoaderВ процессе загрузки модели обнаруживается, что🕷 bug,loaderНе удалось прочитать объем моделиtotalзначение, поэтому используйте универсальный загрузчикLoadingManagerдля управления процессом загрузки модели.
const manager = new THREE.LoadingManager();
manager.onStart = (url, loaded, total) => {};
manager.onLoad = () => {};
manager.onProgress = async(url, loaded, total) => {
if (Math.floor(loaded / total * 100) === 100) {
this.setState({ loadingProcess: Math.floor(loaded / total * 100) });
} else {
this.setState({ loadingProcess: Math.floor(loaded / total * 100) });
}
};
const gltfLoader = new GLTFLoader(manager);
gltfLoader.load(tigerModel, mesh => {
mesh.scene.traverse(child => {
if (child.isMesh) {
child.castShadow = true;
child.material.metalness = 0;
child.material.roughness = .8;
child.material.transparent = true;
child.material.side = THREE.DoubleSide;
child.material.color = new THREE.Color(0xffffff);
}
});
mesh.scene.rotation.y = Math.PI * 9 / 8;
mesh.scene.position.set(0, -4, 2);
mesh.scene.scale.set(.75, .75, .75);
// 💡 加载模型自身动画
let meshAnimation = mesh.animations[0];
mixer = new THREE.AnimationMixer(mesh.scene);
let animationClip = meshAnimation;
let clipAction = mixer.clipAction(animationClip).play();
animationClip = clipAction.getClip();
group.add(mesh.scene);
scene.add(group)
});
💡Менеджер загрузчика LoadingManager
Его функция заключается в обработке и отслеживании загруженных и ожидающих обработки данных. Если диспетчер защиты не установлен вручную, для загрузчика создается и используется глобальный менеджер загрузчика экземпляров по умолчанию. В общем случае менеджера загрузки по умолчанию достаточно, но иногда необходимо настроить отдельные загрузчики, например, когда вы хотите отображать отдельные полосы загрузки для объектов и текстур.
Метод строительства:LoadingManager(onLoad: Function, onProgress: Function, onError: Function)
-
onLoad: необязательный, эта функция будет вызываться после загрузки всех загрузчиков. -
onProgress: необязательно, эта функция будет вызываться после завершения каждого элемента. -
onError: необязательно, эта функция будет вызываться, когда загрузчик столкнется с ошибкой.
Атрибуты:
-
.onStart[Function]: Вызывается, когда начинается загрузка. параметр:urlзагружаемого предметаurl;itemsLoadedКоличество загруженных в данный момент элементов;itemsTotalОбщее количество необходимых надстроек. Этот метод не определен по умолчанию. -
.onLoad[Function]: Эта функция будет вызываться при загрузке всех элементов. По умолчанию этот метод не определен, если только он не передан в конструкторе. -
.onProgress[Function]: этот метод загружает каждый элемент и вызывается после завершения загрузки. параметр:urlзагружаемого предметаurl;itemsLoadedКоличество загруженных в данный момент элементов;itemsTotalОбщее количество необходимых надстроек. По умолчанию этот метод не определен, если только он не передан в конструкторе. -
.onError[Function]: этот метод будет вызываться при любой ошибке загрузки элемента. параметр:urlзагружен неправильный товарurl. По умолчанию этот метод не определен, если только он не передан в конструкторе.
Добавить анимацию движения камеры
После того, как модель загружена, комбинируяTWEEN.jsреализовать камеру📷Мобильная версия реализует роуминг, что вы и видите при открытии страницыМодель постепенно увеличивается от дальнего к ближнемуэффект анимации.
const Animations = {
animateCamera: (camera, controls, newP, newT, time = 2000, callBack) => {
var tween = new TWEEN.Tween({
x1: camera.position.x,
y1: camera.position.y,
z1: camera.position.z,
x2: controls.target.x,
y2: controls.target.y,
z2: controls.target.z,
});
tween.to({
x1: newP.x,
y1: newP.y,
z1: newP.z,
x2: newT.x,
y2: newT.y,
z2: newT.z,
}, time);
tween.onUpdate(function (object) {
camera.position.x = object.x1;
camera.position.y = object.y1;
camera.position.z = object.z1;
controls.target.x = object.x2;
controls.target.y = object.y2;
controls.target.z = object.z2;
controls.update();
});
tween.onComplete(function () {
controls.enabled = true;
callBack();
});
tween.easing(TWEEN.Easing.Cubic.InOut);
tween.start();
},
}
export default Animations;
Пример вызова:
Animations.animateCamera(camera, controls, { x: 0, y: 5, z: 21 }, { x: 0, y: 0, z: 0 }, 2400, () => {});
💡 TWEEN.js
Это библиотека анимации движения, которая может создавать множество анимационных эффектов. Он делает переход объекта из одного состояния в другое за определенный период времени.TWEEN.jsСуть заключается в ряде алгоритмов функции смягчения, объединенных сCanvas,Three.jsОчень просто добиться множества эффектов.
основное использование:
var tween = new TWEEN.Tween({x: 1}) // position: {x: 1}
.delay(100) // 等待100ms
.to({x: 200}, 1000) // 1s时间，x到200
.onUpdate(render) // 变更期间执行render方法
.onComplete(() => {}) // 动画完成
.onStop(() => {}) // 动画停止
.start(); // 开启动画
📌Чтобы анимация действительно двигалась, вам нужноrequestAnimationFrameвызыватьupdateметод.
TWEEN.update()
Тип замедления:
TWEEN.jsСамая мощная часть заключается в том, что он предоставляет множество часто используемых типов анимации плавности, которые предоставляютсяapi easing()указано. Как используется в примере:
tween.easing(TWEEN.Easing.Cubic.InOut);
цепной вызов:
TWEEN.jsСцепленные вызовы поддерживаются, как в动画Aбыть казненным после动画B, ты можешь это сделатьtweenA.chain(tweenB)Создайте анимацию, которая зацикливается назад и вперед, используя цепочку вызовов:
var tweenA = new TWEEN.Tween(position).to({x: 200}, 1000);
var tweenB = new TWEEN.Tween(position).to({x: 0}, 1000);
tweenA.chain(tweenB);
tweenB.chain(tweenA);
tweenA.start();
Джойстик контроллера
controls.enableDampingУстановить какtrueВы можете включить эффект смягчения, когда мышь перемещает сцену, что приводит к инерции движения.3Dболее реалистично.
controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.enableDamping = true;
controls.maxDistance = 160;
💡Список управления параметром THREE.OrbitControls
//鼠标控制是否可用
controls.enabled = true;
//聚焦坐标
controls.target = new THREE.Vector3();
//最大最小相机移动距离（PerspectiveCamera 景深相机）
controls.minDistance = 0;
controls.maxDistance = Infinity;
//最大最小鼠标缩放大小（OrthographicCamera正交相机）
controls.minZoom = 0;
controls.maxZoom = Infinity;
//最大仰视角和俯视角，范围是0到Math.PI
controls.minPolarAngle = 0;
controls.maxPolarAngle = Math.PI;
//水平方向视角限制，范围[-Math.PI, Math.PI]
controls.minAzimuthAngle = - Infinity;
controls.maxAzimuthAngle = Infinity;
//惯性滑动，滑动大小默认0.25，若开启，那么controls.update()需要加到动画循环函数中
controls.enableDamping = false;
controls.dampingFactor = 0.25;
//滚轮是否可控制zoom，zoom速度默认1
controls.enableZoom = true;
controls.zoomSpeed = 1.0;
//是否可旋转，旋转速度
controls.enableRotate = true;
controls.rotateSpeed = 1.0;
//是否可平移，默认移动速度为7px
controls.enablePan = true;
// 点击箭头键时移动的像素值
controls.keyPanSpeed = 7.0;
//是否自动旋转，自动旋转速度。默认每秒30圈，如果是enabled，那么controls.update()需要加到动画循环函数中
controls.autoRotate = false;
// 当fps为60时每转30s
controls.autoRotateSpeed = 2.0;
//是否能使用键盘
controls.enableKeys = true;
//默认键盘控制上下左右的键
controls.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
//鼠标点击按钮
controls.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT };
Наконец, не забудьте добавить метод масштабирования окна иrequestAnimationFrameМетод обновления.
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
let time = clock.getDelta();
// 老虎动画
mixer && mixer.update(time);
// 补间动画
TWEEN && TWEEN.update();
// 控制器
controls && controls.update();
// 魔法阵
cycle && (cycle.rotation.z += .01);
}
Загрузка страницы Стиль 3D-текста
3DСтили текста в основном создаются путем наложения нескольких слоев.text-shadowосуществленный.
.loading {
font-size: 64px;
color: #FFFFFF;
text-shadow: 0 1px 0 hsl(174,5%,80%),
0 2px 0 hsl(174,5%,75%),
0 3px 0 hsl(174,5%,70%),
0 4px 0 hsl(174,5%,66%),
0 5px 0 hsl(174,5%,64%),
0 6px 0 hsl(174,5%,62%),
0 7px 0 hsl(174,5%,61%),
0 8px 0 hsl(174,5%,60%),
0 0 5px rgba(0,0,0,.05),
0 1px 3px rgba(0,0,0,.2),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.2),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.3);
}
Эффект
Окончательный эффект показан на рисунке ниже. Если вам интересно, вы можете просмотреть его онлайн. Он был адаптирован для мобильного терминала. ускоренный этим小脑斧🐅Анимированные умирают со смеху.
Суммировать
Основные точки знаний, затронутые в этой статье, включают:
-
Fogсцена туман -
ShadowMaterialтеневой материал -
MeshPhongMaterialсетчатый материал -
LoadingManagerМенеджер погрузчика -
TWEEN.jsпромежуточная анимация -
THREE.OrbitControlsконтроль параметров -
CSS3Dстиль текста
приложение
Чтобы узнать об инициализации сцены, освещении, тенях и другой геометрии сетки, прочитайте другие мои статьи. Если вы считаете, что статья полезна для вас, не забудьте一键三连😂.