How can i get the position of mouse click point

Questions
,
1

Hi everyone,

I m new at three js. So maybe it is a simple question for you.
I have a scene and i want to move the camera according to mouse click point.
If i can get the mouse click point position i can update the camera position.

I tried this but camera doesnt go the exact point.

document.addEventListener(
"click",
event => {
  mouse.x = event.clientX / window.innerWidth * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);

  camera.position.x = mouse.x;
  camera.position.y = mouse.y;
},
false );

Thanks everyone…

2

Just clicking in an empty 3D space will not allow you to properly position you camera. You normally click on some 3D object by using raycaster and then use the resulting intersection point for further processing.

2 Likes
3

I have a room as environment. I will put orbitcontrols and change the camera rotation but it will be the next step. @Mugen87

What I have:

ss
ss2792×1474 240 KB

here is my code:

import * as THREE from "./three.module";
import { FBXLoader } from './FBXLoader.js';

var camera, scene, renderer;
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var vertex = new THREE.Vector3();
var color = new THREE.Color();

init();
animate();

function init() {
camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);
camera.position.y = 100;
camera.position.z = 200;
camera.rotation.y = 0.6;

scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
scene.fog = new THREE.Fog(0xffffff, 0, 750);

var light = new THREE.HemisphereLight(0xeeeeff, 0x777788, 0.75);
light.position.set(0.5, 1, 0.75);
scene.add(light);

// floor

var floorGeometry = new THREE.PlaneBufferGeometry(2000, 2000, 100, 100);
floorGeometry.rotateX(-Math.PI / 2);

// model
var loader = new FBXLoader();
loader.load("./assets/environment.fbx", function (env) {
    scene.add(env);
});

loader.load("./assets/ritual-luxury.fbx", function (ritual) {
    ritual.position.x = -130;
    ritual.position.z = 20;
    ritual.rotation.y = 1.5 ;
    scene.add(ritual);
    });

//

renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

//

window.addEventListener("resize", onWindowResize, true);
}

function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);
}

//

document.addEventListener(
    "click",
    event => {
    mouse.x = event.clientX / window.innerWidth * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    raycaster.setFromCamera(mouse, camera);

    camera.position.x = mouse.x;
    camera.position.z = mouse.y;

    },
    false
);

//


function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
4

Are you looking for something like this? https://github.com/mrdoob/three.js/pull/18877

2 Likes
5

Yes exactly this is what i want. I hope i can make it :slight_smile: thanks a lot