Silas/three-demos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
刘 相卿
2025-11-14 15:25:23 +08:00
commit 911a99bd3d
39 changed files with 6658 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.editorconfig Normal file
View File

@@ -0,0 +1,8 @@
[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
charset = utf-8
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
end_of_line = lf
max_line_length = 100

1
.gitattributes vendored Normal file
View File

@@ -0,0 +1 @@
* text=auto eol=lf

36
.gitignore vendored Normal file
View File

@@ -0,0 +1,36 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
*.tsbuildinfo
.eslintcache
# Cypress
/cypress/videos/
/cypress/screenshots/
# Vitest
__screenshots__/

8
.vscode/extensions.json vendored Normal file
View File

@@ -0,0 +1,8 @@
{
"recommendations": [
"Vue.volar",
"dbaeumer.vscode-eslint",
"EditorConfig.EditorConfig",
"oxc.oxc-vscode"
]
}

25
README.md Normal file
View File

@@ -0,0 +1,25 @@
# three.js专题分享
## three.js 是什么
## 为什么选择 three.js
## three.js 核心概念
### Scene 场景
### Camera 相机
### Renderer 渲染器
## Demos
### 基础几何体
### 材质与纹理
### 光照与阴影
### 动画与交互
### 粒子系统
### 后期处理效果
### 漫游 视角切换
### 标签
### 公共函数抽象
## 如何与建模沟通
## blender使用

1
env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite/client" />

6
eslint.config.ts Normal file
View File

@@ -0,0 +1,6 @@
import antfu from '@antfu/eslint-config'
export default antfu({
unocss: true,
vue: true,
})

13
index.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

497
others/demo.html Normal file
View File

@@ -0,0 +1,497 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js 技术分享 Demo</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
h1 {
text-align: center;
color: white;
margin-bottom: 30px;
font-size: 2.5em;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.demo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.demo-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
transition: transform 0.3s;
}
.demo-card:hover {
transform: translateY(-5px);
}
.demo-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 15px;
color: white;
}
.demo-header h3 {
margin: 0;
font-size: 1.3em;
}
.demo-header p {
margin: 5px 0 0 0;
opacity: 0.9;
font-size: 0.9em;
}
.canvas-container {
width: 100%;
height: 350px;
background: #f0f0f0;
position: relative;
}
canvas {
display: block;
width: 100%;
height: 100%;
}
.controls {
padding: 15px;
background: #f9f9f9;
}
.control-group {
margin-bottom: 10px;
}
.control-group label {
display: block;
margin-bottom: 5px;
font-weight: 600;
color: #333;
}
button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
margin-right: 10px;
margin-bottom: 5px;
transition: transform 0.2s;
}
button:hover {
transform: scale(1.05);
}
input[type="range"] {
width: 100%;
}
.info-panel {
background: white;
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.info-panel h2 {
color: #667eea;
margin-bottom: 15px;
}
.info-panel ul {
margin-left: 20px;
line-height: 1.8;
}
.concept-box {
background: #f0f4ff;
padding: 15px;
border-left: 4px solid #667eea;
margin: 10px 0;
border-radius: 5px;
}
.concept-box strong {
color: #667eea;
}
</style>
</head>
<body>
<div class="container">
<h1>🎨 Three.js 技术分享 - 互动 Demo</h1>
<div class="demo-grid">
<!-- Demo 1: 旋转立方体 -->
<div class="demo-card">
<div class="demo-header">
<h3>Demo 1: Hello Cube</h3>
<p>最基础的 Three.js 场景:旋转的彩色立方体</p>
</div>
<div class="canvas-container" id="demo1"></div>
<div class="controls">
<div class="control-group">
<label>旋转速度:</label>
<input type="range" id="speed1" min="0" max="0.05" step="0.001" value="0.01">
</div>
<button onclick="changeColor1()">随机颜色</button>
<button onclick="toggleRotation1()">暂停/继续</button>
</div>
</div>
<!-- Demo 2: 交互式场景 -->
<div class="demo-card">
<div class="demo-header">
<h3>Demo 2: 交互式多物体</h3>
<p>鼠标控制相机,点击物体改变颜色</p>
</div>
<div class="canvas-container" id="demo2"></div>
<div class="controls">
<div class="control-group">
<label>光照强度:</label>
<input type="range" id="lightIntensity" min="0" max="3" step="0.1" value="1">
</div>
<button onclick="addSphere()">添加球体</button>
<button onclick="resetScene2()">重置场景</button>
</div>
</div>
<!-- Demo 3: 动画场景 -->
<div class="demo-card">
<div class="demo-header">
<h3>Demo 3: 粒子系统</h3>
<p>动态粒子效果与后处理</p>
</div>
<div class="canvas-container" id="demo3"></div>
<div class="controls">
<div class="control-group">
<label>粒子数量: <span id="particleCount">1000</span></label>
<input type="range" id="particleSlider" min="500" max="5000" step="100" value="1000">
</div>
<button onclick="changeParticleColor()">改变颜色</button>
<button onclick="resetParticles()">重置粒子</button>
</div>
</div>
</div>
<div class="info-panel">
<h2>💡 Three.js 核心概念速记</h2>
<div class="concept-box">
<strong>Scene(场景)</strong> - 电影片场,所有3D对象的容器
</div>
<div class="concept-box">
<strong>Camera(相机)</strong> - 观众的眼睛,决定从哪个角度看场景
</div>
<div class="concept-box">
<strong>Renderer(渲染器)</strong> - 摄影机,把3D场景渲染成2D图像
</div>
<div class="concept-box">
<strong>Mesh = Geometry + Material</strong> - 网格 = 形状骨架 + 表面材质
</div>
<div class="concept-box">
<strong>Light(光源)</strong> - 片场的灯光,让物体可见
</div>
<h2 style="margin-top: 30px;">🎯 与建模师沟通清单</h2>
<ul>
<li>✅ 文件格式:优先使用 <strong>GLTF/GLB</strong> 格式</li>
<li>✅ 面数控制:移动端 &lt;5万面,PC端 &lt;20万面</li>
<li>✅ 贴图尺寸:建议 2K 以内,使用 2 的幂次方(512, 1024, 2048)</li>
<li>✅ 材质类型:推荐 <strong>PBR 材质</strong>(基于物理的渲染)</li>
<li>✅ 命名规范:使用英文,有意义的名称</li>
<li>✅ 坐标系统:统一使用米制单位</li>
<li>✅ 轴心点:确认物体中心点位置是否正确</li>
</ul>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// ========== Demo 1: 基础旋转立方体 ==========
let scene1, camera1, renderer1, cube1, isRotating1 = true;
function initDemo1() {
const container = document.getElementById('demo1');
scene1 = new THREE.Scene();
scene1.background = new THREE.Color(0x1a1a2e);
camera1 = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
camera1.position.z = 5;
renderer1 = new THREE.WebGLRenderer({ antialias: true });
renderer1.setSize(container.clientWidth, container.clientHeight);
container.appendChild(renderer1.domElement);
const geometry = new THREE.BoxGeometry(2, 2, 2);
const material = new THREE.MeshPhongMaterial({
color: 0x00ff88,
shininess: 100
});
cube1 = new THREE.Mesh(geometry, material);
scene1.add(cube1);
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(5, 5, 5);
scene1.add(light);
const ambientLight = new THREE.AmbientLight(0x404040);
scene1.add(ambientLight);
animate1();
}
function animate1() {
requestAnimationFrame(animate1);
if (isRotating1) {
const speed = parseFloat(document.getElementById('speed1').value);
cube1.rotation.x += speed;
cube1.rotation.y += speed;
}
renderer1.render(scene1, camera1);
}
function changeColor1() {
cube1.material.color.setHex(Math.random() * 0xffffff);
}
function toggleRotation1() {
isRotating1 = !isRotating1;
}
// ========== Demo 2: 交互式场景 ==========
let scene2, camera2, renderer2, objects2 = [], pointLight2;
function initDemo2() {
const container = document.getElementById('demo2');
scene2 = new THREE.Scene();
scene2.background = new THREE.Color(0x16213e);
camera2 = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
camera2.position.set(0, 3, 8);
camera2.lookAt(0, 0, 0);
renderer2 = new THREE.WebGLRenderer({ antialias: true });
renderer2.setSize(container.clientWidth, container.clientHeight);
container.appendChild(renderer2.domElement);
// 添加地面
const planeGeometry = new THREE.PlaneGeometry(20, 20);
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x0f3460 });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -Math.PI / 2;
scene2.add(plane);
// 添加初始物体
createInitialObjects();
// 光源
pointLight2 = new THREE.PointLight(0xffffff, 1);
pointLight2.position.set(0, 5, 5);
scene2.add(pointLight2);
const ambientLight = new THREE.AmbientLight(0x404040);
scene2.add(ambientLight);
// 鼠标控制
let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };
renderer2.domElement.addEventListener('mousedown', () => isDragging = true);
renderer2.domElement.addEventListener('mouseup', () => isDragging = false);
renderer2.domElement.addEventListener('mousemove', (e) => {
if (isDragging) {
const deltaX = e.offsetX - previousMousePosition.x;
const deltaY = e.offsetY - previousMousePosition.y;
camera2.position.x += deltaX * 0.01;
camera2.position.y -= deltaY * 0.01;
camera2.lookAt(0, 0, 0);
}
previousMousePosition = { x: e.offsetX, y: e.offsetY };
});
// 点击改变颜色
renderer2.domElement.addEventListener('click', (e) => {
const mouse = new THREE.Vector2(
(e.offsetX / container.clientWidth) * 2 - 1,
-(e.offsetY / container.clientHeight) * 2 + 1
);
const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, camera2);
const intersects = raycaster.intersectObjects(objects2);
if (intersects.length > 0) {
intersects[0].object.material.color.setHex(Math.random() * 0xffffff);
}
});
document.getElementById('lightIntensity').addEventListener('input', (e) => {
pointLight2.intensity = parseFloat(e.target.value);
});
animate2();
}
function createInitialObjects() {
const geometries = [
new THREE.BoxGeometry(1, 1, 1),
new THREE.SphereGeometry(0.6, 32, 32),
new THREE.ConeGeometry(0.5, 1, 32),
new THREE.TorusGeometry(0.5, 0.2, 16, 100)
];
for (let i = 0; i < 4; i++) {
const material = new THREE.MeshStandardMaterial({
color: Math.random() * 0xffffff,
metalness: 0.5,
roughness: 0.5
});
const mesh = new THREE.Mesh(geometries[i], material);
mesh.position.set((i - 1.5) * 2, 1, 0);
scene2.add(mesh);
objects2.push(mesh);
}
}
function animate2() {
requestAnimationFrame(animate2);
objects2.forEach((obj, i) => {
obj.rotation.y += 0.01;
obj.position.y = 1 + Math.sin(Date.now() * 0.001 + i) * 0.3;
});
renderer2.render(scene2, camera2);
}
function addSphere() {
const geometry = new THREE.SphereGeometry(0.5, 32, 32);
const material = new THREE.MeshStandardMaterial({
color: Math.random() * 0xffffff,
metalness: 0.5,
roughness: 0.5
});
const sphere = new THREE.Mesh(geometry, material);
sphere.position.set(Math.random() * 6 - 3, 1, Math.random() * 6 - 3);
scene2.add(sphere);
objects2.push(sphere);
}
function resetScene2() {
objects2.forEach(obj => scene2.remove(obj));
objects2 = [];
createInitialObjects();
}
// ========== Demo 3: 粒子系统 ==========
let scene3, camera3, renderer3, particles3;
function initDemo3() {
const container = document.getElementById('demo3');
scene3 = new THREE.Scene();
scene3.background = new THREE.Color(0x000000);
camera3 = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
camera3.position.z = 50;
renderer3 = new THREE.WebGLRenderer({ antialias: true });
renderer3.setSize(container.clientWidth, container.clientHeight);
container.appendChild(renderer3.domElement);
createParticles(1000);
document.getElementById('particleSlider').addEventListener('input', (e) => {
const count = parseInt(e.target.value);
document.getElementById('particleCount').textContent = count;
scene3.remove(particles3);
createParticles(count);
});
animate3();
}
function createParticles(count) {
const geometry = new THREE.BufferGeometry();
const positions = [];
const colors = [];
for (let i = 0; i < count; i++) {
positions.push(
Math.random() * 100 - 50,
Math.random() * 100 - 50,
Math.random() * 100 - 50
);
colors.push(Math.random(), Math.random(), Math.random());
}
geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
const material = new THREE.PointsMaterial({
size: 0.5,
vertexColors: true,
transparent: true,
opacity: 0.8
});
particles3 = new THREE.Points(geometry, material);
scene3.add(particles3);
}
function animate3() {
requestAnimationFrame(animate3);
particles3.rotation.y += 0.002;
particles3.rotation.x += 0.001;
const positions = particles3.geometry.attributes.position.array;
for (let i = 0; i < positions.length; i += 3) {
positions[i + 1] += Math.sin(Date.now() * 0.001 + i) * 0.01;
}
particles3.geometry.attributes.position.needsUpdate = true;
renderer3.render(scene3, camera3);
}
function changeParticleColor() {
const colors = particles3.geometry.attributes.color.array;
for (let i = 0; i < colors.length; i += 3) {
colors[i] = Math.random();
colors[i + 1] = Math.random();
colors[i + 2] = Math.random();
}
particles3.geometry.attributes.color.needsUpdate = true;
}
function resetParticles() {
const count = parseInt(document.getElementById('particleSlider').value);
scene3.remove(particles3);
createParticles(count);
}
// 初始化所有 Demo
window.onload = () => {
initDemo1();
initDemo2();
initDemo3();
};
// 响应式处理
window.addEventListener('resize', () => {
const containers = ['demo1', 'demo2', 'demo3'];
const cameras = [camera1, camera2, camera3];
const renderers = [renderer1, renderer2, renderer3];
containers.forEach((id, i) => {
const container = document.getElementById(id);
cameras[i].aspect = container.clientWidth / container.clientHeight;
cameras[i].updateProjectionMatrix();
renderers[i].setSize(container.clientWidth, container.clientHeight);
});
});
</script>
</body>
</html>

