현재 Three.js를 사용하여 .stl 뷰어에서 작업 중입니다. 목표는 특정 영역을 선택하고 계산하는 것입니다. 이 면적 계산을 위해면을 선택 (예 : 색상 변경) 할 수 있어야합니다.
나는 비슷한 것을 찾았 지만 내 자신의 연구에서 본 것에서 이것은 준비된 메쉬 (예제의 큐브와 같은)로만 작동하는 것처럼 보입니다.
이 예제를 내 코드로 구현하려고합니다.
이전에 이와 같은 작업이 수행 된 것은 분명하지만 내 코드에서 어떤 종류의 작업 방식도 구현할 수없는 것 같습니다.
내 현재 코드에는 완전히 작동하는 .stl 로더와 뷰어가 있습니다. 레이 캐스터가 있지만 제대로 작동하지 않는 것 같아 잠시 주석을 달았습니다. Mugen87, 수정 해 주셔서 감사합니다!
github에서 내 코드와 예제 .stl 파일을 다운로드 할 수 있습니다 . VSCode를 사용하여 쉽게 실행할 수있는 라이브 서버 환경 만 필요합니다 (readme 참조).
내 현재 코드 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3d viewer tjalle</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() {
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
document.addEventListener( 'mousemove', onMouseMove, false );
function onMouseMove(event) {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}
// 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);
// Add some basic ambient lighting (Does light all parts equally and does not cast shadows)
hlight = new THREE.AmbientLight(0xffffff, 5.3);
scene.add(hlight);
//Add some point lights to simulate real lights
light = new THREE.PointLight(0xffffff, 1, 10000);
light.position.set(0, 300, 500);
scene.add(light);
controls.update();
// Animation Script
function animate() {
raycaster.setFromCamera(mouse, camera);
scene.children[2].material.color.set(0x1313)
// calculate objects intersecting the picking ray
var intersects = raycaster.intersectObjects(scene.children);
for (var i = 0; i < intersects.length; i++) {
intersects[i].object.material.color.set(0xff0000);
}
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
// Setup GLTF Loader and load in car
let loader = new THREE.STLLoader();
loader.load('../converter/output/output.stl', function (geometry) {
// console.log(gltf);
var material = new THREE.MeshLambertMaterial({
color: 0x1313,
wireframe: false
});
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();
console.log("SCene: ", )
});
}
// Call method for starting init
init();
</script>
</body>
</html>
레이 캐스터 (내 질문이었던)를 사용하여 얼굴 만 선택하는 것은 레이 캐스터에서 intersects데이터를 읽어서 수행 할 수 있습니다 . 얼굴을 조작 할 수있는 기능을 제공하여 '선택'합니다.
예 :
for (var i = 0; i < intersects.length; i++) {
console.log(intersects[i].face)
}
face많은 내장 방법이 있으며 얼굴을 조작하고 정보를 얻을 수있는 기능을 제공합니다. 당신에게 아이디어를 제공하기 위해 이것은 내 console.log(intersects[i].face)출력 에서 직접 복사하여 붙여 넣은 것이며 하나의 얼굴 에만 관련됩니다 ( 참고 : 이것은 최상위 / 부모 수준의 방법 일뿐이며 많은 사람들이 더 많은 자식을 가지고 있습니다.).
Ac {a: 5307, b: 5308, c: 5309, normal: p, vertexNormals: Array(0), …}
a: 5307
b: 5308
c: 5309
color: D
__proto__:
add: ƒ (a)
addColors: ƒ (a,b)
addScalar: ƒ (a)
b: 1
clone: ƒ ()
convertGammaToLinear: ƒ (a)
convertLinearToGamma: ƒ (a)
convertLinearToSRGB: ƒ ()
convertSRGBToLinear: ƒ ()
copy: ƒ (a)
copyGammaToLinear: ƒ (a,b)
copyLinearToGamma: ƒ (a,b)
copyLinearToSRGB: ƒ (a)
copySRGBToLinear: ƒ (a)
equals: ƒ (a)
fromArray: ƒ (a,b)
g: 1
getHSL: ƒ (a)
getHex: ƒ ()
getHexString: ƒ ()
getStyle: ƒ ()
isColor: true
lerp: ƒ (a,b)
lerpHSL: ƒ (a,b)
multiply: ƒ (a)
multiplyScalar: ƒ (a)
offsetHSL: ƒ (a,b,c)
r: 1
set: ƒ (a)
setColorName: ƒ (a)
setHSL: ƒ (a,b,c)
setHex: ƒ (a)
setRGB: ƒ (a,b,c)
setScalar: ƒ (a)
setStyle: ƒ (a)
sub: ƒ (a)
toArray: ƒ (a,b)
toJSON: ƒ ()
constructor: ƒ D(a,b,c)
__proto__: Object
materialIndex: 0
normal: p
x: 0.9839296339696827
y: 0
z: 0.17855664478334757
__proto__:
add: ƒ (a,b)
addScalar: ƒ (a)
addScaledVector: ƒ (a,b)
addVectors: ƒ (a,b)
angleTo: ƒ (a)
applyAxisAngle: ƒ (a,b)
applyEuler: ƒ (a)
applyMatrix3: ƒ (a)
applyMatrix4: ƒ (a)
applyNormalMatrix: ƒ (a)
applyProjection: ƒ (a)
applyQuaternion: ƒ (a)
ceil: ƒ ()
clamp: ƒ (a,b)
clampLength: ƒ (a,b)
clampScalar: ƒ (a,b)
clone: ƒ ()
copy: ƒ (a)
cross: ƒ (a,b)
crossVectors: ƒ (a,b)
distanceTo: ƒ (a)
distanceToManhattan: ƒ (a)
distanceToSquared: ƒ (a)
divide: ƒ (a)
divideScalar: ƒ (a)
dot: ƒ (a)
equals: ƒ (a)
floor: ƒ ()
fromArray: ƒ (a,b)
fromAttribute: ƒ (a,b,c)
fromBufferAttribute: ƒ (a,b,c)
getColumnFromMatrix: ƒ (a,b)
getComponent: ƒ (a)
getPositionFromMatrix: ƒ (a)
getScaleFromMatrix: ƒ (a)
isVector3: true
length: ƒ ()
lengthManhattan: ƒ ()
lengthSq: ƒ ()
lerp: ƒ (a,b)
lerpVectors: ƒ (a,b,c)
manhattanDistanceTo: ƒ (a)
manhattanLength: ƒ ()
max: ƒ (a)
min: ƒ (a)
multiply: ƒ (a,b)
multiplyScalar: ƒ (a)
multiplyVectors: ƒ (a,b)
negate: ƒ ()
normalize: ƒ ()
project: ƒ (a)
projectOnPlane: ƒ (a)
projectOnVector: ƒ (a)
random: ƒ ()
reflect: ƒ (a)
round: ƒ ()
roundToZero: ƒ ()
set: ƒ (a,b,c)
setComponent: ƒ (a,b)
setEulerFromQuaternion: ƒ ()
setEulerFromRotationMatrix: ƒ ()
setFromCylindrical: ƒ (a)
setFromCylindricalCoords: ƒ (a,b,c)
setFromMatrix3Column: ƒ (a, b)
setFromMatrixColumn: ƒ (a,b)
setFromMatrixPosition: ƒ (a)
setFromMatrixScale: ƒ (a)
setFromSpherical: ƒ (a)
setFromSphericalCoords: ƒ (a,b,c)
setLength: ƒ (a)
setScalar: ƒ (a)
setX: ƒ (a)
setY: ƒ (a)
setZ: ƒ (a)
sub: ƒ (a,b)
subScalar: ƒ (a)
subVectors: ƒ (a,b)
toArray: ƒ (a,b)
transformDirection: ƒ (a)
unproject: ƒ (a)
constructor: ƒ p(a,b, c)
__proto__: Object
vertexColors: Array(0)
length: 0
__proto__: Array(0)
vertexNormals: Array(0)
length: 0
__proto__: Array(0)
__proto__:
clone: ƒ ()
copy: ƒ (a)
constructor: ƒ Ac(a,b,c,d,e,f)
__proto__: Object
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다