与typescript谈一场关于three.js的恋曲

2023-06-13 18:27:32

使用 TypeScript 构建 Three.js 项目：终极指南

踏入交互式 3D 体验的广袤海洋，TypeScript 和 Three.js 将成为你的航海图。TypeScript，一种精巧的 JavaScript 超集，就像一把利剑，劈开编码的荆棘。它捕捉 JavaScript 的精髓，并提供静态类型检查，确保代码的严谨性和可靠性。Three.js，一个基于 WebGL 的 3D 库，犹如一张神奇的画布，让你轻松勾勒出令人惊叹的 3D 世界。

现在，让我们踏上这段激动人心的旅程，使用 TypeScript 构建 Three.js 项目。

1. 搭建项目骨架

如同建筑师设计蓝图，新建一个文件夹，初始化一个 npm 项目，命名为“my-threejs-project”，输入命令 npm init，一路按回车键，最后输入 Y，为项目奠定基础。

2. 引入必要元素

使用以下命令安装 Three.js 和 TypeScript，将这些基本要素纳入你的项目：

npm install three
npm install @types/three

3. 创建 TypeScript 脚本

创建一个名为 main.ts 的文件，在其中挥洒你的 Three.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);

// 塑造立方体
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);

4. 编译 TypeScript 代码

将 TypeScript 代码编译为 JavaScript 代码，为后续步骤铺路：

tsc main.ts

5. 搭建 HTML 舞台

创建一个名为 index.html 的文件，包含以下代码，为你的 3D 杰作搭建舞台：

<!DOCTYPE html>
<html>
<head>
     <script src="three.js"></script>
     <script src="main.js"></script>
</head>
<body>
     <canvas id="webgl"></canvas>
</body>
</html>