HTML中Three.js的Scene Camera Renderer搭建基本3D场景的方法-html教程-PHP中文网

scene 必须最先初始化，再创建 camera 和 renderer；三者顺序不可颠倒，否则 renderer.render(scene, camera) 会因 scene 未定义而报错。

html中three.js的scene camera renderer搭建基本3d场景的方法

Scene 实例必须在 Camera 和 Renderer 创建前初始化

Three.js 的渲染流程依赖明确的依赖顺序：Scene 是所有物体的容器，Camera 决定视角，Renderer 负责把它们画出来。如果先创建 Renderer 再往里塞还没初始化的 Scene，调用 renderer.render(scene, camera) 会直接报 TypeError: Cannot read property 'matrixWorld' of undefined——因为 scene 是 undefined 或没挂载任何对象。

实操建议：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

始终按 new THREE.Scene() → new THREE.PerspectiveCamera(...) → new THREE.WebGLRenderer(...) 顺序写
哪怕只是临时测试，也要给 Scene 加至少一个对象（比如 scene.add(new THREE.AmbientLight())），否则部分旧版本 Three.js 在首次 render 时可能静默失败
不要复用全局 scene 变量却忘记清空子对象，尤其在动态切换场景时，残留的 mesh 或 light 会导致光照异常或内存泄漏

PerspectiveCamera 的 fov 参数单位是角度，不是弧度

很多初学者误以为 fov 是弧度值，传入 Math.PI / 4（约 0.785）导致视野极窄、画面像望远镜。实际 fov 是垂直视场角（单位：度），常见取值为 75 或 60。

实操建议：

new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) 是最常用模板；其中 0.1 是近裁剪面，太小（如 0.001）会导致 z-fighting；太大（如 1）会让靠近相机的物体被直接裁掉
修改 camera.aspect 后必须调用 camera.updateProjectionMatrix()，否则 resize 时画面拉伸但透视不变
不要在动画循环中频繁新建 Camera 实例，会触发大量 GC，应复用并仅更新 position 或 lookAt

WebGLRenderer 必须显式设置 size 并 append 到 DOM

Renderer 默认不自动适配页面尺寸，也不自动插入到页面。漏掉 renderer.setSize() 或没调 document.body.appendChild(renderer.domElement)，结果就是“代码跑完了但页面一片空白”。

实操建议：

创建后立即设置尺寸：renderer.setSize(window.innerWidth, window.innerHeight)，且需监听 resize 事件同步更新
renderer.domElement 是 <canvas></canvas> 元素，可像普通 DOM 节点一样操作：加 class、设 style（如 style.position = 'absolute'）、甚至用 CSS transform 缩放，但缩放后需同步调整 renderer.setPixelRatio(window.devicePixelRatio) 避免模糊
若用 antialias: true 初始化，某些低端集成显卡可能 fallback 到软件渲染，性能骤降；生产环境建议先检测再启用：const isAntialiasSupported = renderer.capabilities.isAntialiasSupported

render() 调用必须在 animation loop 中，且不能靠 setTimeout 模拟

直接在脚本末尾写一次 renderer.render(scene, camera) 只能渲染一帧，后续旋转、移动都不可见。而用 setTimeout 控制帧率容易失步、掉帧、无法与显示器刷新率同步。

实操建议：

必须用 requestAnimationFrame 循环驱动：

function animate() {
  requestAnimationFrame(animate);
  // 更新逻辑（如 mesh.rotation.y += 0.01）
  renderer.render(scene, camera);
}
animate();

不要在 animate 里重复调用 renderer.setSize() 或重建 Scene，这些开销大且非必要
如果使用 OrbitControls 等插件，它的 update() 方法必须在 render() 前调用，否则拖拽/缩放响应延迟一帧

Three.js 的基础场景搭建真正卡住人的地方，往往不是 API 不熟，而是某处少了一行 scene.add()、漏了 camera.updateProjectionMatrix()，或者 renderer.domElement 被 CSS 隐藏了却去查 JS 逻辑。动手时盯紧控制台报错和 canvas 元素是否真实存在于 DOM 树中。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！