# 3D-scene

**Repository Path**: dj_yc_admin/3-d-scene

## Basic Information

- **Project Name**: 3D-scene
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-27
- **Last Updated**: 2026-07-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 太平洋滨江大厦 - Three.js 3D 展示

基于 Three.js 的城市建筑 3D 可视化页面，支持自动环绕展示，也可手动拖拽旋转。

## 快速开始

```bash
npm install
npm run dev
```

浏览器打开 `http://localhost:5200` 即可查看。

## 功能

- **自动环绕**：相机以俯视角度围绕主楼自动旋转（`OrbitControls.autoRotate`）
- **手动交互**：鼠标拖拽旋转、滚轮缩放
- **程序化场景**：内置简化版建筑与城市环境，无需外部模型即可运行
- **GLB 模型加载**：将真实模型放入 `public/models/building.glb` 后会自动替换程序化场景

## 替换为真实模型

1. 将你的 `.glb` / `.gltf` 文件放到 `public/models/building.glb`
2. 刷新页面，程序会自动检测并加载
3. 若需修改路径，编辑 `src/main.js` 中的 `customModelUrl`

## 构建部署

```bash
npm run build
```

产物在 `dist/` 目录。

### 嵌入 Vue / React 项目（iframe）

**常见错误：把整个 `dist` 文件夹放进 public，但 src 写错路径。**

#### 正确目录结构（二选一）

**方案 A（推荐）：把 dist 里的内容直接放到 public/3d/**

```
你的项目/public/3d/
├── index.html      ← dist/index.html
├── assets/         ← dist/assets/
└── models/         ← dist/models/（可选）
```

iframe 写法：

```html
<iframe src="/3d/index.html" width="100%" height="600" frameborder="0" />
```

**方案 B：保留 dist 子目录**

```
你的项目/public/3d/dist/
├── index.html
├── assets/
└── models/
```

iframe 必须写成：

```html
<iframe src="/3d/dist/index.html" width="100%" height="600" frameborder="0" />
```

❌ 错误示例：文件在 `public/3d/dist/`，却写 `src="/3d/index.html"` → 加载的是 Vue 主页面，显示黑屏。

#### Vue 组件示例

```vue
<template>
  <div class="d-modal">
    <iframe
      src="/3d/index.html"
      width="100%"
      height="100%"
      frameborder="0"
      style="border: none;"
    />
  </div>
</template>

<style scoped lang="scss">
.d-modal {
  width: 100%;
  height: 600px;   /* 必须写具体高度，不能只用 100% */
  min-height: 400px;
}
</style>
```

> `height: 100%` 只有父元素有明确高度时才生效，否则 iframe 高度为 0，也会黑屏。

#### 验证步骤

1. 浏览器直接访问 `http://localhost:端口/3d/index.html`（或 `/3d/dist/index.html`）
2. 应看到蓝色天空和 3D 建筑，而不是黑屏
3. F12 → Network 确认 `assets/index-xxx.js` 返回 200
4. 确认无误后再用 iframe 嵌入

## 项目结构

```
3Dscene/
├── index.html
├── style.css
├── public/
│   └── models/          # 放置 building.glb
├── src/
│   ├── main.js          # 入口：渲染器、相机、环绕控制
│   └── scene/
│       └── buildScene.js # 程序化 3D 场景
└── package.json
```

## 自定义环绕速度

在 `src/main.js` 中调整：

```js
controls.autoRotateSpeed = 0.6;  // 数值越大转得越快
```

## 自定义相机视角

```js
camera.position.set(80, 55, 80);  // 初始位置
controls.target.set(0, 18, 0);    // 环绕中心点
```
<!-- d62a50c1086c13229aaf7d4538d7c3dd -->