円柱を線の代わりにして点を繋いでいく

2023年3月18日 00:31
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r132/three.min.js"></script>
		<script src="https://cdn.rawgit.com/mrdoob/three.js/r132/examples/js/controls/OrbitControls.js"></script>
		<script>
			function generateRandomPositions() {
				const positions = [];
				for (let i = 0; i < 10; i++) {
					const x = Math.random()*20;
					const y = Math.random()*20;
					const z = Math.random()*20;
					const position = new THREE.Vector3(x, y, z);
					positions.push(position);
				}
				return positions;
			}
			
			function extendCylinder(start, end, startRadius, endRadius) {
				const height = start.distanceTo(end);
				const position = start.clone().add(end).multiplyScalar(0.5);
				const direction = end.clone().sub(start).normalize();
				const geometry = new THREE.CylinderGeometry(startRadius, endRadius, height, 12);
				const material = new THREE.MeshPhongMaterial({ color: 0x550000 });
				const cylinder = new THREE.Mesh(geometry, material);
				cylinder.position.set(position.x, position.y, position.z);
				cylinder.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), direction);
				return cylinder;
			}

			
			function init() {
				const scene = new THREE.Scene();
				const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 1000);
				camera.position.y = 20;
				camera.position.z = 50;
				camera.lookAt(new THREE.Vector3(10, 20, 0));
				
				// Add a point light to the scene
				const sunLight = new THREE.PointLight(0xffffff, 3, 100, 1);
				sunLight.position.set(10, 50, 30);
				scene.add(sunLight);
				
				const renderer = new THREE.WebGLRenderer();
				renderer.setClearColor(0xaaaaaa);
				renderer.setSize(window.innerWidth, window.innerHeight);
				document.body.appendChild(renderer.domElement);
				
				// 1. generateRandomPositions()でランダムに10個のVector3オブジェクトを作成する
				const positions = generateRandomPositions();
				
				// 2. ベクトル間のシリンダーを作成し、sceneに追加する
				const startRadius = 1.0;
				const subRadius = 0.1;
				for (let i = 0; i < positions.length - 1; i++) {
					const start = positions[i];
					const end = positions[i + 1];
					const radius = startRadius - 0.1 * i;
					const cylinder = extendCylinder(start, end, radius, radius - 0.1);
					scene.add(cylinder);
				}

				
				// 3. カメラ位置の制御用のOrbitControlsを追加する
				const controls = new THREE.OrbitControls(camera, renderer.domElement);
				
				// 4. アニメーションのためのレンダリングループを設定する
				function animate() {
					requestAnimationFrame(animate);
					scene.rotation.y += 0.002;
					camera.lookAt(new THREE.Vector3(0, 0, 0));
					renderer.render(scene, camera);
				}
				animate();
			}
			
			init();
			
		</script>
	</body>
この記事が気に入ったらサポートをしてみませんか？