Npm

Three

	  pnpm create vite@latest project-name -- --template vue-tspnpm create vite@latest threejs-helloworld --template vanilla-tspnpm create vite@latest threejs-reactfiles --template react-tspnpm create vite@latest threejs-vueproject --template vue-tspnpm i threepnpm i --save-dev @types/threepnpm i --save-dev @types/nodepnpm i --save-dev @types/

在 vite-env.d.ts 或 global.d.ts 中添加如下模块声明

	  /// <reference types="vite/client" />declare module '*.css' {const content: Record<string, string>;export default content;}declare module '*.scss' {const content: Record<string, string>;export default content;}declare module '*.png' {const value: string;export default value;}declare module '*.jpg' {const value: string;export default value;}declare module '*.svg' {const value: string;export default value;}

在 main.ts 中添加如下代码

	  import * as THREE from 'three';const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);const geometry = new THREE.BoxGeometry();const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });const cube = new THREE.Mesh(geometry, material);scene.add(cube);camera.position.z = 5;function animate() {requestAnimationFrame(animate);cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);}animate();// import './style.css'// import typescriptLogo from './typescript.svg'// import viteLogo from '/vite.svg'// import { setupCounter } from './counter.ts'// document.querySelector<HTMLDivElement>('#app')!.innerHTML = `//   <div>//     <a href="https://vite.dev" target="_blank">//       <img src="${viteLogo}" class="logo" alt="Vite logo" />//     </a>//     <a href="https://www.typescriptlang.org/" target="_blank">//       <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />//     </a>//     <h1>Vite + TypeScript</h1>//     <div class="card">//       <button id="counter" type="button"></button>//     </div>//     <p class="read-the-docs">//       Click on the Vite and TypeScript logos to learn more//     </p>//   </div>// `// setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)

Shadcn

	  pnpm create vite@latestpnpm dlx shadcn@latest initpnpm dlx shadcn@latest add button

pnpm dlx shadcn@latest create --preset "https://ui.shadcn.com/init?base=base&style=vega&baseColor=gray&theme=cyan&iconLibrary=lucide&font=inter&menuAccent=subtle&menuColor=default&radius=default&template=vite" --template