Comments (1)
i think To achieve the desired touch interaction using react-three-fiber, you need to combine the library with the drei library for orbit controls and handle touch events to distinguish between horizontal and vertical swipes. Below is a detailed guide on how to implement this in a react-three-fiber application.
Step 1: Set Up Your Project
Ensure you have react-three-fiber and drei installed. If not, you can install them using:
Step 2: Create Your React Component
App Component:
import React, { useRef, useState } from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';
import { Box } from './Box'; // Assume Box is a simple 3D box component
const App = () => {
const controlsRef = useRef();
const [isHorizontalPan, setIsHorizontalPan] = useState(false);
const handleTouchStart = (event) => {
const touch = event.touches[0];
controlsRef.current.startX = touch.clientX;
controlsRef.current.startY = touch.clientY;
controlsRef.current.moved = false;
};
const handleTouchMove = (event) => {
const touch = event.touches[0];
const deltaX = touch.clientX - controlsRef.current.startX;
const deltaY = touch.clientY - controlsRef.current.startY;
if (Math.abs(deltaX) > Math.abs(deltaY)) {
setIsHorizontalPan(true);
controlsRef.current.moved = true;
// Prevent vertical scrolling when interacting with the model
event.preventDefault();
} else if (!controlsRef.current.moved) {
setIsHorizontalPan(false);
}
};
const handleTouchEnd = () => {
controlsRef.current.moved = false;
};
return (
<Canvas
onTouchStart={handleTouchStart}
onTouchMove={handleTouchMove}
onTouchEnd={handleTouchEnd}
>
<ambientLight />
<pointLight position={[10, 10, 10]} />
<Box position={[-1.2, 0, 0]} />
<Box position={[1.2, 0, 0]} />
<OrbitControls ref={controlsRef} enablePan={isHorizontalPan} />
</Canvas>
);
};
export default App;
Box Component:
import React from 'react';
import { useFrame } from '@react-three/fiber';
const Box = (props) => {
const mesh = React.useRef();
useFrame(() => {
mesh.current.rotation.x += 0.01;
mesh.current.rotation.y += 0.01;
});
return (
<mesh {...props} ref={mesh}>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color={'orange'} />
</mesh>
);
};
export { Box };
from react-three-fiber.
Related Issues (20)
- load gltb file show error `Uncaught Invalid typed array length: 64548` HOT 1
- Updating from 8.15.19 to 8.16.1 causes 'demand' frameloop issues with @react-spring/three HOT 2
- Rendering issue HOT 1
- How to draw 2D views in 3D Canvas with ReactNative? HOT 1
- R3F raycast hits wrong object HOT 1
- It's not possible to preventDefault on onPointerDown HOT 1
- Both example of the "drei" sampler are not working, (cant load hdr file) HOT 1
- Something wrong happens with texture that passed to JSX attribute "map" of material
- createPortal()'s state merging uses stale data HOT 1
- React Native: THREE.GLTFLoader: Couldn\'t load texture in react native HOT 1
- Import issue for version 8.16.6 HOT 2
- Invalid hook call with @react-three/fiber HOT 2
- 8.16.5 has breaking types changes HOT 3
- OnPointerUp does not seems to fire always on three js mesh
- Question about compatibility with react compiler HOT 2
- Canvas crashes after rendering first frame. `is.equ` received boolean parameters HOT 1
- R3F mask is not limiting the rendering area of the text
- Resizing the window resets render shadowMap type and/or explodes them.
- Changing Pointer coordinates on canvas "onCreated" callback does not update values on neither "useThree" nor "useFrame" state
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 react-three-fiber.