Three.js引用和环境搭建过程详解

王常胜 · 发表于 2023-5-12 17:15:17

1.文件包下载和目录简介

1.1 文件包下载

a. 官方网站下载： 访问 Three.js 的官方网站（threejs.org/）并点击 "Download" 按钮，下载最新版本的文件包。
b. GitHub仓库下载： 访问 Three.js 的 GitHub 仓库（github.com/mrdoob/thre…）并点击 "Code" 按钮，选择 "Download ZIP" 下载整个仓库。请注意，这种方式下载的文件包将包含一些额外的文件，如示例和文档。
c. 使用npm安装： 如果您更喜欢使用npm进行包管理，可以通过执行以下命令安装Three.js：

npm install three

复制代码

npm安装后，如何引入three.js：
执行

import * as THREE from 'three';

复制代码

,ES6语法引入three.js核心。

// 引入three.js
import * as THREE from 'three';

复制代码

npm安装后，如何引入three.js其他扩展库：
除了three.js核心库以外，在threejs文件包中examples/jsm目录下，你还可以看到各种不同功能的扩展库。
一般来说，你项目用到那个扩展库，就引入那个，用不到就不需要引入。

// 引入扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 引入扩展库GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
// 扩展库引入——旧版本，比如122, 新版本路径addons替换了examples/jsm
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

复制代码

1.2 Three.js 目录简介

下载three.js文件包解压后，你可以看到如下目录(不同版本会略有差异)。
对于开发者而言，大家经常接触的是文档docs和案例examples两个文件夹，平时查看文档，可以打开文档docs里面html文件，案例examples里面提供了海量threejs功能案例。

three.js-master
└───build——src目录下各个代码模块打包后的结果
│───three.js——开发的时候.html文件中要引入的threejs引擎库，和引入jquery一样，可以辅助浏览器调试
│───three.min.js——three.js压缩后的结构文件体积更小，可以部署项目的时候在.html中引入。
│
└───docs——Three.js API文档文件
│───index.html——打开该文件可以实现离线查看threejs API文档
│
└───editor——Three.js的可视化编辑器，可以编辑3D场景
│───index.html——打开应用程序
│
└───docs——Three.js API文档文件
│───index.html——打开该文件可以实现离线查看threejs API文档
│
└───examples——里面有大量的threejs案例，平时可以通过代码编辑全局查找某个API、方法或属性来定位到一个案例
│
└───src——Three.js引擎的各个模块，可以通过阅读源码深度理解threejs引擎
│───index.html——打开该文件可以实现离线查看threejs API文档
│
└───utils——一些辅助工具
│───\utils\exporters\blender——blender导出threejs文件的插件

复制代码

2. 环境搭建

2.1 创建一个HTML文件

首先，创建一个名为

index.html

复制代码

的HTML文件。然后，在文件中添加以下基本HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js环境搭建</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="main.js"></script>
</body>
</html>

复制代码

在这个HTML文件中，我们加载了Three.js库，并通过

main.js

复制代码

文件链接了我们即将编写的脚本。

2.2 创建一个JavaScript文件

接下来，创建一个名为

main.js

复制代码

的JavaScript文件。在这个文件中，我们将编写Three.js代码来创建一个基本的3D场景。

2.2.1 初始化Three.js

在

main.js

复制代码

文件中，添加以下代码以初始化Three.js：

// 创建一个场景
const scene = new THREE.Scene();
// 创建一个透视相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 创建一个WebGL渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 添加窗口尺寸调整事件监听器
window.addEventListener('resize', function() {
const width = window.innerWidth;
const height = window.innerHeight;
renderer.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
});

复制代码

这段代码创建了一个场景、一个透视相机和一个WebGL渲染器。同时，我们还添加了一个事件监听器，用于处理窗口尺寸变化，以确保渲染的场景始终适应浏览器窗口大小。

2.2.2 添加一个立方体

接下来，我们将在场景中添加一个简单的立方体。将以下代码添加到

main.js

复制代码

文件：

// 创建一个立方体几何体
const geometry = new THREE.BoxGeometry();
// 创建一个基本材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 创建一个立方体网格（Mesh）
const cube = new THREE.Mesh(geometry, material);
// 将立方体添加到场景中
scene.add(cube);
// 设置相机位置
camera.position.z = 5;

复制代码

这段代码创建了一个立方体几何体、一个绿色的基本材质，并将它们组合成一个立方体网格。然后，我们将立方体添加到场景中，并设置相机的位置。

2.2.3 动画循环

为了让立方体动起来，我们需要创建一个动画循环。将以下代码添加到

main.js

复制代码

文件：

// 动画循环函数
function animate() {
requestAnimationFrame(animate);
// 旋转立方体
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// 渲染场景
renderer.render(scene, camera);
}
// 开始动画循环
animate();

复制代码

这段代码定义了一个名为

animate

复制代码

的函数，它使用

requestAnimationFrame

复制代码

来实现动画循环。在每次循环中，我们旋转立方体，并使用渲染器渲染场景。
最后，在支持WebGL的浏览器中打开。你将看到一个旋转的绿色立方体。

以上就是Three.js引用和环境搭建过程详解的详细内容，更多关于Three.js引用环境搭建的资料请关注脚本之家其它相关文章！

来源:https://www.jb51.net/article/284063.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】我们会及时删除侵权内容，谢谢合作！

Three.js引用和环境搭建过程详解

本帖子中包含更多资源