# html_threejs_demo1

**Repository Path**: enzoism/html_threejs_demo1

## Basic Information

- **Project Name**: html_threejs_demo1
- **Description**: 使用HTML绘制的threejs的demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-10-20
- **Last Updated**: 2026-10-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ThreeJS-3D可视化y轴和z轴

## 1-3D坐标绘制

> 参考博客地址：https://blog.csdn.net/2301_77717148/article/details/168559364

![](https://i-blog.csdnimg.cn/direct/9bea48992a764a9588d41186b2625189.png))

---

## 2-为什么代码中要把y和z轴进行调换

![](https://i-blog.csdnimg.cn/direct/b3b6a2c2b16244c68387e1db214a4878.png)

### 1-先回答下面的问题 

> 肯定不是上坡，你肯定任务我是在变化x和y轴，而不是在变化z轴

![](https://i-blog.csdnimg.cn/direct/f0a13fa39c0448029358d8a469ebea56.png)

---

## 2-为了保持x(人的直观感受)同时，体现y的变化，就把y和z替换

> 1-const pts = t.points.map(([x, z, y]) => new THREE.Vector3(x, y ?? 0, z));
>
> 2-也就是说此时图把z轴拍扁了，我们此时看不出z的高度
>
> 3-所以你不认为我在上升的z轴，展示的就是y轴的数据

```typescript
import * as THREE from "./three.module.js";

// —— 与原 JS 完全相同的采样逻辑 ——
const { tracks } = await (await fetch("./assets/tracks.json")).json();
const t = tracks.find((x) => x.name === "Summer 1");
if (!t) throw new Error("Summer 1 not found in tracks.json");

const pts = t.points.map(([x, z, y]) => new THREE.Vector3(x, y ?? 0, z));
const curve = new THREE.CatmullRomCurve3(pts, true, "catmullrom", 0.5);
const S = 720;
const samples = Array.from({ length: S }, (_, i) => curve.getPointAt(i / S));

// —— 渲染（俯视 2D）——
const W = 1024, H = 1024;
const renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true });
renderer.setSize(W, H);
document.getElementById("view").appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x181818);

// 用采样点算包围盒，自动取景
const bbox = new THREE.Box3().setFromPoints(samples);
const center = bbox.getCenter(new THREE.Vector3());
const radius = bbox.getSize(new THREE.Vector3()).length() / 2;

const camera = new THREE.OrthographicCamera(-radius, radius, radius, -radius, 0.1, 1000);
camera.position.set(center.x, 200, center.z);  // 从正上方俯视
camera.up.set(0, 0, -1);
camera.lookAt(center);

// 中心线（蓝色）+ 原始控制点（红色圆点）
const lineGeo = new THREE.BufferGeometry().setFromPoints(samples);
scene.add(new THREE.LineLoop(lineGeo, new THREE.LineBasicMaterial({ color: 0x4fc3f7 })));

const dotGeo = new THREE.BufferGeometry().setFromPoints(pts);
scene.add(new THREE.Points(dotGeo, new THREE.PointsMaterial({ color: 0xef5350, size: 4 })));

renderer.render(scene, camera);

// —— 导出 PNG ——
window.savePNG = () => {
  const a = document.createElement("a");
  a.href = renderer.domElement.toDataURL("image/png");
  a.download = "summer1_centerline.png";
  a.click();
};
```