部署属于自己的3D Blog

成品预览

threejs 简单介绍

Three.js是一个强大的JavaScript库，用于在Web上创建令人惊叹的3D图形和交互体验。无论是建立虚拟现实应用、创建游戏还是展示复杂的数据可视化，Three.js都是一个理想的选择。通过Three.js，你可以轻松地加载和渲染3D模型、纹理和动画。它提供了丰富的功能和工具，帮助你创建逼真的光照效果、阴影、粒子系统、物理模拟等。你可以控制相机视角、添加用户交互、处理鼠标和触摸事件，以及实现复杂的动画效果。

Three.js具有广泛的浏览器支持，可以在主流的Web浏览器中运行，包括Chrome、Firefox、Safari和Edge。它基于WebGL技术，利用了GPU加速，能够在现代计算机和移动设备上实现高性能的实时渲染。

不仅如此，Three.js还有一个庞大的社区支持，提供了大量的示例、教程和资源，帮助你入门并解决问题。你可以从基本的几何形状开始，逐渐构建复杂的场景和效果，甚至与其他Web技术（如HTML、CSS和JavaScript）进行无缝集成。

项目准备工作

这个项目是github上面一个开源项目，看着shine布置了一个，我也想布置一个，下面带大家从0开始布置一个这样子的3d博客。

项目github仓库

先去github，把这个项目给download下来，解压到本地，在vscode中打开：

新建终端，在终端中输入一下命令：

1
2
3

npm install -g parcel-bundler
npm i
npm run dev

如果以下报错：

1	digital envelope routines::unsupported

打开package.json文件，将：

"scripts": {
  "build": "webpack --config ./bundler/webpack.prod.js",
  "dev": "webpack-dev-server --config ./bundler/webpack.dev.js",
  "watch": "webpack --watch --config ./bundler/webpack.config.js"
}

替换为：

"scripts": {
  "build": "webpack --config ./bundler/webpack.prod.js",
  "dev": "set NODE_OPTIONS=--openssl-legacy-provider && webpack-dev-server --config ./bundler/webpack.dev.js",
  "watch": "webpack --watch --config ./bundler/webpack.config.js"
}

重新执行npm run dev，成功访问，打包项目使用下面这条命令：

1	npm run build

如果以下错误：

ERROR in bundle.73dcc4ebce4c4186553d.js from Terser
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:69:19)
    at Object.createHash (node:crypto:133:10)
    at D:\3d blog\node_modules\terser-webpack-plugin\dist\index.js:217:37
    at Array.forEach (<anonymous>)
    at TerserPlugin.optimizeFn (D:\3d blog\node_modules\terser-webpack-plugin\dist\index.js:160:259)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\3d blog\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook (D:\3d blog\node_modules\tapable\lib\Hook.js:154:20)
    at D:\3d blog\node_modules\webpack\lib\Compilation.js:1409:36
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\3d blog\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (D:\3d blog\node_modules\tapable\lib\Hook.js:154:20)
    at D:\3d blog\node_modules\webpack\lib\Compilation.js:1405:32
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\3d blog\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (D:\3d blog\node_modules\tapable\lib\Hook.js:154:20)
    at Compilation.seal (D:\3d blog\node_modules\webpack\lib\Compilation.js:1342:27)
    at D:\3d blog\node_modules\webpack\lib\Compiler.js:675:18
    at D:\3d blog\node_modules\webpack\lib\Compilation.js:1261:4
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\3d blog\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:24:1)
    at AsyncSeriesHook.lazyCompileHook (D:\3d blog\node_modules\tapable\lib\Hook.js:154:20)
    at Compilation.finish (D:\3d blog\node_modules\webpack\lib\Compilation.js:1253:28)
    at D:\3d blog\node_modules\webpack\lib\Compiler.js:672:17
    at _done (eval at create (D:\3d blog\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:9:1)
    at eval (eval at create (D:\3d blog\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:32:22)
    at D:\3d blog\node_modules\webpack\lib\Compilation.js:1185:12
    at D:\3d blog\node_modules\webpack\lib\Compilation.js:1097:9
    at process.processTicksAndRejections (node:internal/process/task_queues:77:11)