BIN
others/huohuo-vue3-threejs-master.zip Normal file
View File

Binary file not shown.

BIN
others/mzjc_bansw.glb Normal file
View File

Binary file not shown.

BIN
others/three.js-dev.zip Normal file
View File

Binary file not shown.

43
package.json Normal file
View File

@@ -0,0 +1,43 @@
{
"name": "demos",
"type": "module",
"version": "0.0.0",
"private": true,
"engines": {
"node": "^20.19.0 || >=22.12.0"
},
"scripts": {
"dev": "vite",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --build",
"lint": "eslint",
"lint:fix": "eslint --fix"
},
"dependencies": {
"pinia": "^3.0.3",
"sass": "^1.93.3",
"three": "^0.181.0",
"vue": "^3.5.22",
"vue-router": "^4.6.3"
},
"devDependencies": {
"@antfu/eslint-config": "^6.2.0",
"@tsconfig/node22": "^22.0.2",
"@types/node": "^22.18.11",
"@types/three": "^0.181.0",
"@unocss/eslint-plugin": "^66.5.4",
"@vitejs/plugin-vue": "^6.0.1",
"@vue/eslint-config-typescript": "^14.6.0",
"@vue/tsconfig": "^0.8.1",
"eslint": "^9.37.0",
"jiti": "^2.6.1",
"npm-run-all2": "^8.0.4",
"typescript": "~5.9.0",
"unocss": "^66.5.4",
"vite": "npm:rolldown-vite@latest",
"vite-plugin-vue-devtools": "^8.0.3",
"vue-tsc": "^3.1.1"
}
}

