모프 타겟

import * as THREE from 'three';
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0c0c16);
const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
camera.position.set(0, 0, 4.6);

scene.add(new THREE.AmbientLight(0x556080, 1.2));
const dLight = new THREE.DirectionalLight(0xffffff, 1.1);
dLight.position.set(3, 4, 4);
scene.add(dLight);

const geo = new THREE.IcosahedronGeometry(1.3, 3);
const basePos = geo.attributes.position;
const spike = new Float32Array(basePos.count * 3);
const v = new THREE.Vector3();
for (let i = 0; i < basePos.count; i++) {
  v.fromBufferAttribute(basePos, i);
  const n = v.clone().normalize();
  const bump = 0.55 * (0.5 + 0.5 * Math.sin(i * 12.9898));
  v.addScaledVector(n, bump);
  spike[i * 3] = v.x; spike[i * 3 + 1] = v.y; spike[i * 3 + 2] = v.z;
}
geo.morphAttributes.position = [new THREE.Float32BufferAttribute(spike, 3)];

const mesh = new THREE.Mesh(geo, new THREE.MeshStandardMaterial({ color: 0x8f7bff, roughness: 0.4, flatShading: true }));
mesh.frustumCulled = false;
scene.add(mesh);

function resize() { renderer.setSize(innerWidth, innerHeight); camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); }
addEventListener('resize', resize); resize();
renderer.setAnimationLoop((t) => {
  const time = t * 0.001;
  mesh.morphTargetInfluences[0] = 0.5 + 0.5 * Math.sin(time * 1.2);
  mesh.rotation.y = time * 0.3;
  renderer.render(scene, camera);
});