Comments (7)
just got this working here is my final code, seems to be working nicely thank you to both above i was trying to get a nice solution for dollyToCursor with OrbitControls with no luck and this one is perfect, i can go to bed now XD
import React from 'react';
import * as THREE from 'three';
import { extend, ReactThreeFiber, useFrame, useThree } from '@react-three/fiber';
import CameraControls from 'camera-controls';
CameraControls.install({ THREE: THREE });
extend({ CameraControls });
declare global {
namespace JSX {
interface IntrinsicElements {
cameraControls: ReactThreeFiber.Object3DNode<
CameraControls,
typeof CameraControls
>;
}
}
}
export const CustomOrbitControls: React.FC<any> = React.forwardRef((props, ref) => {
const { camera, gl } = useThree();
useFrame((state, delta) => {
if (ref.current) {
ref.current.update(delta);
}
});
return (
<cameraControls
ref={ref}
args={[camera, gl.domElement]}
dollyToCursor
mouseButtons={{
left: CameraControls.ACTION.TRUCK,
middle: CameraControls.ACTION.NONE,
right: CameraControls.ACTION.NONE,
shiftLeft: CameraControls.ACTION.NONE,
wheel: CameraControls.ACTION.ZOOM,
}}
/>
);
});
from camera-controls.
Seems delta
of every frame in your app is too small. delta
is supposed to be 0.01666...
sec or so.
You can use getElapsedTime()
to get correct delta
, rather than getDelta()
.
const CControls: React.FC<any> = () => {
const ccontrolRef = useRef<any>(null);
const { camera, gl, clock, scene } = useThree();
let lastTime = 0;
useFrame(() => {
if (ccontrolRef.current) {
const elapsed = clock.getElapsedTime();
const delta = elapsed - lastTime;
console.log( delta );
// ccontrolRef.current.update();
const hasControlsUpdated = ccontrolRef.current.update(delta);
if (hasControlsUpdated) gl.render(scene, camera);
lastTime = elapsed;
}
});
return <cameraControls ref={ccontrolRef} args={[camera, gl.domElement]} />;
};
If you call getDelta()
somewhere else, the delta time will be the diff between "somewhere" and the useFrame
.
I think this is not a problem of camera-controls
.
from camera-controls.
I don't know about internals of react-three-fiber but I don't use getDelta() in my app yet!
anyway that definitely solved the problem!
thanks again for investigating the issue.
from camera-controls.
FYI: Second arg of useFrame callback is delta:
useFrame((state, delta) => {
if (ccontrolRef.current) {
const hasControlsUpdated = ccontrolRef.current.update(delta);
if (hasControlsUpdated) gl.render(scene, camera);
}
});
from camera-controls.
Did you try without camera controls?
Did you also try with threejs official orbit controls?
Then if still it happens, can you provide a simplified working example on jsfiddle or somewhere? Otherwise I need to prepare the environment to reproduce.
from camera-controls.
Thank you for the speedy reply!
yes I have used OrbitControls and it works fine!
here is the codesanbox version with some simplifications. you can click on the button to switch the controllers.
https://codesandbox.io/s/blissful-chandrasekhar-ew99r
from camera-controls.
You don't need this line:
if (hasControlsUpdated) gl.render(scene, camera);
from camera-controls.
Related Issues (20)
- Best coding pattern for onresize? HOT 1
- Pointer lock behaviour different ? HOT 1
- Speed up setLookAt or lerpLookAt HOT 5
- Invalid "main" entry in v2.8.x HOT 10
- Add focus function HOT 7
- Error 'ThreeCameraControls.install is not a function' HOT 2
- Method to cancel ongoing transitions HOT 5
- Mouse wheel zoom doesn't work with pressed Shift on Mac HOT 1
- The automated release is failing 🚨 HOT 1
- Update three.js version to 162 HOT 2
- Not update in worker HOT 5
- Dolly to Cursor and focalOffset HOT 4
- I want to replace camera-controls with the default controls in my project, here is an example, how can I do it to be compatible correctly? HOT 2
- fitToBox on a plane: how to prevent plane to get perpendicular to view? HOT 1
- Dolly to cursor reaches limit HOT 4
- Dolly to cursor does not maintain steady speed
- Roll/tilt control HOT 1
- Can't zoom after switching between cameras HOT 10
- Cannot dispatch custom event HOT 4
- It would be nice to have setFov method with smooth transition
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from camera-controls.