外部CSS文件不影响Three.js渲染逻辑，因其仅作用于DOM元素尺寸、定位与层级，不干预canvas内3D渲染；需确保正确引入、z-index协调及避免transform触发层叠冲突。
直接挂载外部CSS文件不影响Three.js渲染逻辑
Three.js 本身不解析、不干预任何外部 CSS 文件，它只关心 canvas 元素和其父容器的尺寸、定位与层级。你引入的外部 CSS（比如 Bulma、Tailwind 或自定义样式表）只要作用于 HTML 元素，就自然生效——前提是这些元素真实存在于 DOM 中，且未被 Three.js 的渲染流程意外移除或覆盖。
常见错误现象：class="button is-primary" 写对了但按钮没样式；div#ui-panel 在页面里可见，但在 Three.js 场景上层却“看不见”或错位。
- 确保外部 CSS 文件在
中通过<link rel="stylesheet">正确加载，且 HTTP 状态为 200（检查浏览器 Network 面板） - 避免用
!important覆盖 Bulma/Tailwind 默认的z-index，Three.js 的 UI 层（如CSS2DRenderer容器）默认是z-index: 100，而 Bulma 的.card是z-index: 20，需手动调高 - 不要把 UI DOM 节点写在
<canvas></canvas>内部——<canvas></canvas>是替换内容容器，不是包裹容器；UI 应放在同级<div id="threejs-container"> 外部或兄弟节点 <h3>用 CSS 定位把 UI 压在 Three.js 场景上方</h3> <p>Three.js 渲染器输出的是一个 <code><canvas></canvas>，它本质是个普通 HTML 元素。要让外部 CSS 样式的 UI “浮”在 3D 场景上，核心是 CSS 层叠上下文（stacking context）和定位控制。典型结构应为：
立即学习“前端免费学习笔记（深入）”；
jm-jsjkxyjs02-zlm-405下载使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
<div id="app"> <div id="threejs-container"></div> <div id="ui-overlay" class="is-absolute is-top-right"> <button class="button is-info">重置视角</button> </div> </div>-
#threejs-container必须设position: relative或position: absolute，否则#ui-overlay的absolute会相对于定位，容易偏移 -
#ui-overlay推荐用position: absolute+top/right偏移，而非 Flex/Grid 布局——后者在resize时易因 Three.js canvas 尺寸变化而抖动 - 若使用
CSS2DRenderer做模型标注，它的domElement默认也是position: absolute; top: 0; left: 0; z-index: 100，必须和你的 UI 层z-index协调（例如 UI 设z-index: 101）
Vue/React 项目中动态挂载 CSS 的坑
在组件级作用域（如 Vue 的
<style scoped></style>或 React 的 CSS Modules）下，外部 CSS 类名可能被自动 hash，导致 Bulma 类（如is-primary）失效。- 不要在
<style scoped></style>里写全局 UI 框架样式；改用<style></style>（非 scoped）或在main.css中统一引入 - 若用 Vite，确认
vite.config.ts中css.modules配置未误将第三方 CSS 文件纳入模块化处理 - SSR 场景（如 Nuxt/Vue SSR）下，外部 CSS 可能未在服务端注入，导致首屏无样式；需配合
@vueuse/core的useHead或 Vite 的transformIndexHtml插件预加载
为什么不能用 import './style.css' 在 Three.js 初始化逻辑里
ESM 的
import './style.css'是构建时行为，由打包工具（Vite/Webpack）转为<link>注入，它不参与运行时逻辑。你在initScene()函数里写这行，不会触发任何 DOM 变更，也不会让 CSS 生效——它早在 JS 执行前就加载完了。真正需要运行时干预的，只有两件事：调整 DOM 元素位置、同步
resize。其他所有 CSS 行为都该交给浏览器原生层处理。最常被忽略的一点：外部 CSS 控制的 UI 元素如果用了
transform: scale()或filter: blur()，可能触发新的 stacking context，导致它被CSS2DRenderer的z-index: 100容器挡住——此时得给 UI 元素显式加z-index: 101并确保父容器没设overflow: hidden。 -
