Create a 3D spatial alignment …

# 3D空间对齐小游戏原型（Three.js）

一、核心玩法设计

• 目标：500个发光粒子散乱分布在飞船周围，玩家鼠标旋转飞船视角，使粒子投影对齐目标星座图案
• 判定：粒子投影点与目标星座点的平均距离低于阈值即通关
• 反馈：越接近目标，粒子颜色越亮、进度条越满

二、可运行的HTML Demo

```html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>星阵对齐</title>

<style>

body{margin:0;overflow:hidden;background:#000;color:#fff;font-family:sans-serif}

#ui{position:fixed;top:10px;left:10px}

</style>

</head>

<body>

<div id="ui">对齐度：<span id="score">0</span>%</div>

<script type="module">

import * as THREE from 'https://unpkg.com/[email protected]/build/three.module.js';

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(60, innerWidth/innerHeight, 0.1, 100);

const renderer = new THREE.WebGLRenderer();

renderer.setSize(innerWidth, innerHeight);

document.body.appendChild(renderer.domElement);

// 目标星座：北斗七星近似点位（可自行扩展）

const targetPoints = [

[-2,1.5],[0,2],[2,1.5],[3,0.5],[2.5,-1],[1,-1.5],[3,-2]

].map(p=>new THREE.Vector3(p[0],p[1],0));

// 500个粒子：目标点 + 随机Z轴扰动（旋转对齐后Z不影响XY投影）

const N = 500;

const positions = new Float32Array(N*3);

for(let i=0;i<N;i++){

const t = targetPoints[i % targetPoints.length];

positions[i*3] = t.x + (Math.random()-0.5)*0.15;

positions[i*3+1] = t.y + (Math.random()-0.5)*0.15;

positions[i*3+2] = (Math.random()-0.5)*6; // 打乱深度

}

const geo = new THREE.BufferGeometry();

geo.setAttribute('position', new THREE.BufferAttribute(positions,3));

const mat = new THREE.PointsMaterial({

color:0x66ccff, size:0.15, transparent:true,

blending:THREE.AdditiveBlending, depthWrite:false

});

const points = new THREE.Points(geo, mat);

points.position.z