5179
pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
public/lxb_grp.glb Normal file
View File

Binary file not shown.

BIN
public/mzjc_bansw.glb Normal file
View File

Binary file not shown.

7
src/App.vue Normal file
View File

@@ -0,0 +1,7 @@
<script setup lang="ts">
import { RouterView } from 'vue-router'
</script>
<template>
<RouterView />
</template>

86
src/assets/base.css Normal file
View File

@@ -0,0 +1,86 @@
/* color palette from <https://github.com/vuejs/theme> */
:root {
--vt-c-white: #ffffff;
--vt-c-white-soft: #f8f8f8;
--vt-c-white-mute: #f2f2f2;
--vt-c-black: #181818;
--vt-c-black-soft: #222222;
--vt-c-black-mute: #282828;
--vt-c-indigo: #2c3e50;
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
--vt-c-text-light-1: var(--vt-c-indigo);
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
--vt-c-text-dark-1: var(--vt-c-white);
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}
/* semantic color variables for this project */
:root {
--color-background: var(--vt-c-white);
--color-background-soft: var(--vt-c-white-soft);
--color-background-mute: var(--vt-c-white-mute);
--color-border: var(--vt-c-divider-light-2);
--color-border-hover: var(--vt-c-divider-light-1);
--color-heading: var(--vt-c-text-light-1);
--color-text: var(--vt-c-text-light-1);
--section-gap: 160px;
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: var(--vt-c-black);
--color-background-soft: var(--vt-c-black-soft);
--color-background-mute: var(--vt-c-black-mute);
--color-border: var(--vt-c-divider-dark-2);
--color-border-hover: var(--vt-c-divider-dark-1);
--color-heading: var(--vt-c-text-dark-1);
--color-text: var(--vt-c-text-dark-2);
}
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
font-weight: normal;
}
body {
min-height: 100vh;
color: var(--color-text);
background: var(--color-background);
transition:
color 0.5s,
background-color 0.5s;
line-height: 1.6;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen,
Ubuntu,
Cantarell,
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
sans-serif;
font-size: 15px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

1
src/assets/logo.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 276 B

25
src/assets/main.css Normal file
View File

@@ -0,0 +1,25 @@
@import './base.css';
#app {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
box-sizing: border-box;
font-weight: normal;
}
a,
.green {
text-decoration: none;
color: hsla(160, 100%, 37%, 1);
transition: 0.4s;
padding: 3px;
}
@media (hover: hover) {
a:hover {
background-color: hsla(160, 100%, 37%, 0.2);
}
}

