Three.js必须使用<canvas>元素作为渲染容器，而非div等非canvas元素；需通过renderer.setSize()同步尺寸，用Raycaster实现点击交互，HTML元素仅作素材或UI叠加，不可直接转为3D场景。
HTML元素怎么当Three.js的渲染容器
Three.js不挑容器，但必须是能拿到canvas上下文的DOM节点。最直接的方式就是传一个<canvas>元素给WebGLRenderer，而不是用div或section硬套——后者会报TypeError: canvas.getContext is not a function。
- 必须用
<canvas id="scene-canvas"></canvas>，不能只写<div id="scene-canvas"></div> - 如果想让Canvas铺满父容器，CSS里设
width: 100%; height: 100%不够，得在JS里手动同步renderer.setSize()，否则画布拉伸、坐标错乱 -
document.getElementById('scene-canvas')要确保执行时DOM已就绪，放<script>末尾或用DOMContentLoaded包裹，不然取到null
用div包裹canvas为什么更常见
因为Three.js只管渲染，尺寸响应、鼠标事件、UI叠加这些都得靠HTML结构配合。纯canvas没法挂按钮、文字、遮罩层，所以实际项目里几乎都是div#container > canvas这种嵌套。
-
div设position: relative，canvas设position: absolute，方便后续叠加工具栏、HUD等DOM元素 - 监听
resize事件时，更新的是div的宽高，再把数值传给renderer.setSize(width, height)和camera.aspect，否则3D视角会挤压变形 - 别在
canvas上直接绑click，Three.js里要用Raycaster做射线拾取，原生事件坐标需转为归一化设备坐标（NDC），漏这步就点不中模型
innerHTML或outerHTML转3D场景行不行
不行。Three.js不解析HTML结构，也不把<img>自动变纹理、<h1>变3D文字。所谓“HTML转场景”是误解，真实需求通常是：把页面里的某个视觉元素（比如一张图、一段文字）作为素材导入Three.js。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 图片素材：用
TextureLoader加载<img src="xxx">的src，不是读innerHTML - 文字渲染：得用
TextGeometry（依赖Font加载）或HTMLMesh类库，但后者本质是把DOM截图成纹理贴到平面，非真HTML - 想让HTML控件实时控制3D参数？可以，但得手动写
input.onchange = () => { mesh.rotation.y = input.value }，没有自动绑定
移动端适配Canvas容器的坑
iOS Safari和部分安卓WebView对canvas尺寸缩放很敏感，单纯CSS设置width: 100vw会导致renderer.getPixelRatio()失准，画面模糊或黑屏。
立即学习“前端免费学习笔记（深入）”；
- 务必用
renderer.setPixelRatio(window.devicePixelRatio || 1)初始化，且在resize回调里重设 - 避免用
%或vh/vw直接设canvas.style.width，改用getBoundingClientRect()取实际像素宽高再喂给setSize() - 某些低端机WebGL上下文会被回收，监听
webglcontextlost事件并重置renderer，否则切后台回来就白屏
