블로깅 하면 누구나 다 익숙할텐데 직장에서 수년간 열심히 일한 베테랑이든, 학교에서 열심히 일한 어린 새든 '옷 입히기'를 해본 경험이 있을 것이다. " 블로그: 좋아하는 사진 넣기, 멋진 상호 작용 추가, DIY 블로그 테마로 변경 등. 하지만 아무리 '옷을 입혀'도 납작한 '죽은 몸'에서 벗어날 수 없다.
오늘은 HelloGitHub에서 오픈소스 3D 블로그 프로젝트를 소개합니다.솔직히 이 블로그를 처음 방문했을 때 블로그의 인지도가 전복되어 깜짝 놀랐습니다. 입장 후 기사를 읽기 전에 3D 자동차를 제어하여 기사를 "찾아야"하는데, 이는 매우 흥미 롭습니다!
다음으로 이 글에서는 먼저 프로젝트를 로컬에서 실행하는 방법을 소개한 다음 소스 코드 및 관련 기술을 설명하고 마지막으로 코드를 수정하고 자신의 블로그 게시물을 넣어 3D 블로그로 업그레이드하는 방법을 알려드립니다! 이제 이 오픈 소스 3D 블로그에 들어가 놀라움을 흥미로 바꾸겠습니다.
1. 소개
1.1 설치 단계
말을 많이 하지 말고 그냥 달리고 말하세요. 4단계만 거치면 됩니다. 명령은 다음과 같습니다.
# 1.下载项目
git clone [email protected]:brunosimon/folio-2019.git
# 2.安装了 Parcel（Web 应用打包工具）
npm install -g parcel-bundler
# 3.安装依赖（仅第一次需要）
npm i
# 4.运行
npm run dev
팁: 여기서는 Node.js 설치 방법을 !
1.2 동작 효과
먼저 이 블로그가 어떻게 생겼는지 살펴보겠습니다.
끝없는지도에서 자유롭게 질주하는 빨간색의 귀여운 지프, 경적을 울려 재미를 더할 수도 있습니다. 예! 이 블로그에는 음향 효과도 함께 제공됩니다.
1.3 미니 게임
차를 "운전"하고 노래를 부르는 것처럼 작가가 만든 3D 세계에 갑자기 "납치"됩니다! 그는 간단한 모델을 가지고 있을 뿐만 아니라 매우 흥미로운 미니 게임도 함께 제공하기 때문입니다.
예를 들어 갑자기 가속하여 다음 세 가지 "거품 벽"에 부딪힐 수 있습니다.
또는 작은 지프에서 "볼링":
또는 "흥미로운" 크로스컨트리 훈련을 하십시오.
이 작은 게임은 매우 흥미 롭습니까?
1.4 저자 소개
이렇게 흥미로운 3D 블로그를 작성할 수 있는 작가는 매우 흥미로운 사람임에 틀림없지만, 그는 또한 이 프로젝트에 자신의 삶을 "묘사"했습니다.
이 상사의 일상은 대략 "1인 1개"라고 짐작할 수 있으며, 그는 자신의 개를 매우 사랑합니다. 게임 외에도 피트니스, 외출 및 기타 활동이 모두 있습니다.
아! 즐거운 인생이구나~ 프로그래머의 인생은 어디있나? 이것은 분명히 부와 자유의 삶입니다! 이 블로그가 단지 삶의 기록이라고 생각한다면 틀렸습니다 우리의 작은 지프가 "프로젝트"로 운전할 때 저자가 작성한 많은 기술 블로그 게시물을 보게 될 것입니다.
숙제에 대해 수다를 떨고 나면 코드의 세계로 들어가 보자!
2. 프로젝트 개요
2.1 프로젝트 구조
먼저 프로젝트 구조를 살펴보겠습니다.
이 디렉토리에 대한 간략한 개요:
이해할 수 없는 파일이 많이 있습니까? 중요하지 않습니다. 모든 핵심 코드가 있는 가장 친숙한 src폴더 . 그리고 제일 중요한 코드 파일, 한눈에 보이실 거라 믿습니다, 네! 그것은 index.js.
import './style/main.css'
import Application from './javascript/Application.js'
window.application = new Application({
$canvas: document.querySelector('.js-canvas'),
useComposer: true
})
index.js이것은 매우 간단하지 않습니까? 방금 본 모든 효과가 하나라는 것을 알려줍니다 canvas! 로직을 처리하기 위한 코드는 Application.js여기에서 프로젝트에 사용된 몇 가지 중요한 기술 스택과 핵심 라이브러리를 추출하고 간략하게 소개합니다.
많은 친구들이 이미 짐작했다고 생각합니다. 예! 그것은 Three.js.
2.2 Three.js
Three.js는 개발자가 웹에서 3D 경험을 만들 수 있는 3D JavaScript 라이브러리이며 WebGL과 최고의 파트너입니다.
그렇다면 WebGL은 무엇입니까? WebGL은 대부분의 최신 브라우저와 호환되고 그래픽 처리 장치(GPU)를 직접 사용하는 JavaScript API로, 뛰어난 최적화와 더 많은 제어가 가능하고 빠릅니다.
하지만 네이티브 WebGL은 어렵고 복잡해서 네이티브 WebGL을 이용해 캔버스에 삼각형을 그리려면 최소 100줄 이상의 코드가 필요합니다. 프로그래머의 머리카락 몇 올을 살리기 위해 Three.js 라이브러리가 탄생했습니다. 그 가치는 위의 모든 것을 처리하는 프로세스를 단순화하고 몇 줄의 코드만으로 애니메이션 3D 장면을 얻을 수 있다는 것입니다 .
2.3 dat.gui
이 3D 블로그 프로젝트에 사용된 또 다른 라이브러리는 JavaScript에서 변수를 변경하기 위한 경량 그래픽 사용자 인터페이스인 dat.gui.js입니다. 이 라이브러리를 사용하면 인터페이스 구성 요소를 쉽게 만들 수 있습니다. 구현된 인터페이스는 대략 다음과 같습니다.
3. 소스코드 설명
중요한 기술 포인트를 소개한 후 논리 처리의 핵심 파일로 돌아가서 소스 코드 설명을 Application.js시작하겠습니다 .
3.1 세상 만들기
코드 구조에서 항목이 this.setWorld에 . 여기서 코드를 간단히 살펴보겠습니다.
constructor(_options)
{
// Options
this.config = _options.config
this.debug = _options.debug
...
// Set up
this.container = new THREE.Object3D()
this.container.matrixAutoUpdate = false
this.setSounds() // 声音
this.setControls() // 一些按键控制等
this.setFloor() // 地板设置
this.setAreas() // 区域设置
this.setStartingScreen() // 首屏动画（loading > start）
}
위의 설정 중 일부는 한눈에 이해할 수 있다고 생각합니다 의심을 유발할 수 있는 몇 가지 메서드 이름과 간단한 설명입니다. this.setControls그것은 주로 두 가지 방법을 포함합니다: this.setActions그리고 this.setKeyboard여기 작은 지프 운전 및 경적의 버튼 컨트롤이 있습니다.
그리고 this.setFloor주로 . 원래 색 구성표가 마음에 들지 않으면 "다채로운" 색상을 사용자 정의할 수 있지만 전제는 특정 미학을 갖는 것입니다. 아래 그림과 같이 뒤집어야 합니다 .
여기에서는 장면의 네 모서리(왼쪽 위, 오른쪽 위, 왼쪽 아래 및 오른쪽 아래)의 색상을 사용자 지정합니다. 코드 스니펫은 다음과 같습니다.
// Colors 修改前
this.colors = {}
this.colors.topLeft = '#f5883c'
this.colors.topRight = '#ff9043'
this.colors.bottomRight = '#fccf92'
this.colors.bottomLeft = '#f5aa58'
// Colors 修改后
this.colors = {}
this.colors.topLeft = 'red'
this.colors.topRight = 'yello'
this.colors.bottomRight = 'blue'
this.colors.bottomLeft = 'black'
나머지는 this.setAreas주로 일부 마우스 이벤트에 대한 것이므로 , 등 mousemove을 포함하여 마우스로 전체 "세계"를 드래그하고 탐색할 수 있습니다. 관련 코드는 게시되지 않으며 관심 있는 사람은 스스로 탐색할 수 있습니다~mousedowntouchstart
3.2 시작 후
위의 구성은 시작 페이지가 나타날 때 실행되는 코드로 일부 리소스를 미리 로드하는 것과 동일하며 나머지 로드는 "시작"을 클릭한 후에 시작됩니다.
World.js파일 에서 해당 코드도 찾을 수 있습니다 this.start.
// On interact, reveal 点击 start 的交互
this.startingScreen.area.on('interact', () =>
{
TweenLite.to(this.startingScreen.startLabel.material, 0.3, { opacity: 0, delay: 0.4 })
// 剩下的资源加载
this.start()
window.setTimeout(() =>
{
this.reveal.go()
}, 600)
})
start이 방법에서는 작은 지프의 로딩, 가장 알고 싶은 기사 목록의 로딩 등 더 많은 콘텐츠가 로딩되는 것을 볼 수 있습니다.
start()
{
this.setCar() // 汽车加载
this.areas.car = this.car
this.setSections() // 文章加载
}
그렇구나 그렇구나 다음으로 물건 입구의 방향 표시를 찾아야 한다. 즉, x축과 y축은 캔버스에서 객체의 좌표 위치를 나타내며 원하는 위치로 이동할 수도 있습니다.
// Projects
this.sections.projects = new ProjectsSection({
...options,
x: 30,
y: - 30
})
여기서 우리는 아래 그림과 같이 오른손 좌표계를 채택하고 왼손 좌표계에 해당하는 의 좌표축 Three.js시스템 .
따라서 x의 값을 높이면 전체 기사의 거리가 멀어지는 것을 알 수 있으며 마찬가지로 y의 값을 수정해도 같은 효과를 냅니다.
3.3 기사 목록
ProjectsSection.js파일을 보니 그 안에 많은 사진이 있는 것을 발견했습니다. 아래를 내려다보는 것에 대해 걱정하지 마십시오. 그러면 하나가 보일 것입니다 setList. 변경 사항은 다음과 같습니다.
setList()
{
this.list = [
{
name: 'HelloGitHub',
imageSources:
[
projectsThreejsJourneySlideESources
],
floorTexture: this.resources.items.projectsThreejsJourneyFloorTexture,
link:
{
href: 'https://hellogithub.com/',
// 控制按钮的位置
x: - 5.8,
y: - 4.5,
// 控制open按钮大小（0,0）的时候无边框
halfExtents:
{
x: 2,
y: 1
}
},
distinctions:
[
// 一个3d模型的图标,xy是坐标轴位置
{ type: 'fwa', x: 4.15, y: 5.15 }
]
}
]
}
이런 식으로 "자신의" 3D 블로그가 있지만 겸손하게 말하면 3D는 다른 사람의 것이며 블로그는 자신의 것입니다 . 자세히 살펴보겠습니다.
그림과 결합하여 위의 코드를 설명하겠습니다.
1. imageSources: "게시판"에 있는 사진입니다. 여기는 HelloGitHub 커뮤니티 홈페이지 사진 한 장만 만들었습니다. 원본 블로그처럼 여러 장의 사진을 올려주셔도 됩니다.
이미지 저장 주소 및 가져오기 규칙:
import projectsThreejsJourneySlideESources from '../../../models/projects/threejsJourney/slideE.jpg'
2. floorTexture"바닥 텍스처", 즉 우리가 땅에 "누워 있는" 그림을 보면 다음과 같이 질문할 수 있습니다. 그림을 그 위에 놓고 texture텍스처
이것은 3D 세계이기 때문에 마우스를 위아래로 드래그하면 그래프의 비전이 변경되므로 그래프를 3D 컨테이너에 "넣어야" 우리가 구축하는 3D 세계가 실제 문자가 됩니다. . 따라서 여기에서 코드를 따라 이 그래프가 생성되는 방식을 추론합니다.
floorTexture: this.resources.items.projectsThreejsJourneyFloorTexture,
우리는 resources물체 . 레이어 Application.js별로 . Resources.js파일 에 들어가면 .png, .glb등과 같은 많은 리소스 파일이 있음을 알 수 있습니다.
.glb 파일이란?
GL 전송 형식(glTF)으로 저장된 3D 모델을 포함하는 위에서 언급한 .glb접미사가 있는 파일. 노드 계층 구조, 카메라 및 재료, 애니메이션 및 메시와 같은 3D 모델에 대한 정보를 이진 형식으로 저장합니다. .glbfile은 .glTF파일 .
3.4 조금 더 깊이 들어가기
그런 다음 위에서 텍스처가 생성되는 방법을 탐색하고 Resources.js파일을 확인하십시오.
Resources.js위의 키워드에서 직접 키워드를 찾을 수 없으면 projectsThreejsJourneyFloorTexture영어 단어를 삭제하고 다시 시도하십시오. this.loader.load이 .
{ name: 'projectsThreejsJourneyFloor', source: projectsThreejsJourneyFloorSource, type: 'texture' },
해당 source필드를 다시 검색하면 관련 이미지 파일을 찾을 수 있습니다.
import projectsThreejsJourneyFloorSource from '../models/projects/threejsJourney/floorTexture2.png'
궁금하시겠지만 왜 직접 검색이 안되나요? 긴 코드를 접고 살펴보면 이름이 있는 처리기 함수를 찾을 수 있습니다.
this.loader.on('fileEnd', (_resource, _data) =>
{
this.items[_resource.name] = _data
// Texture
if(_resource.type === 'texture')
{
const texture = new THREE.Texture(_data)
texture.needsUpdate = true
this.items[`${_resource.name}Texture`] = texture
}
// Trigger progress
this.trigger('progress', [this.loader.loaded / this.loader.toLoad])
})
맞습니다, 처리 기능은 개체 이름 Texture으로 . 이는 일반 그림 파일에서 3D 컨테이너에 첨부해야 하는 "텍스처" 파일로 변경되었기 때문에 매우 엄격하다고 할 수 있습니다.
이제 위의 setList방법 . 기타 파일 링크, 모델의 좌표축 위치, 이미 한 눈에 보셨으리라 믿습니다!
다섯, 끝
소스 코드를 읽는 것은 쉬운 과정이 아니어야 합니다. 특히 초보자부터 시작해야 합니다. 어렵지만 저에게 영감을 주는 작은 놀라움이 종종 있습니다. 예를 들어 소스 코드를 반복해서 읽는 과정에서 갑자기 작은 지식 포인트를 발견하는 것은 매우 흥미 롭습니다.
예를 들어, 이 3D 블로그 프로젝트에는 다음과 같은 그림이 많이 있습니다.
클릭하니 어두운 그림이 보여서 처음에는 뭔지 몰랐는데 코드에 대한 이해가 깊어지더군요. 갑자기 이것이 모델의 위치와 그림자 효과의 렌더링이라는 생각이 들었습니다.
마지막으로 이 짧은 3D 블로그 항목 여정이 시작되었으며 모든 승객에게 작별 인사를 하려고 합니다. 사실 전체 원본 문서의 내용은 많은 3D 모델 파일, 패키지 구성 최적화 등을 포함하여 매우 풍부하여 보다 심층적이고 체계적으로 연구할 가치가 있지만 제한된 공간과 능력으로 인해 작성하겠습니다. 오늘은 여기서 먼저. 소스 코드 탐색에 관심이 있다면 예상치 못한 더 많은 발견을 발견하게 될 것입니다.
위 내용은 이 글의 모든 내용입니다.이 글이 잘 쓰여졌다고 생각되면 좋아요 를 눌러주세요 .여러분의 지원은 제 업데이트의 원동력입니다.