36
src/components/HelloWorld.vue Normal file
View File

@@ -0,0 +1,36 @@
<script setup lang="ts">
defineProps<{
msg: string
}>()
</script>
<template>
<div class="greetings">
<h1 class="green">
{{ msg }}
</h1>
<h3>
You’ve successfully created a project with
<a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
</h3>
</div>
</template>
<style scoped>
h1 {
font-weight: 500;
font-size: 2.6rem;
position: relative;
top: -10px;
}
h3 {
font-size: 1.2rem;
}
.greetings h1,
.greetings h3 {
text-align: center;
}
</style>

100
src/components/TheWelcome.vue Normal file
View File

@@ -0,0 +1,100 @@
<script setup lang="ts">
import CommunityIcon from './icons/IconCommunity.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'
import EcosystemIcon from './icons/IconEcosystem.vue'
import SupportIcon from './icons/IconSupport.vue'
import ToolingIcon from './icons/IconTooling.vue'
import WelcomeItem from './WelcomeItem.vue'
const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
</script>
<template>
<WelcomeItem>
<template #icon>
<DocumentationIcon />
</template>
<template #heading>
Documentation
</template>
Vue’s
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
provides you with all information you need to get started.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<ToolingIcon />
</template>
<template #heading>
Tooling
</template>
This project is served and bundled with
<a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
recommended IDE setup is
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
+
<a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener">Vue - Official</a>. If you need to test your components and web pages, check out
<a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
and
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
/
<a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>.
<br>
More instructions are available in
<a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a>.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<EcosystemIcon />
</template>
<template #heading>
Ecosystem
</template>
Get official tools and libraries for your project:
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
you need more resources, we suggest paying
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
a visit.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<CommunityIcon />
</template>
<template #heading>
Community
</template>
Got stuck? Ask your question on
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
(our official Discord server), or
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener">StackOverflow</a>. You should also follow the official
<a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a>
Bluesky account or the
<a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
X account for latest news in the Vue world.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<SupportIcon />
</template>
<template #heading>
Support Vue
</template>
As an independent project, Vue relies on community backing for its sustainability. You can help
us by
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
</WelcomeItem>
</template>

