<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Deforming Wireframe Torus</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// 初期設定
let scene, camera, renderer, torus, noiseStrength = 0.1;
// シーンの初期化
function init() {
// シーンを作成
scene = new THREE.Scene();
// カメラを作成
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// レンダラーを作成
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// ワイヤーフレームのトーラスを作成
const geometry = new THREE.TorusGeometry(1, 0.4, 16, 100);
const material = new THREE.MeshBasicMaterial({
color: 0xffffff,
wireframe: true
});
torus = new THREE.Mesh(geometry, material);
scene.add(torus);
animate();
}
// トーラスをランダムノイズで変形
function deformTorus() {
const positionAttribute = torus.geometry.attributes.position;
const count = positionAttribute.count;
for (let i = 0; i < count; i++) {
const x = positionAttribute.getX(i);
const y = positionAttribute.getY(i);
const z = positionAttribute.getZ(i);
// ランダムなノイズを加える
const noise = (Math.random() - 0.5) * noiseStrength;
positionAttribute.setXYZ(i, x + noise, y + noise, z + noise);
}
positionAttribute.needsUpdate = true; // 更新
}
// アニメーションループ
function animate() {
requestAnimationFrame(animate);
// トーラスの変形
deformTorus();
// トーラスの回転
torus.rotation.x += 0.01;
torus.rotation.y += 0.01;
renderer.render(scene, camera);
}
// ウィンドウのリサイズに対応
window.addEventListener('resize', function() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});
// 初期化呼び出し
init();
</script>
</body>
</html>
