Three.js实现3D场景需三要素：WebGLRenderer渲染器、THREE.Scene场景、PerspectiveCamera相机；再添加几何体、材质、网格构成物体，配合环境光与方向光，并用requestAnimationFrame驱动动画及响应窗口缩放。
用 JavaScript 实现 3D 图形，最常用、最成熟的方式就是使用 Three.js —— 它封装了 WebGL 的复杂底层操作，让你能用简洁的代码快速搭建 3D 场景。
初始化 Three.js 基础场景
一个可运行的 3D 场景至少需要三样东西：渲染器（Renderer）、场景（Scene）和相机（Camera）。缺一不可。
-
渲染器：负责把 3D 内容画到网页的
<canvas>上，通常用WebGLRenderer -
场景：所有 3D 对象（模型、灯光、相机）的容器，用
new THREE.Scene()创建 -
相机：决定“谁在看”和“怎么看”，常用透视相机
THREE.PerspectiveCamera(fov, aspect, near, far)
示例代码片段：
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75, // 视野角度
window.innerWidth / window.innerHeight, // 宽高比
0.1, // 近裁剪面
1000 // 远裁剪面
);
camera.position.z = 5;
添加几何体与材质（让场景有“东西”可看）
光有空场景不行，得加物体。Three.js 中，物体 = 几何体（Geometry） + 材质（Material） + 网格（Mesh）。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
-
几何体：定义形状，比如
THREE.BoxGeometry(1, 1, 1)创建一个边长为 1 的立方体 -
材质：定义表面外观，如
THREE.MeshBasicMaterial({ color: 0x00ff00 })是纯色无光照材质 -
网格：把几何体和材质组合起来，再加入场景：
scene.add(new THREE.Mesh(geometry, material))
小提示：若想看到明暗变化，推荐用 MeshStandardMaterial 并搭配光源。
加入光源和动画循环
默认情况下，没有光就看不到材质细节（尤其非 Basic 材质）。基础光源推荐 THREE.AmbientLight（环境光）+ THREE.DirectionalLight（方向光）。
- 环境光提供基础亮度，避免全黑：
scene.add(new THREE.AmbientLight(0xffffff, 0.5)) - 方向光模拟太阳光，有明确照射方向：
const light = new THREE.DirectionalLight(0xffffff); light.position.set(2, 2, 2); scene.add(light) - 动画靠
requestAnimationFrame循环调用渲染，并手动旋转/移动物体：mesh.rotation.x += 0.01; mesh.rotation.y += 0.01;
响应窗口大小变化
用户缩放浏览器时，画布会拉伸变形。需监听 resize 事件并同步更新渲染器尺寸和相机宽高比：
window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});
