使用 STL 加載器在 ThreeJS 中使用 Raycaster 選擇面
[英]Selecting faces with Raycaster in ThreeJS with STL Loader
問題描述
我目前正在使用 Three.js 研究 a.stl 查看器。 目標是 select 並計算某些區域。 對於這個面積計算，我需要能夠 select（例如更改顏色）面。
我發現了類似的東西，但從我在自己的研究中看到的，這似乎只適用於現成的網格（如示例中的立方體）。
我希望在我自己的代碼中實現這個例子。
很明顯，以前已經做過這樣的事情，但我似乎無法在我自己的代碼中實現任何類型的工作方式：
我當前的代碼有一個功能齊全的.stl 加載器和查看器。
光線投射器在那里，但似乎無法正常工作，所以我暫時將其注釋掉。
Mugen87，感謝您的修復！
您可以從 github 下載我的代碼和 example.stl 文件。 這只需要一個可以使用 VSCode 輕松運行的 Live Server 環境（請參閱自述文件）。
我當前的代碼：
<!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>
2 個解決方案
解決方案1
1 2020-07-15 09:49:01
光線投射器在那里，但似乎無法正常工作，所以我暫時將其注釋掉。
我已經在本地調試了您的代碼。 光線投射不起作用，因為尚未調用onMouseMove() 。 您必須先將其注冊為事件偵聽器。 因此，嘗試將以下行添加到您的示例中：
document.addEventListener( 'mousemove', onMouseMove, false );
如果您隨后在 animation 循環內注釋您的光線投射代碼，則當鼠標懸停時 model 應該變為紅色。
解決方案2
0 已采納 2020-07-15 12:51:48
只有使用 raycaster 選擇面（這是我的問題），才能通過從 raycaster 中讀取intersects數據來完成。 這使您能夠操縱面部，從而“選擇”它。
例如
for (var i = 0; i < intersects.length; i++) {
console.log(intersects[i].face)
}
face有許多內置方法，使您能夠操縱面部並從中獲取信息。 給你一個想法，這是直接從我的console.log(intersects[i].face) output 復制粘貼，並且只與一張臉相關（注意：這些只是頂級/父母級別的方法，其中很多有更多的孩子。）。
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
使用 ThreeJS StereoEffect 和 Raycaster
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.