第一个场景

本节从实战操作开始，快速搭建出一个three.js场景，对three.js开发有一个直观的感受。

基于vite创建工程

three.js支持CDN和npm引入，推荐npm的方式引入，配合typescript代码提示，有更好的开发体验。

打开命令行，用vite初始化一个最简的前端工程：

npm create vite@latest

然后按照提示操作即可：

初始化完后，进入threejs-code，执行npm install安装依赖。

为了后续开发方便，需要做以下调整：

将src文件夹下的vite-env.d.ts移动到根目录，然后删除src目录下其他所有文件；
将文件夹src改为demo，并在demo下创建first-scene目录，作为第一个demo；
在根目录下找到index.html，并删除<script type="module" src="/src/main.ts"></script>这行代码；

在first-scene文件夹下创建index.html，main.ts，style.css，文件，并在index.html中引入main.ts和style.css：

index.html：

html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>First Scene</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <canvas id="canvas"></canvas>
  <script type="module" src="main.ts"></script>
</body>

</html>

style.css:

css

html,
body,
#canvas {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

main.ts:

console.log("Hello World");

在命令行执行：

npm run dev

然后在浏览器访问以下地址：

http://localhost:5173/demo/first-scene/index.html

控制台输出Hello World表示一切正常

创建Threejs场景

1、安装threejs依赖：

npm install three

如果是typescript开发，还需要安装类型申明：

npm install @types/three

写本文时，最新版本的three为0.177.0，由于three版本之间可能变化较大，实践时请关注版本。

2、创建基础场景：

import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

// 场景对象
const scene = new THREE.Scene();

// 渲染器
const canvas = document.querySelector("#canvas") as HTMLCanvasElement;
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);

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

// 轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);

// 几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.01;
  controls.update();
  renderer.render(scene, camera);
}
animate();

// 窗口大小改变时，更新渲染器和相机
window.addEventListener("resize", () => {
  renderer.setSize(window.innerWidth, window.innerHeight);
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
});

此时页面上已经出现了一个不断旋转的立方体。

按住鼠标左键在场景中拖动，可以查看立方体的各个面。到这里已经完成了第一个场景的搭建。但是现在有一个问题，立方体看起来不够立体，场景并没有明显的空间感。如何解决这个问题呢，我们下回分解。

第一个场景 ​

基于vite创建工程 ​

创建Threejs场景 ​

第一个场景

基于vite创建工程

创建Threejs场景