File size: 2,050 Bytes
66242a7 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | // ═══════════════════════════════════════════════════════
// ITEMS — glowing, pulsing item boxes
// ═══════════════════════════════════════════════════════
import * as THREE from 'three';
import { frame } from './track.js';
export function createItemBoxes(scene) {
const itemBoxes = [];
for (let i = 0; i < 10; i++) {
const t = i / 10;
const { point } = frame(t);
const boxMat = new THREE.MeshPhongMaterial({
color: 0xffaa00, emissive: 0x664400, emissiveIntensity: 0.5,
shininess: 100, specular: 0xffffff,
});
const box = new THREE.Mesh(new THREE.BoxGeometry(1.4, 1.4, 1.4), boxMat);
box.position.copy(point); box.position.y += 2;
scene.add(box);
itemBoxes.push(box);
// "?" decal
const qCanvas = document.createElement('canvas');
qCanvas.width = qCanvas.height = 64;
const qctx = qCanvas.getContext('2d');
qctx.fillStyle = '#ffaa00'; qctx.fillRect(0, 0, 64, 64);
qctx.strokeStyle = '#222'; qctx.lineWidth = 4; qctx.strokeRect(2, 2, 60, 60);
qctx.fillStyle = '#fff'; qctx.font = 'bold 48px Arial';
qctx.textAlign = 'center'; qctx.textBaseline = 'middle'; qctx.fillText('?', 32, 34);
const qTex = new THREE.CanvasTexture(qCanvas);
const qGeo = new THREE.PlaneGeometry(1.0, 1.0);
const qMat = new THREE.MeshBasicMaterial({ map: qTex, transparent: true });
for (const face of [
{ pos: [0, 0, 0.71], rot: [0, 0, 0] },
{ pos: [0, 0, -0.71], rot: [0, Math.PI, 0] },
{ pos: [0.71, 0, 0], rot: [0, Math.PI / 2, 0] },
{ pos: [-0.71, 0, 0], rot: [0, -Math.PI / 2, 0] },
]) {
const q = new THREE.Mesh(qGeo, qMat);
q.position.set(...face.pos); q.rotation.set(...face.rot);
box.add(q);
}
const glow = new THREE.PointLight(0xffaa00, 0.8, 8);
box.add(glow);
}
return itemBoxes;
}
|