43
src/components/WelcomeItem.vue Normal file
View File

@@ -0,0 +1,43 @@
<template>
<div class="item">
<i>
<slot name="icon" />
</i>
<div class="details">
<h3>
<slot name="heading" />
</h3>
<slot />
</div>
</div>
</template>
<style scoped>
.item {
margin-top: 2rem;
display: flex;
position: relative;
}
.details {
flex: 1;
margin-left: 1rem;
}
i {
display: flex;
place-items: center;
place-content: center;
width: 32px;
height: 32px;
color: var(--color-text);
}
h3 {
font-size: 1.2rem;
font-weight: 500;
margin-bottom: 0.4rem;
color: var(--color-heading);
}
</style>

7
src/components/icons/IconCommunity.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
<path
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
/>
</svg>
</template>

7
src/components/icons/IconDocumentation.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
<path
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
/>
</svg>
</template>

7
src/components/icons/IconEcosystem.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
<path
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
/>
</svg>
</template>

7
src/components/icons/IconSupport.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
<path
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
/>
</svg>
</template>

19
src/components/icons/IconTooling.vue Normal file
View File

@@ -0,0 +1,19 @@
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license -->
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
class="iconify iconify--mdi"
width="24"
height="24"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 24 24"
>
<path
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
fill="currentColor"
/>
</svg>
</template>

15
src/main.ts Normal file
View File

@@ -0,0 +1,15 @@
import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './assets/main.css'
import 'uno.css'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')

20
src/router/index.ts Normal file
View File

@@ -0,0 +1,20 @@
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/home.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView,
},
{
path: '/3d-point',
name: '3d-point',
component: () => import('../views/3d-point.vue'),
},
],
})
export default router

12
src/stores/counter.ts Normal file
View File

