3차원의 랜덤 지점에서 랜덤 지점으로 직선 긋기
<script src="https://unpkg.com/three@0.126.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three/examples/js/controls/OrbitControls.js"></script>-50 ~ 50의 랜덤 x, y, z와 -5 ~ 5의 랜덤 u, v, w 생성
(x,y,z)와 (x+u, y+v, z+w)를 잇는 직선을 그림
그냥 html에 때려넣음
threejs_exam.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D Air Flow Log</title>
<style>
body {
margin: 0;
overflow: hidden;
}
canvas {
display: block;
}
</style>
</head>
<body>
<div id="airflow"></div>
<script src="https://unpkg.com/three@0.126.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three/examples/js/controls/OrbitControls.js"></script>
<script>
var airFlowData = [];
// 측정 지점의 수
var numPoints = 1000;
// 측정 지점 생성
for (var i = 0; i < numPoints; i++) {
var x = Math.random() * 100 - 50; // x 좌표
var y = Math.random() * 100 - 50; // y 좌표
var z = Math.random() * 100 - 50; // z 좌표
var u = Math.random() * 10 - 5; // x 방향 속도
var v = Math.random() * 10 - 5; // y 방향 속도
var w = Math.random() * 10 - 5; // z 방향 속도
// 측정 지점 정보 저장
airFlowData.push({x: x, y: y, z: z, u: u, v: v, w: w});
}
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, 1/*window.innerWidth / window.innerHeight*/, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( 300,300);//window.innerWidth, window.innerHeight );
document.getElementById('airflow').appendChild(renderer.domElement);
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.screenSpacePanning = false;
controls.minDistance = 1; // 카메라 최대줌
controls.maxDistance = 100;//카메라 최소줌
controls.maxPolarAngle = Math.PI / 2;
var material = new THREE.LineBasicMaterial( { color: 0x00ffff } );
var geometry = new THREE.BufferGeometry();
var vertices = [];
var indices = [];
airFlowData.forEach(function(d, i) {
vertices.push(d.x, d.y, d.z);
vertices.push(d.x + d.u, d.y + d.v, d.z + d.w);
indices.push(i*2, i*2+1);
});
geometry.setAttribute( 'position', new THREE.Float32BufferAttribute(vertices, 3));
geometry.setIndex(indices);
var lines = new THREE.LineSegments(geometry, material);
scene.add(lines);
camera.position.z = 100;
// xyz 눈금자 그리기
for (var i = -70; i <= 70; i++) {
var geometry = new THREE.BoxGeometry(1, 0.3, 0.3);
var material = new THREE.MeshBasicMaterial({ color: 0x0000ff });
var cube = new THREE.Mesh(geometry, material);
cube.position.set(i, 0, 0);
scene.add(cube);
}
// y축 눈금 생성
for (var i = -70; i <= 70; i++) {
var geometry = new THREE.BoxGeometry(0.3, 1, 0.3);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
cube.position.set(0, i, 0);
scene.add(cube);
}
// z축 눈금 생성
for (var i = -70; i <= 70; i++) {
var geometry = new THREE.BoxGeometry(0.3, 0.3, 1);
var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var cube = new THREE.Mesh(geometry, material);
cube.position.set(0, 0, i);
scene.add(cube);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
controls.update();
}
animate();
</script>
</body>
</html>
