介绍
项目结构
每个 three.js 项目至少需要一个 HTML 文件来定义网页以及一个 JavaScript 文件来运行 three.js 代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script type="module" src="/main.js"></script>
</body>
</html> import * as THREE from 'three';
...项目安装
方案一 NPM+构建工具(推荐使用)
1、安装Node.js
2、项目文件夹->终端->安装three.js->安装构建工具Vite
3、终端运行
4、结果描述
方案二 从CDN导入
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@<version>/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@<version>/examples/jsm/"
}
}
</script>