@@ -0,0 +1,12 @@
import { defineStore } from 'pinia'
import { computed, ref } from 'vue'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, doubleCount, increment }
})

367
src/views/3d-point.vue Normal file
View File

@@ -0,0 +1,367 @@
<script setup lang="ts">
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import {
CSS3DRenderer,
CSS3DSprite,
} from 'three/examples/jsm/renderers/CSS3DRenderer.js'
import { onMounted, onUnmounted, shallowRef } from 'vue'
// 透明小球的名字
const ballNames = ['bg_c401', 'bg_e401', 'bg_e402', 'bg_e501', 'bg_e502', 'bg_e503', 'bg_e505', 'bg_e506', 'bg_e508', 'bg_e509', 'bg_e513', 'bg_p502', 'bg_p503', 'bg_p504', 'bg_p505', 'bg_r401', 'bg_t501', 'bg_t502', 'bg_t503', 'bg_v401', 'bg_v502', 'bg_v503', 'bg_v505', 'bg_v506']
// 告警设备的名字
const deviceNames = ['bg_c401', 'bg_e401', 'bg_e402', 'bg_e501']// ['kzf_peij_18', 'kzf_peij_20', 'kzf_peij_21']
function initScene(element: HTMLElement, _options: Record<string, any>) {
const scene = new THREE.Scene()
scene.background = new THREE.Color(0x1A1A1A)
const clientWidth = element.clientWidth
const clientHeight = element.clientHeight
const camera = new THREE.PerspectiveCamera(
75,
clientWidth / clientHeight,
0.1,
1000,
)
camera.position.set(0, 6, 7)
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(clientWidth, clientHeight)
renderer.shadowMap.enabled = true
renderer.shadowMap.type = THREE.PCFSoftShadowMap
element.appendChild(renderer.domElement)
// 添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
// 阻尼效果
controls.enableDamping = true
controls.dampingFactor = 0.25
// 添加光照
const ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.6)
scene.add(ambientLight)
const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 1)
directionalLight.position.set(10, 10, 5)
directionalLight.castShadow = true
scene.add(directionalLight)
// 射线检测器
const raycaster = new THREE.Raycaster()
const css3DRenderer = new CSS3DRenderer()
css3DRenderer.setSize(clientWidth, clientHeight)
css3DRenderer.domElement.style.position = 'absolute'
css3DRenderer.domElement.style.top = '0'
css3DRenderer.domElement.style.left = '0'
css3DRenderer.domElement.style.zIndex = '1'
css3DRenderer.domElement.style.pointerEvents = 'none'
element.appendChild(css3DRenderer.domElement)
return { scene, camera, renderer, controls, raycaster, css3DRenderer }
}
// 物体上加载2D标签
// 物体在当前视角下看不到的情况下隐藏2D标签
const threeRef = shallowRef<HTMLElement>()
const instance = shallowRef<ReturnType<typeof initScene>>()
const ballObjects = shallowRef<THREE.Mesh[]>([])
const deviceObjects = shallowRef<THREE.Mesh[]>([])
function loadModel() {
const loader = new GLTFLoader()
loader.load(
'/mzjc_bansw.glb', // 你的GLB文件路径
(gltf) => {
const model = gltf.scene
instance.value!.scene.add(model)
// 便利找到需要有告警效果的设备
deviceObjects.value = deviceNames.map(name => model.getObjectByName(name) as THREE.Mesh)
// 遍历模型中的所有网格，找出透明小球并存储
ballObjects.value = ballNames.map(name => model.getObjectByName(name) as THREE.Mesh)
// 为透明小球设置材质 便于观察
ballObjects.value.forEach((ball) => {
ball.material = new THREE.MeshStandardMaterial({ color: 0xFF0000, transparent: true, opacity: 0.75 })
})
},
)
}
let animationId: number
function animate() {
animationId = requestAnimationFrame(animate)
instance.value!.controls.update()
instance.value!.renderer.render(instance.value!.scene, instance.value!.camera)
instance.value!.css3DRenderer.render(instance.value!.scene, instance.value!.camera)
}
function onWindowResize() {
if (!threeRef.value)
return
const width = threeRef.value.clientWidth
const height = threeRef.value.clientHeight
instance.value!.renderer.setSize(width, height)
instance.value!.camera.aspect = width / height
instance.value!.camera.updateProjectionMatrix()
instance.value!.renderer.setPixelRatio(width / height)
instance.value!.css3DRenderer.setSize(width, height)
}
function cleanup() {
if (animationId) {
cancelAnimationFrame(animationId)
}
window.removeEventListener('resize', onWindowResize)
if (instance.value!.controls) {
instance.value!.controls.dispose()
}
if (instance.value!.renderer) {
instance.value!.renderer.dispose()
}
}
function init() {
if (!threeRef.value)
return
// 初始化场景
instance.value = initScene(threeRef.value, {})
// 加载GLB模型
loadModel()
// 开始渲染循环
animate()
// 监听窗口大小变化
window.addEventListener('resize', onWindowResize)
}
const source = shallowRef<THREE.Mesh[]>([])
const css3DSprites = shallowRef<CSS3DSprite[]>([])
function createElement(text: string = '俺是标签！') {
const tagElement = document.createElement('div')
tagElement.style.width = '120px'
tagElement.style.height = '30px'
tagElement.style.background = 'rgba(255, 0, 0, 0.9)'
tagElement.style.color = '#ffffff'
tagElement.style.textAlign = 'center'
tagElement.style.pointerEvents = 'none'
tagElement.innerHTML = text
return tagElement
}
// 显示标签
function showTag() {
// 清理之前的标签和坐标轴
css3DSprites.value.forEach((sprite) => {
instance.value!.scene.remove(sprite)
})
css3DSprites.value = []
source.value = ballObjects.value.filter(ball => ball !== null && ball !== undefined)
source.value.forEach((modelObject, index) => {
if (!modelObject)
return
const element = createElement(`${modelObject.name || `标签 ${index + 1}`}`)
const css3DObject = new CSS3DSprite(element)
// 设置缩放
css3DObject.scale.set(1, 1, 1)
// 这里为什么用geometry.boundingSphere?.center而不是position？
// 因为有些模型的position可能不是几何体的中心位置，使用boundingSphere的中心可以更准确地定位标签位置
// 正常来说position应该能表达这个物体相对于场景的位置 但是我测试的这个模型是所有的物体相对于场景的位置都是0,0,0
// 所以这里用boundingSphere的中心位置更合适 - 如果没有boundingSphere则退回使用position 这个要根据模型具体情况具体分析
// 不清楚之前做模型有没有什么要求
const position = modelObject.geometry.boundingSphere?.center ?? modelObject.position
css3DObject.position.copy(position)
// 直接将标签添加为物体的子对象，这样会自动跟随
modelObject.add(css3DObject)
css3DSprites.value.push(css3DObject)
// 设置模型颜色
modelObject.material = new THREE.MeshStandardMaterial({ color: 0x00FF00 })
})
}
const selectedObjects = shallowRef<{ mesh: THREE.Mesh, outline: THREE.LineSegments }[]>([])
// 创建描边效果 - 使用 EdgesGeometry 创建真正的轮廓线
function createOutline(mesh: THREE.Mesh) {
// 使用 EdgesGeometry 来获取物体的边缘
const edges = new THREE.EdgesGeometry(mesh.geometry, 30) // 阈值角度,只显示大于30度的边
const outlineMaterial = new THREE.LineBasicMaterial({
color: 0xFFFF00, // 黄色轮廓线
linewidth: 2, // 注意:WebGL限制,这个值在大多数平台上只能是1
})
const outlineMesh = new THREE.LineSegments(edges, outlineMaterial)
// 继承物体的变换
outlineMesh.position.copy(mesh.position)
outlineMesh.rotation.copy(mesh.rotation)
outlineMesh.scale.copy(mesh.scale)
return outlineMesh
}
// 显示轮廓效果
function showOutline() {
source.value = deviceObjects.value
source.value.forEach((modelObject) => {
// 切换描边
const index = selectedObjects.value.findIndex(({ mesh }) => modelObject.name === mesh.name)
if (index > -1) {
// 移除描边
modelObject.remove(selectedObjects.value[index]!.outline)
selectedObjects.value.splice(index, 1)
}
else {
// 添加描边
const outline = createOutline(modelObject)
modelObject.add(outline)
selectedObjects.value.push({ mesh: modelObject, outline })
}
})
}
function goBack() {
// 清理CSS3D标签 - 从其父对象（物体）中移除
css3DSprites.value.forEach((sprite) => {
if (sprite.parent) {
sprite.parent.remove(sprite)
}
})
css3DSprites.value = []
// 恢复物体原始材质颜色
source.value.forEach((modelObject) => {
if (modelObject.material) {
// 根据原始物体类型恢复不同颜色
if (ballObjects.value.includes(modelObject)) {
// 恢复红色球体
modelObject.material = new THREE.MeshStandardMaterial({
color: 0xFF0000,
transparent: true,
opacity: 0.75,
})
}
}
})
source.value = []
}
function flyTo(object: THREE.Mesh) {
if (!object || !instance.value)
return
// 获取物体的世界坐标位置
const worldPosition = new THREE.Vector3()
object.getWorldPosition(worldPosition)
// 计算物体的包围盒，用于确定合适的观察距离
const box = new THREE.Box3().setFromObject(object)
const size = box.getSize(new THREE.Vector3())
const maxSize = Math.max(size.x, size.y, size.z)
// 根据物体大小计算合适的观察距离
const distance = maxSize * 3 // 距离系数可以根据需求调整
// 计算目标相机位置（在物体前方稍微偏上的位置）
const targetCameraPosition = new THREE.Vector3(
worldPosition.x + distance * 0.5,
worldPosition.y + distance * 0.3,
worldPosition.z + distance,
)
// 获取当前相机位置和目标位置
const startPosition = instance.value.camera.position.clone()
const startTarget = instance.value.controls.target.clone()
// 动画参数
const duration = 2000 // 动画持续时间（毫秒）
const startTime = Date.now()
function animateFlyTo() {
const elapsed = Date.now() - startTime
const progress = Math.min(elapsed / duration, 1)
// 使用缓动函数让动画更自然（easeInOutCubic）
const easeProgress = progress < 0.5
? 4 * progress * progress * progress
: 1 - (-2 * progress + 2) ** 3 / 2
// 插值计算当前相机位置
const currentPosition = new THREE.Vector3().lerpVectors(
startPosition,
targetCameraPosition,
easeProgress,
)
// 插值计算当前目标位置
const currentTarget = new THREE.Vector3().lerpVectors(
startTarget,
worldPosition,
easeProgress,
)
// 更新相机位置和目标
instance.value!.camera.position.copy(currentPosition)
instance.value!.controls.target.copy(currentTarget)
instance.value!.controls.update()
// 如果动画未完成，继续下一帧
if (progress < 1) {
requestAnimationFrame(animateFlyTo)
}
}
// 开始动画
animateFlyTo()
}
onMounted(init)
onUnmounted(cleanup)
</script>
<template>
<div class="relative w-full h-full overflow-hidden">
<div ref="threeRef" class="w-full h-full" />
<div v-if="!source.length" class="absolute top-0 right-0 flex">
<button @click="showTag">
显示标签
</button>
<button @click="showOutline">
显示轮廓效果
</button>
</div>
<div v-else class="absolute top-0 right-0 flex flex-wrap">
<button @click="goBack">
返回
</button>
<button v-for="value in source" :key="value.name" @click="flyTo(value)">
{{ value.name }}
</button>
</div>
</div>
</template>

