当年第一次晕3D就是 CS半条命-经典仓库，大半个网吧都在玩这个，我在网吧玩了半小时跑出去给我整吐了。 此后对3D射击无感。
阶段目标效果：
第一步 中文化官方例子
第一次使用Three.js，当然是中文官方例子，让代码字自解释。
想像自己是导演布景、摄像、实施，记住三大主体场景、 相机、渲染器。通常在代码中是固定部分。
我们会在页面中得到一个绿色的正方体。
注意我们才可以加载three.js的module，这里使用的网络外部文件引入。
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初学Three.js</title>
</head>
<body>
<script type="module">
import * as THREE from 'https://unpkg.com/three/build/three.module.js';
let 场景 = null
let 相机 = null
let 渲染器 = null
//场景scene、相机camera和渲染器renderer
//第一步 创建场景scene
场景 = new THREE.Scene();
//第二步 创建相机camera 观察者的视角
let W = window.innerWidth //内屏的宽度
let H = window.innerHeight //内屏的高度
let 视野角度 = 75 //能在显示器上看到的场景的范围,单位是角度
let 长宽比 = W / H //用一个物体的宽除以它的高的值 16：9 16：10
let 近截面 = 0.1
let 远截面 = 1000
//PerspectiveCamera（透视摄像机）(视野角度,长宽比,近截面,远截面)
相机 = new THREE.PerspectiveCamera(视野角度 ,长宽比, 近截面, 远截面 );
//第三步 创建渲染器 renderer
渲染器 = new THREE.WebGLRenderer({ antialias: true }); //开启物理抗锯齿
渲染器.setSize( W, H );
document.body.appendChild( 渲染器.domElement );
//------------------------------创建 立方体--------------------------------------
const 形状 = new THREE.BoxGeometry( 1, 1, 1 ); //立方体对象(长,宽,高)
const 材质 = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); //默认材质
const 方块 = new THREE.Mesh( 形状, 材质 );
场景.add( 方块 );
相机.position.z = 5;
function 动画() {
requestAnimationFrame( 动画 );
方块.rotation.x += 0.01;
方块.rotation.y += 0.01;
渲染器.render( 场景, 相机 );
}
动画();
</script>
</body>
</html>
第二步 增加鼠标控制器交互
就是拿鼠标按住可以 720°旋转，在three.js中异常简单！只需要增加两句代码！
const 控制器 = new OrbitControls(相机, 渲染器.domElement);
控制器.update();
但是，需要额外加载 OrbitControls.js，这个不在默认three.module.js 中。折腾了很久。
还是使用Node.js 启动pnpm install three模块。
2.1 使用pnpm install three 安装模块
2.2 使用type="importmap"创建引入别名
<script type="importmap"> 是 HTML 中用于定义 JavaScript 模块导入映射的元素。它允许你指定一个 JSON 对象，用来重写模块 specifier 到模块 URL 的解析过程。这对于简化模块路径、使用本地缓存或 CDN 链接、以及处理不同环境下的模块加载非常有用。2019年提出的技术。
<script type="importmap">
{
"imports": {
"three": "./node_modules/three/build/three.module.js",
"目录/": "./node_modules/three/examples/jsm/controls/",
"控制":"./node_modules/three/examples/jsm/controls/OrbitControls.js"
}
}
</script>
<script type="module" src="./3D.js"> </script>
2.3 加载图片纹理贴图
准备一张本地图片，然后 使用加载器加载。注意创建 物体是 使用 对应的 变量！如下图
关键代码：
const 加载器 = new THREE.TextureLoader(); //创建加载器
let 图片纹理 = 加载器.load('./img/登录页面背景图2.jpg')
