Moving mesh up but the ray caster detects it like its mirrored on the Y-axis-CodePudding

It looks like the raycaster is detecting all my objects but flipped. When I add a cube and I don't change the position it works fine but when I move the cube up the ray-casting goes down. Does anyone know how to fix it.

For now the ray-casting is a console.log on move over. I first thought it was a problem with blender but now i tested it with a normal cube it gets flipped aswel.

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();

CodePudding user response：

I believe that you need to invert how you set clickMouse.y. So instead of:

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

you should have

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

See the source of this threejs example as a reference: https://github.com/mrdoob/three.js/blob/master/examples/webgl_interactive_buffergeometry.html