three.jsで 3D オブジェクト (.stl メッシュ オブジェクト) の「平面」の面積を計算しようとしていnます。マウスクリックで選択します。たとえば、このエリア：
「平面」の表面を構成するすべての「三角形」 (.stl であるため) は同じ角度で取り付けられていることがわかっています。角度が最後の三角形と比較して変化する場合、この三角形はそうではないことがわかります。もはや「飛行機」の一部。
したがって、これが計算しようとしているサーフェスのプロパティであることがわかっているため、これを何らかの形式のthree.js Raycasterと組み合わせて使用して、面積を選択して計算できます (正しいプロパティを持つ三角形のすべての面積を一緒に追加することによって)。 .
今のところ、選択したサーフェスのサイズを気にする必要はありません (たとえば、曲面で「平面」を見つけようとしても無効ですが、今は気にする必要はありません)。
three.jsでエリアと「平面」を見つけようとするとどうなりますか。より具体的には、.stl 形式の「三角形」の読み取りを開始するにはどうすればよいですか。
私の現在のコードの最小限の作業例(作業用の .stl ファイルが含まれています)。単純なライブ サーバーを使用して実行できます。たとえば、Ritwick Dey のプラグインを使用する VS Codeでは、「通常の」HTML/ JS。
唯一の要件は、three.js で計算しようとしているポイントを選択し、領域 (選択された三角形) が選択されたときに three.js で別の色を与えることです。必要な他の計算は、ある種のバックエンド (Python、Node.js、またはその他のもの) で行うことができますが、そのような複雑なデータをプログラム間で転送する明確な方法はわかりません。
私の最小限の再現コードです。私の写真で使用されている .stl ファイルについては、上記の github リンクを参照してください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stackoverflow Example</title>
<link rel="stylesheet" type="text/css" href="../style/render.css">
</head>
<body>
<script src="https://rawcdn.githack.com/mrdoob/three.js/r117/build/three.min.js"></script>
<script src="https://rawcdn.githack.com/mrdoob/three.js/r117/examples/js/loaders/STLLoader.js"></script>
<script src="https://rawcdn.githack.com/mrdoob/three.js/r117/examples/js/controls/OrbitControls.js"></script>
<script>
function init() {
// Setup some basic stuff
scene = new THREE.Scene();
scene.background = new THREE.Color(0xdddddd);
// Setup Camera
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 5000);
// Setup renerer and add to page
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// Setup Camera Position
camera.rotation.y = 45 / 180 * Math.PI;
camera.position.x = 800;
camera.position.y = 100;
camera.position.z = 1000;
// Add Camera Control through orbit.js
let controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', renderer);
// Add some basic ambient lighting (Does light all parts equally and does not cast shadows)
hlight = new THREE.AmbientLight(0x404040, 20);
scene.add(hlight);
//Add some point lights to simulate real lights
light = new THREE.PointLight(0xc4c4c4, 1, 10000);
light.position.set(0, 300, 500);
scene.add(light);
light2 = new THREE.PointLight(0xc4c4c4, 1, 10000);
light2.position.set(500, 100, 0);
scene.add(light2);
light3 = new THREE.PointLight(0xc4c4c4, 1, 10000);
light3.position.set(0, 100, -500);
scene.add(light3);
light4 = new THREE.PointLight(0xc4c4c4, 1, 10000);
light4.position.set(-500, 300, 0);
scene.add(light4);
controls.update();
// Animation Script
function animate() {
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
// Setup GLTF Loader and load in obj
let loader = new THREE.STLLoader();
loader.load('example.stl', function (geometry) {
// console.log(gltf);
var material = new THREE.MeshPhongMaterial({
color: 0x171717,
shininess: 200
});
var mesh = new THREE.Mesh(geometry, material);
mesh.castShadow = true;
mesh.receiveShadow = true;
mesh.position.set(0, 0, 0);
scene.add(mesh);
renderer.render(scene, camera)
animate();
});
}
// Call method for starting init
init();
</script>
</body>
</html>
編集: 私の意図した出力の例ですが、three.js ではなく Fusion 360 です (注、元のファイルは .stl ですが、three.js では部分表示が許可されていないため、バックエンドで .stl に変換されます)。
.stl ファイルの「三角形」の例
