1.安装nodejs

nodejs下载地址:

Node.js

nodejs.org/en


安装nodejs

直接下一步安装,步骤很简单


检查nodejs是否安装成功

cmd 命令行运行 node -v 安装成功会返回当前安装版本号



2.创建vite项目

新建文件夹ThreeJS

cmd 进入threejs文件夹


创建vite项目

输入命令行 npm create vite@latest 注意空格


将项目名字改成 viteThree

框架直接选默认的 Vanilla 原生 回车下一步

向下箭头 选择JavaScript 选择用JavaScript开发


3.安装threeJS环境

一定要注意将threejs环境装入了哪个文件夹

输入命令:npm i vite three

安装成功threejs 左侧会多出两个json


启动运行vite首页

输入:npm run dev


会得到本地的一个服务器地址 复制该网址去浏览器打开 http://localhost:5173/


整理模板

整理index.html

删除DIV,修改网页标签名字


整理main.js文件

只保留第一行 import './style.css'


整理style.css

删除所有内容


设置边距为0

body{

margin: 0;

}


整理完所有的文件网页应该是一片空白,无任何报错信息


以后启动本地服务器

安装完成后,以后每次运行只需要 执行上边的运行vite首页的设置就好


也就是在viteThree文件夹打开

然后输入 npm run dev

就能得到访问的本地服务器地址