Problem with camera movement #681

Mirzhal95 · 2020-09-19T10:02:19Z

Mirzhal95
Sep 19, 2020

@drcmda , I wanted to ensure that camera moves on mouse move. So, to achieve that I am using useFrame(), that is, this code ```
function CameraMovement() {
useFrame(({ mouse, camera }) => {
camera.position.x = -mouse.x * 0.5;
camera.position.y = -mouse.y * 0.5;
});
return null;
}

and then in JSX I reference CameraMovement component

<Canvas>
<CameraMovement/>
</Canvas

However, I was using this sample https://codesandbox.io/s/r3f-sky-dome-wbrfs?file=/src/index.js but please add the above code to that sample so as to test. And, I noticed two issues, firstly, camera moves only when we click on screen then camera starts moving on mouse move but it should be possible to move camera without clicking on screen. Secondly, once we add CameraMovement component it gets impossible to rotate camera by clicking & dragging.

drcmda · 2020-09-20T19:42:12Z

drcmda
Sep 20, 2020
Maintainer

you cant mix controls with manual cam changes, it makes no sense. controls mutate the camera every frame, so yours changes are overwritten or worse, there's a race condition. either control the camera yourself, or control it. if you need both, then you disable controls while the user is doing something - but in your case i dont think that will work.

what you can do is rotate/move the objects in your scene instead of the camera. put everything into a group and shake it on mouse-move. that allows you to have both mouse effects and controls.

1 reply

Mirzhal95 Sep 21, 2020
Author

@drcmda, pls can you show that right way as a sample in codesandbox? Ok, as you let me know, I have tried to put everything into group and shake but not working. I just wanted to achieve the same effect on mouse move as was implemented here roundme.com(just click play button and move mouse and the image moves with the remained ability to move the camera on mouse click and drag).

Mirzhal95 · 2020-09-21T12:11:43Z

Mirzhal95
Sep 21, 2020
Author

@drcmda , should it be like this:
import * as THREE from "three";
import React, { useRef, useState, useEffect } from "react";
import { Html } from "drei";
import "../Dome/dome.style.css";
import { useFrame } from "react-three-fiber";
import { Vector3 } from "three";

interface DomeProps {
name?: string;
position?: [number, number, number];
color?: string;
texture?: any;
hotSpotImage?: any;
hotSpotTitle?: any;
data?: any;
onClick?: () => void;
onFuncClick?: (number: number) => void;
}

const Dome = ({
hotSpotTitle,
hotSpotImage,
position,
color,
texture,
data,
onClick,
onFuncClick,
}: DomeProps) => {
const ref = useRef();
const myRef = useRef();
const [state, setState] = useState();

useEffect(() => {
document.addEventListener("mousemove", (e) => {
const mouse = {
x: (e.clientX / window.innerWidth) * 2 - 1,
y: (e.clientY / window.innerHeight) * 2 + 1,
};

  const newPoint = new Vector3(-mouse.x, 0, -mouse.z);
  setState(newPoint);
});

}, []);

return (

<sphereBufferGeometry attach="geometry" args={[500, 60, 40]} />

  {data ? (
    data.map((item) => {
      return (
        <mesh key={item.id} ref={ref} position={item.position}>
          <sphereGeometry attach="geometry" args={[1, 32, 32]} />
          <meshBasicMaterial attach="material" />
          <Html center>
            <div
              style={{ backgroundImage: `url(${item.hotSpotImage})` }}
              onClick={() => onFuncClick(item.linkTo)}
              className="hotSpotImage"
            >
              <span className="hotSpotTitle">{item.hotSpotTitle}</span>
            </div>
          </Html>
        </mesh>
      );
    })
  ) : (
    <mesh ref={ref} position={position}>
      <sphereGeometry attach="geometry" args={[1, 32, 32]} />
      <meshBasicMaterial attach="material" />
      <Html center>
        <div
          style={{ backgroundImage: `url(${hotSpotImage})` }}
          onClick={onClick}
          className="hotSpotImage"
        >
          <span className="hotSpotTitle">No data received</span>
        </div>
      </Html>
    </mesh>
  )}
</group>

);
};

export default Dome;

4 replies

gsimone Sep 21, 2020
Maintainer

Please post a working sandbox, it's easier to help you if we can run the actual code

Mirzhal95 Sep 21, 2020
Author

@gsimone here is the simplified working sandbox https://codesandbox.io/s/r3f-sky-dome-wbrfs : )

Mirzhal95 Sep 21, 2020
Author

@gsimone , is the sendbox clear to you? or maybe something remained unclear to you. Should I clarify?

Mirzhal95 Sep 22, 2020
Author

@gsimone, @drcmda can any of you help. As Paul told me I used the way of rotating object instead of camera. So, I had to rotate sphere since the tour app should allow the slight rotatation ability on mouse move as was implemented here roundme.com. So, here is the code of mine:

const ref = useRef();
const model = useRef();

useFrame((state) => {
// Left/right mouse movement rotates it a liitle for effect only
model.current.rotation.y = state.mouse.x * 0.07;
model.current.rotation.z = state.mouse.y * 0.07;
});
return (

<group ref={model}>
```
  <mesh>
```

    <sphereBufferGeometry attach="geometry" args={[500, 60, 40]} />

<meshBasicMaterial
```
      attach="material"
```
```
      map={texture}
```
```
      side={THREE.BackSide}
```
```
    />
```
```
  </mesh>
```
</group>

But I faced some problem, that is, if I move sphere on z axis and if camera is facing the front of sphere then all works ok but if I rotate camera so that it faces the side of z axis then there happens weird situation of sphere rotating strangely thus I need your help

Uh oh!

Problem with camera movement #681

Uh oh!

Uh oh!

Mirzhal95 Sep 19, 2020

Replies: 2 comments · 5 replies

Uh oh!

drcmda Sep 20, 2020 Maintainer

Uh oh!

Mirzhal95 Sep 21, 2020 Author

Uh oh!

Mirzhal95 Sep 21, 2020 Author

Uh oh!

gsimone Sep 21, 2020 Maintainer

Uh oh!

Uh oh!

Mirzhal95 Sep 21, 2020 Author

Uh oh!

Mirzhal95 Sep 21, 2020 Author

Uh oh!

Uh oh!

Mirzhal95 Sep 22, 2020 Author

Mirzhal95
Sep 19, 2020

Replies: 2 comments 5 replies

drcmda
Sep 20, 2020
Maintainer

Mirzhal95 Sep 21, 2020
Author

Mirzhal95
Sep 21, 2020
Author

gsimone Sep 21, 2020
Maintainer

Mirzhal95 Sep 21, 2020
Author

Mirzhal95 Sep 21, 2020
Author

Mirzhal95 Sep 22, 2020
Author