零基础搭建一个3d网站

1/22/2022 three.js

# 0成本搭建一个3d网站实例

# 拿源码前b站视频三连了吗(创作不易,求支持,呜呜呜)

# 后期会一直坚持出好的内容的,也欢迎大家star,学生党也可以加我QQ: 3301833942一起交流学习都可以鸭

我自己的3d网站也是根据国外大佬改的,上个视频可能开头没说明,产生一些误会,这里先放大佬源码地址:https://github.com/0xFloyd/Portfolio_2020 (opens new window)

我自己的源码地址(基于上面有些添加中文注释和一些改变):https://github.com/AirHua-byte/AirHua-byte.github.io (opens new window)

最终搭建体验地址(首次加载需要时间,耐心等待):http://love.huabyte.com (opens new window)

# 搭建教程主要面对网站搭建新手

# 项目环境

安装node8.0+, 没有安装node可以前往官网 (opens new window)安装

安装一个编辑器,推荐vscode (opens new window)

实不会的参考一下教程,也可以自行搜索

node安装与配置:https://www.bilibili.com/video/BV11V411o7Zh (opens new window)

vscode安装与配置:https://www.bilibili.com/video/BV1P64y187Fh (opens new window)

# 项目运行

// 安装依赖
npm install & cnpm install

// 本地运行
npm run dev

// 打包
npm run build
1
2
3
4
5
6
7
8

# 代码

  • 如果没有接触过three.js想对这个网站修改,可以看看官方文档,我的博客也有three相关文档,最近正在更新,以前写在本地没上传。

  • 如果拿这个网站作为模板直接修改成自己的网站的话,关注以下代码部分,图片可以直接拖到PS中修改成自己的导出png透明格式替换即可。

// texture.js

let billboardTextures = {};
// 第一块展板图片地址
billboardTextures.blogTexture = '../src/jsm/blog.png';
// 第二块展板图片地址
billboardTextures.musicTexture =
  '../src/jsm/music.png';
// 第三块展板图片地址
billboardTextures.fundTexture =
  '../src/jsm/fund.png';

let boxTexture = {};
// 链接的图标地址
boxTexture.Github = '../src/jsm/githubLogo.png';
boxTexture.BiliBili = '../src/jsm/BiliBili.png';
boxTexture.QQ = '../src/jsm/qq.png';
boxTexture.mail = '../src/jsm/envelope.png';
boxTexture.reactIcon = '../src/jsm/react.png';
boxTexture.allSkills = '../src/jsm/allSkills.png';
boxTexture.lensFlareMain = '../src/jsm/lensflare0.png';
boxTexture.skrillex = '../src/jsm/skrillex.png';
boxTexture.edmText = '../src/jsm/EDM.png';

// 砖块材质
let stoneTexture = '../src/jsm/stone.png';
// 展板木头材质
let woodTexture = '../src/jsm/woodTexture.jpg';

// 文字图片地址
let inputText = {};
inputText.terpSolutionsText = '../src/jsm/terp-solutions-text.png';
inputText.activities = '../src/jsm/activities_text.png';
inputText.bagholderBetsText = '../src/jsm/bagholderbets-text.png';
inputText.homeSweetHomeText = '../src/jsm/home-sweet-home-text.png';
inputText.staticPortfolio = '../src/jsm/static-portfolio.png';
inputText.pcControl = '../src/jsm/pc-control.png'
inputText.mobileControl = '../src/jsm/mobile-control.png'
inputText.link = '../src/jsm/link.png'

//SVG
let SVG = {};
SVG.reactLogo = '../src/jsm/react-svg.svg';

// 链接的跳转地址
let URL = {};
URL.blog =
  'https://huabyte.com';
URL.ryanfloyd = 'https://huabyte.com';
URL.fund = 'https://github.com/AirHua-byte/FundSpider';
URL.gitHub = 'https://github.com/AirHua-byte';
URL.BiliBili = 'https://space.bilibili.com/450443708';
URL.email = 'https://airhua602@gmail.com';
URL.music = 'https://music.huabyte.com';
URL.devTo =
  'http://wpa.qq.com/msgrd?v=3&uin=3301833942&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:3301833942:41';
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

# 部署github-pages

# 安装git

不会的可以查看这个教程:https://www.bilibili.com/video/BV12E411k74T (opens new window)

接下来我们就可以部署到免费的 Github Pages 上。我们在 Github 上新建一个仓库,这里我取得仓库名为AirHua-byte.github.io,注意建好自己的仓库都应该是(你的用户名.github.io)

1642856469277.png

找到settings下面的pages

1642856524313.png

注意查看自己创建的分支和这里是一样的,点击Save保存后,过一会点击链接就出现了。

一般部署完需要等待几分钟访问才会有,耐心等一会就行。

1642856615230.png

# 自动化脚本部署

可以把这个shell脚本放到项目目录中,新建deploy.sh,将仓库git地址修改成你自己的

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run build

# 如果是发布到自定义域名
# echo 'www.yourwebsite.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果你想要部署到 https://USERNAME.github.io
git push -f git@github.com:AirHua-byte/AirHua-byte.github.io.git main

# 如果发布到 https://USERNAME.github.io/<REPO>  REPO=github上的项目
# git push -f git@github.com:USERNAME/<REPO>.git master:gh-pages

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

然后在config.json中加入

"scripts": {
	...
    "deploy": "bash deploy.sh"
  },
1
2
3
4

就可以运行npm run deploy实现自动化部署啦。

# 写在最后

搭建成功回来交作业呀(狗头),如果对你有帮助给个三连+关注吧,github可以给个star最好了,真的非常感谢大家的支持,我会更加努力,b站账号后面应该会更比较多发现的一些有意思的项目,争取给大家也带来有用的东西。

鞠躬...

【钢琴】你不要担心
石頭Piano