复现B站Up搭建一个3d网站实例

up自己的3d网站也是根据国外大佬改的源码地址：https://github.com/0xFloyd/Portfolio_2020

我自己的源码地址(基于上面有些添加中文注释和一些改变)：https://github.com/Dearning/3DEntrance

搭建教程主要面对网站搭建新手(转载来源 https://github.com/AirHua-byte/AirHua-byte.github.io)

项目环境

安装node8.0+, 没有安装node可以前往官网安装

安装一个编辑器，推荐vscode

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

node安装与配置：https://www.bilibili.com/video/BV11V411o7Zh

vscode安装与配置：https://www.bilibili.com/video/BV1P64y187Fh

项目运行

// 安装依赖
npm install & cnpm install

// 本地运行
npm run dev

// 打包
npm run build

代码

如果没有接触过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';

部署github-pages

安装git

不会的可以查看这个教程：https://www.bilibili.com/video/BV12E411k74T

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

找到settings下面的pages

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

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

自动化脚本部署

可以把这个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

然后在config.json中加入

"scripts": {
	...
    "deploy": "bash deploy.sh"
  },

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

写在最后

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

鞠躬...