探索 Three.js 之旅：在 Vite 中的创建指南

2023-12-05 12:37:12

前往 Vite 官网下载并安装

打开 Vite 官网：https://vitejs.dev/
找到“Download”按钮，根据您的操作系统选择对应的安装包进行下载。
安装下载的软件包，按照提示进行操作即可。

2. 初始化 Vite 项目

打开终端（如 Git Bash 或命令提示符）并转到您想要创建项目的目录。
运行以下命令：

npx create-vite-app <project-name> --template vue

其中<project-name>是您要创建的项目的名称。
选择“vue”作为项目模板，该模板将使用 Vue.js 作为前端框架。

3. 安装 Three.js

npm install three

此命令将安装 Three.js 库。

4. 创建 Three.js 场景

在 src 目录下创建一个名为 main.js 的文件。
在 main.js 文件中添加以下代码：

import * as THREE from 'three';

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// 创建网格
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 渲染场景
renderer.render(scene, camera);