14
src/views/home.vue Normal file
View File

@@ -0,0 +1,14 @@
<script lang="ts" setup>
const demos = [{ name: '3D Point', path: '/3d-point' }]
</script>
<template>
<main>
<headers>Demos</headers>
<ul>
<li v-for="demo in demos" :key="demo.path">
<a :href="demo.path">{{ demo.name }}</a>
</li>
</ul>
</main>
</template>

12
tsconfig.app.json Normal file
View File

@@ -0,0 +1,12 @@
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"]
}

11
tsconfig.json Normal file
View File

@@ -0,0 +1,11 @@
{
"references": [
{
"path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.app.json"
}
],
"files": []
}

19
tsconfig.node.json Normal file
View File

@@ -0,0 +1,19 @@
{
"extends": "@tsconfig/node22/tsconfig.json",
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"module": "ESNext",
"moduleResolution": "Bundler",
"types": ["node"],
"noEmit": true
},
"include": [
"vite.config.*",
"vitest.config.*",
"cypress.config.*",
"nightwatch.conf.*",
"playwright.config.*",
"eslint.config.*"
]
}

6
uno.config.ts Normal file
View File

@@ -0,0 +1,6 @@
import { defineConfig, transformerDirectives, transformerVariantGroup } from 'unocss'
export default defineConfig({
details: true,
transformers: [transformerVariantGroup(), transformerDirectives()],
})

20
vite.config.ts Normal file
View File

@@ -0,0 +1,20 @@
import { fileURLToPath, URL } from 'node:url'
import vue from '@vitejs/plugin-vue'
import Unocss from 'unocss/vite'
import { defineConfig } from 'vite'
import vueDevTools from 'vite-plugin-vue-devtools'
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
vueDevTools(),
Unocss(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
},
})