向上移動網格，但光線投射器檢測到它就像它在Y軸上的鏡像一樣

看起來光線投射器正在檢測我所有的物件但翻轉了。當我添加一個立方體并且我沒有改變它的位置時它作業正常但是當我向上移動立方體時，光線投射會下降。有誰知道如何修理它。

現在，光線投射是一個 console.log on move over。我最初認為這是攪拌機的問題，但現在我用一個普通的立方體對其進行了測驗，它被翻轉了。

import "./style.css";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";

const canvas = document.querySelector("canvas.webgl");

/******************************** Cameras ********************************/

const scene = new THREE.Scene();

const textureLoader = new THREE.TextureLoader();

const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("/draco/");

const gltfLoader = new GLTFLoader();
gltfLoader.setDRACOLoader(dracoLoader);

/******************************** Textures ********************************/
const bakedTexture = textureLoader.load("/baked.jpg");
bakedTexture.flipY = false;
bakedTexture.encoding = THREE.sRGBEncoding;

/******************************** Materials ********************************/
const bakedMaterial = new THREE.MeshBasicMaterial({ map: bakedTexture });

/******************************** Model ********************************/
gltfLoader.load("/try2Desk.glb", (gltf) => {
  gltf.scene.traverse((child) => {
    child.material = bakedMaterial;
  });

  const corkPlane = gltf.scene.children.find(
    (child) => child.name === "CorkPlane"
  );

  gltf.scene.rotation.set(0, Math.PI, 0);
  // gltf.scene.position.y = -1.1;

  gltf.scene.userData.name = "DESK";

  scene.add(gltf.scene);
});

/******************************** Meshes ********************************/
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({
  color: 0x00ff00,
  opacity: 0.5,
  transparent: true,
});
const cube = new THREE.Mesh(geometry, material);
cube.userData.name = "BOX";
// cube.rotation.set(0, Math.PI * 1.85, 0);
cube.position.set(-0.6, 1.2, 0.3);

scene.add(cube);

/******************************** Ray casting ********************************/
const raycaster = new THREE.Raycaster();
const clickMouse = new THREE.Vector2();

window.addEventListener("mousemove", (e) => {
  clickMouse.x = (e.clientX / window.innerWidth) * 2 - 1;
  clickMouse.y = (e.clientY / window.innerHeight) * 2 - 1;

  raycaster.setFromCamera(clickMouse, camera);
  const intersects = raycaster.intersectObjects(scene.children);
  intersects.forEach((intersect) => {
    console.log(intersect.object.userData.name);
  });
});

/******************************** Sizes ********************************/
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight,
};

window.addEventListener("resize", () => {
  // Update sizes
  sizes.width = window.innerWidth;
  sizes.height = window.innerHeight;

  // Update camera
  camera.aspect = sizes.width / sizes.height;
  camera.updateProjectionMatrix();

  // Update renderer
  renderer.setSize(sizes.width, sizes.height);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});

// Base camera
const camera = new THREE.PerspectiveCamera(
  45,
  sizes.width / sizes.height,
  0.1,
  100
);
camera.position.z = 4;
scene.add(camera);

// Controls
const controls = new OrbitControls(camera, canvas);
// controls.maxPolarAngle = Math.PI * 0.47;
// controls.minPolarAngle = Math.PI * 0.3;
// controls.minAzimuthAngle = -Math.PI * -0.1;
// controls.maxAzimuthAngle = Math.PI * 0.5;
// controls.minDistance = 4;
// controls.maxDistance = 6;
// controls.enablePan = false;

controls.enableDamping = true;

/******************************** Renderer ********************************/
const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  antialias: true,
  alpha: true,
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.outputEncoding = THREE.sRGBEncoding;

/******************************** Animate ********************************/
const clock = new THREE.Clock();

const tick = () => {
  const elapsedTime = clock.getElapsedTime();
  scene.updateMatrixWorld();
  // Update controls
  controls.update();

  // Render
  renderer.render(scene, camera);

  // Call tick again on the next frame
  window.requestAnimationFrame(tick);
};

tick();

uj5u.com熱心網友回復：

我相信您需要顛倒您的設定方式clickMouse.y。所以而不是：

clickMouse.y = (e.clientY / window.innerHeight) * 2 - 1;

你應該有

clickMouse.y = - (e.clientY / window.innerHeight) * 2   1;

請參閱此threejs示例的來源作為參考： https ://github.com/mrdoob/three.js/blob/master/examples/webgl_interactive_buffergeometry.html

標籤：javascript 三.js 3d 光线投射

上一篇：為什么我的反應網站沒有列印我的登錄頁面？

下一篇：為什么Javascript函式即使使用await也會立即回傳？