How many friends are attracted by the headline "deception", the editor is not a headline party.
What I recommend to you today is an open source 3D blog, and I really fell in love with it at first sight.
I believe that everyone, like me, may have spent a lot of time and energy building their own exclusive blog. Just because your blog looks different, cool and new.
We will add different titles to the blog, music, pictures, two-dimensional and other interactive content, but no matter how you "dress up", you will feel tired after watching too much.
Without further ado, let’s take a look at what this blog looks like
The blog starts with a 3D car, whether it is reading articles or a series of other follow-ups, it must be completed by operating the car.
The first time I saw it, it was really eye-catching, and it completely overturned my perception of blogs. It turns out that blogs can also be so cool.
1. Blog Introduction
1.1 Basic information of the project
① Project address: https://github.com/brunosimon/folio-2019
② Project online experience address: https://bruno-simon.com/
The project currently has 3.7k stars ⭐
1.2 Mini games
I have to say that this blog is really interactive. While reading the blog, you can also play various small games. It is really done, and the game and learning are both correct.
Let's see what games it has?
①Driving a car, the first thing we passed by was the "foam wall" mini-game
②The next stop we came to the bowling alley
③ If you are still not satisfied with the above games, there is also "Wild Off-Road"
1.3 The small world built by the author
Based on the small world constructed by the author, we guess that he must be a very interesting person, and the picture depicted by the blog may be a portrayal of the author's life.
Every small scene may be a bit of the author's daily life.
In the scene constructed by the author, from daily activities such as fitness, games, and watching movies, we can think of "one person, one dog, one world", what a comfortable life.
Isn't this the life we dream of, simple, fulfilling and free and easy.
1.4 Contact the author
Following the author's elaborate indicator [INFORMATION], we came to the author's personal information display page
Here we can contact the author through twiter, GitHub, email
2. Deployment project
After seeing so many online demos, how can I run the project.
We only need to enter the project GitHub address: https://github.com/brunosimon/folio-2019 and then the specific steps have been introduced in readme.md
In fact, just like we usually start the vue\react project, install dependencies, and then start
# 1.下载项目
git clone git@github.com:brunosimon/folio-2019.git
# 2.安装了 Parcel（Web 应用打包工具）
npm install -g parcel-bundler
# 3.安装依赖（仅第一次需要）
npm i
# 4.运行
npm run dev
Browser input: http://localhost:8080 to access
3. Project overview
The following summary comes from the big guy with HelloGitHub
A lot of people don’t understand, it doesn’t matter, we just have a general understanding of the technology used in the project, and then we can show our own blog.
We found the familiar srcfolder, which contains the core code. Open the folder, I believe you already know, the entrance isindex.js
import './style/main.css'
import Application from './javascript/Application.js'
window.application = new Application({
$canvas: document.querySelector('.js-canvas'),
useComposer: true
})
When it comes to 3D, it must be what everyone thinks of Three.js. Three.jsis a 3D JavaScriptlibrary
Address: https://github.com/mrdoob/three.js
Another library used in the project is dat.gui.jsit is a lightweight GUI for changing variables in JavaScript
Interested partners can find relevant information for in-depth research and study
4. Create your own 3D blog
Having said so much, since it is a blogging system. So what we are most concerned about is: how to display our articles?
We can find the list of project articles by following the [ PROJECTS ] "road sign" on the small world . Of course , the ones shown here are the author's. The next thing we need to do is to replace the content with our own.
We found ProjectsSection.jsthe file and found it in the file setList. Here is the list of articles. The modification is as follows
setList()
{
this.list = [
{
name: 'www.xiezhrspace.cn',
imageSources:
[
projectsxiezhrspaceSources
],
floorTexture: this.resources.items.projectsThreejsJourneyFloorTexture,
link:
{
href: 'http://www.xiezhrspace.cn',
x: - 4.8,
y: - 2,
halfExtents:
{
x: 3.2,
y: 1.5
}
},
distinctions:
[
{
type: 'fwa', x: 2.95, y: 3.15 }
]
}
]
}
Combined with the above code, the changes mainly include imageSources , floorTexture,href
① imageSources: It is the actual content on the "billboard", here we show it by introducing pictures.
We can imitate the previous ones for the reference rules of pictures
import projectsxiezhrspaceSources from '../../../models/projects/pots/xiezhrspace001.jpg'
Then it is displayed in imageSource
imageSources:
[
projectsxiezhrspaceSources
]
② floorTexture : That is, the texture on the floor. Where is this modified? We find Resources.jsthe file and replace the picture in the code below with our own
import projectsThreejsJourneyFloorSource from '../models/projects/threejsJourney/xiezhrfloor.png'
Then it is floorTextureused in
floorTexture: this.resources.items.projectsThreejsJourneyFloorTexture
③ herf: Article jump path. Here we set the path to our own article address
After the above changes, after we recompile and publish the project, we have our own 3D blog, the effect is as follows, isn’t it cool?
The above is the whole content of this issue, see you next time (●'◡'●)
If you are also interested in this 3D blog, hurry up and get one.