学习一个新东西，非必要不用脚手架，降低学习难度。
所以我们需要先搭建一个开发环境，即网页版的 Threejs
一、从 cdn 加载 threejs
从免费的 cdn 寻找 threejs 并加载
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.165.0/+esm",
"three/": "https://cdn.jsdelivr.net/npm/three@0.165.0/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/controls/OrbitControls.js';
</script>
主要加载 threejs 及其鼠标事件，方便缩放拖拉视图。
（tips：新版只支持 jsm，如果想要使用 js, 可使用 v0.147.0 版本）
启动静态服务器
# 全局安装静态服务器
npm install -g serve
# 当前目录作为根目录启动服务
serve ./
完整版代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>1. Threejs 开发环境搭建</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.165.0/+esm",
"three/": "https://cdn.jsdelivr.net/npm/three@0.165.0/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/controls/OrbitControls.js';
THREE.OrbitControls = OrbitControls;
console.log(THREE, OrbitControls);
</script>
</body>
</html>
