动态交互网站 Vite+Vanilla js+Three

感谢教程创作者:Fireship

搭建Vite:

$ npm init vite
// 实时预览
$ npm run dev

安装Three

$ npm install three

部署:

$ npm run build

Vite会默认把静态文件生成在dist文件夹下

教程使用了Vite来创建脚手架,还是挺新鲜的,遇到的最大问题是Vite+Vanilla js 如何正确部署并上传到我的服务器,研究了很长时间,学习笔记:

1 . Vite默认网站文件是位于根目录,如果需要放在服务器其他目录下,需要在项目目录中创建vite.config.js文件,内容为:

// vite.config.js
export default {
    "base": "./",
  }

有了这个文件,执行build后,dist文件夹内容就可以放到服务器任意目录了,“./”应该也可替换成静态url。

2. 下一个问题是链接文件没有移动到dist文件夹中,这样就算在生产环境可打开页面,图片无法显示,解决方法是在项目目录中创建public文件夹,把图片放入,图片在main.js中仍以“./xxx.jpg”的格式存在,在build的时候Vite会将图片置入dist目录中。参考:

const spaceTexture = new THREE.TextureLoader().load('./space.jpg');
scene.background = spaceTexture;

发布日期:
分类:未分类

react + Three.js 创建与部署

React 创建

链接:https://reactjs.org/docs/create-a-new-react-app.html

npx create-react-app my-app
cd my-app
yarn add three @react-three/drei @react-spring/three react-three-fiber sass
npm start

React-three-fiber

链接:https://github.com/pmndrs/react-three-fiber

npm install three @react-three/fiber

物理模块

链接:https://github.com/pmndrs/use-cannon

yarn add @react-three/cannon
import { Physics, useBox, ... } from '@react-three/cannon'

部署

部署时默认app放入网站根目录,如果要放在其他,位置需要修改app路径,在package.json文件中任意位置加入:

"homepage": "https://www.louisxu.com/build",

发布日期:
分类:未分类

方块旋转动画案例 React + Three.js

感谢 youtuber Wrong Akram

教程地址:https://www.youtube.com/watch?v=fdtqqyeKRJk

案例页面:https://www.louisxu.com/build/index.html

因距离录制教程有一段时间,有些代码已经升级或失效,以下是制作中碰到的问题更新:

倒入drei的代码改为:

import { softShadows, MeshWobbleMaterial, OrbitControls } from "@react-three/drei";
softShadows();

点击动画的地方我研究了很久,现在可行的代码是:

import { useSpring, a } from "@react-spring/three";

发布日期:
分类:未分类