I am trying to access OrbitControls ref as follow:
const controlsRef = useRef<any>();
return (
<>
<Canvas
camera={{
position: [0, 0, 100],
up: [0, 0, 1],
}}
>
<OrbitControls makeDefault ref={controlsRef} />
<ambientLight />
<FakeSphere position={[0, 0, 0]} color="red" />
<FakeSphere position={[100, 100, 0]} color="blue" />
<Nav controls={controlsRef.current} />
</Canvas>
</>
);
Code:
https://codesandbox.io/s/cool-flower-f5qr0?file=/src/App.tsx:949-962
The ref is undefined. Any idea please?
Found a hint hehe (https://github.com/pmndrs/drei/issues/718). Cant get ref from outside Canvas.
For now, add a wrapper over OrbitControls to capture the ref. Not sure if any better solution or not.
const MyControls = (props: any) => {
const { setControls } = props;
const ref = useRef<any>();
useEffect(() => {
if (!ref.current) return;
setControls(ref.current);
}, ref.current);
return <OrbitControls makeDefault ref={ref} />;
};
Related
I display 2 cloud points from a PLY file. I need to trigger events on each cloud point. For example: Move or rotate only 1 cloud points.
My problem:
I think that the event is applied on each points of the 2 cloud points instead of the global model on which I triggered the event. So it takes a very long time to trigger a simple event (like a console.log for example).
Are cloud points correctly implemented?
How to interact with only 1 point cloud?
Code:
Here is the stackblitz to try.
And here is my code:
// 'Stage' and 'OrbitControls' are from #react-three/drei
function App() {
return (
<Canvas camera={{ position: [0, 0, 15] }} orthographic>
<Suspense fallback={null}>
<Stage fallback={null}>
<PLYVisualizationScreen color="green" position={[0, 0, 0]} />
<PLYVisualizationScreen color="blue" position={[-0.2, 0, 0]} />
<OrbitControls makeDefault enableDamping={false} />
</Stage>
<ambientLight intensity={1} />
</Suspense>
</Canvas>
);
}
function PLYVisualizationScreen({ color, position }) {
const geometry = useLoader(PLYLoader, 'bunny.ply');
const ref = useRef();
return (
<points
ref={ref}
position={position}
castShadow
receiveShadow
geometry={geometry}
// onClick={(e) => console.log("click on")}
>
<pointsMaterial
sizeAttenuation
attach="material"
color={color}
depthWrite={false}
size={0.001}
/>
</points>
);
}
"#react-three/fiber": "^8.2.0",
"three": "^0.142.0",
Hello I am trying to export a model containing animations. My model uses the useFrame hook and manipulates the ref like so
const TopicBadge = forwardRef((props, ref) => {
let {playlistBody, hasBadge} = useSelector(s => s.playlist)
return (
<Canvas>
<ShapeModel title={playlistBody.title} ref={ref} />
</Canvas>
);
})
export const ShapeModel = React.forwardRef(({title}, ref ) => {
const meshTurnRef = useRef()
useFrame(() => {
meshTurnRef.current.rotation.y += 0.01
})
return (
<group ref={ref}>
<Html fullscreen>
<div className='text-right w-1/3 ml-16 mt-8'>
<h1 className='text-sm text-plum-green'>{title}</h1>
</div>
</Html>
<mesh matrixAutoUpdate={true} position={[0, 0, 2.4]} ref={meshTurnRef}>
<torusBufferGeometry args={[1, .48, 16, 32]} attach="geometry" />
<meshStandardMaterial roughness={1} fog={true} color={"#049ef4"} attach="material" />
</mesh>
<directionalLight position={[1, 1, 0]} />
<directionalLight position={[0, 0, 3]} />
</group>
)
})
I then export the model with the GLTFExporter in a parent component
const exporter = new GLTFExporter()
let saveRef = useRef()
const onSavePlaylist = async () => {
try {
exporter.parse( saveRef.current, async function ( gltf ) {
// saveRef.current does not have animations
}
}
I see the saveRef.current does not have the animations.
Is there documentation or a recommended way to save animations for importing into a model later? Seems all documentation shows this as the recommended way so I think this might be a bug
I like react-three and I am trying to make an FPV character with a body:
https://codesandbox.io/s/fpv-player-ers63
So the goal is that the camera is placed at the head level and the character moves around like in original example https://codesandbox.io/s/minecraft-vkgi6 by Paul Henschel
drcmda
I have added PerspectiveCamera to change the camera position but now PointerLockControls doesn't work any more and I do not understand why and how to handle it.
Thank you
PerspectiveCamera usage
export const Player = (props) => {
const axe = useRef()
const [ref, api] = useSphere(() => ({ mass: 1, type: "Dynamic", position: [0, 10, 0], ...props }))
const { forward, backward, left, right, jump } = usePlayerControls()
const { camera } = useThree()
const velocity = useRef([0, 0, 0])
useEffect(() => api.velocity.subscribe((v) => (velocity.current = v)), [])
useFrame((state) => {
ref.current.getWorldPosition(camera.position)
frontVector.set(0, 0, Number(backward) - Number(forward))
sideVector.set(Number(left) - Number(right), 0, 0)
direction.subVectors(frontVector, sideVector).normalize().multiplyScalar(SPEED).applyEuler(camera.rotation)
speed.fromArray(velocity.current)
axe.current.children[0].rotation.x = THREE.MathUtils.lerp(
axe.current.children[0].rotation.x,
Math.sin((speed.length() > 1) * state.clock.elapsedTime * 10) / 20,
0.01,
)
axe.current.rotation.copy(camera.rotation)
axe.current.position.copy(camera.position).add(camera.getWorldDirection(rotation).multiplyScalar(1))
api.velocity.set(direction.x, velocity.current[1], direction.z)
if (jump && Math.abs(velocity.current[1].toFixed(2)) < 0.05) api.velocity.set(velocity.current[0], 10, velocity.current[2])
})
return (
<>
<mesh ref={ref} />
<group ref={axe} onPointerMissed={(e) => (axe.current.children[0].rotation.x = -0.5)}>
<group position={[0, 7, 0]}>
<PerspectiveCamera makeDefault={true} fov={75}>
<Body position={[0, -4, 1]} />
</PerspectiveCamera>
</group>
</group>
</>
)
}
PointerLockControls usage
export default function App() {
return (
<Canvas
shadows
gl={{ alpha: false }}
camera={{ fov: 45 }}
raycaster={{
computeOffsets: (e) => ({ offsetX: e.target.width / 2, offsetY: e.target.height / 2 }),
}}>
<Sky sunPosition={[100, 20, 100]} />
<ambientLight intensity={0.3} />
<pointLight castShadow intensity={0.8} position={[100, 100, 100]} />
<Physics gravity={[0, -30, 0]}>
<Ground />
<Player />
<Reflector
blur={[0, 0]} // Blur ground reflections (width, heigt), 0 skips blur
mixBlur={0.1} // How much blur mixes with surface roughness
mixStrength={0.25} // Strength of the reflections
resolution={1024} // Off-buffer resolution, lower=faster, higher=better quality
args={[10, 30]} // PlaneBufferGeometry arguments
position={[0, 0, -20]}
rotation={[0, 0, 2 * Math.PI]}
mirror={0.5} // Mirror environment, 0 = texture colors, 1 = pick up env colors
minDepthThreshold={0.25}
maxDepthThreshold={1}
depthScale={50}>
{(Material, props) => <Material metalness={0} roughness={0} {...props} />}
</Reflector>
</Physics>
<PointerLockControls />
</Canvas>
)
}
Browser: Firefox 94.0.2 (64-bit), macOS Monterey
"dependencies": {
"#pmndrs/branding": "0.0.8",
"#react-three/cannon": "4.0.1",
"#react-three/drei": "7.17.2",
"#react-three/fiber": "7.0.17",
"#types/three": "0.133.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-scripts": "4.0.3",
"simplex-noise": "3.0.0",
"three": "0.133.1",
"zustand": "3.6.1"
},
https://codesandbox.io/s/fpv-player-ers63
Well, I found that it is sufficient to offset the camera in useFrame update
https://codesandbox.io/s/fpv-player-ers63
export const Player = (props) => {
const axe = useRef()
const [ref, api] = useSphere(() => ({ args: [1], mass: 1, type: "Dynamic", position: [0, 10, 0], ...props }))
const { forward, backward, left, right, jump } = usePlayerControls()
const { camera } = useThree()
const velocity = useRef([0, 0, 0])
useEffect(() => api.velocity.subscribe((v) => (velocity.current = v)), [])
useFrame((state) => {
ref.current.getWorldPosition(camera.position)
frontVector.set(0, 0, Number(backward) - Number(forward))
sideVector.set(Number(left) - Number(right), 0, 0)
direction.subVectors(frontVector, sideVector).normalize().multiplyScalar(SPEED).applyEuler(camera.rotation)
speed.fromArray(velocity.current)
axe.current.children[0].rotation.x = THREE.MathUtils.lerp(
axe.current.children[0].rotation.x,
Math.sin((speed.length() > 1) * state.clock.elapsedTime * 10) / 10,
0.1,
)
axe.current.rotation.copy(camera.rotation)
axe.current.position.copy(camera.position).add(camera.getWorldDirection(rotation).multiplyScalar(1))
camera.position.setY(camera.position.y + 8)
api.velocity.set(direction.x, velocity.current[1], direction.z)
if (jump && Math.abs(velocity.current[1].toFixed(2)) < 0.05) api.velocity.set(velocity.current[0], 10, velocity.current[2])
})
return (
<>
<mesh ref={ref} />
<group ref={axe} onPointerMissed={(e) => (axe.current.children[0].rotation.x = -0.5)}>
<Body position={[0, 4, 0]} />
</group>
</>
)
}
I will implement an effect that I can move camera around an object.
Error example is this and I need to fix it. The difference between this and the latter is that this can update camera position to a 3D object in a model. This example eventually can move camera around a 3D object after updating camera position. But if I follow general use case, i.e. the latter, it can't function correctly. I wonder what's difference between this and the latter.
function Button(props) {
const vec = new THREE.Vector3(0, 3, 5);
const { x, y, z } = props.position;
if (x && y && z) {
vec.set(x, y, z);
}
useFrame((state) => {
const step = 0.1;
state.camera.position.lerp(vec, step);
state.camera.lookAt(0, 0, 0);
state.camera.updateProjectionMatrix();
});
return null;
}
const ModelCanvas = (props) => {
return (
<div className="center">
<Canvas
shadowMap
style={{ background: "#ffffff" }}
camera={{ position: [0, 3, 10], fov: 100 }}
gl={{ antialias: false, logarithmicDepthBuffer: true }}
id="my-canvas"
>
<ambientLight intensity={0.5} />
<pointLight position={[0, 60, -100]} intensity={20} />
<pointLight position={[-50, 0, -50]} intensity={2} />
<spotLight
castShadow
intensity={8}
angle={Math.PI / 10}
position={[10, 10, 10]}
shadow-mapSize-width={2048}
shadow-mapSize-height={2048}
/>
<Suspense fallback={null}>
<Model url={"/compressed.glb"} />
</Suspense>
{/* <PointerLockControls /> */}
<Button position={props.value} />
<PointerLockControls />
</Canvas>
</div>
);
};
And this example functions correctly.
const ModelCanvas = (props) => {
return (
<div className="center">
<Canvas
shadowMap
style={{ background: "#ffffff" }}
camera={{ position: [0, 3, 10], fov: 100 }}
gl={{ antialias: false, logarithmicDepthBuffer: true }}
id="my-canvas"
>
<ambientLight intensity={0.5} />
<pointLight position={[0, 60, -100]} intensity={20} />
<pointLight position={[-50, 0, -50]} intensity={2} />
<spotLight
castShadow
intensity={8}
angle={Math.PI / 10}
position={[10, 10, 10]}
shadow-mapSize-width={2048}
shadow-mapSize-height={2048}
/>
<Suspense fallback={null}>
<Model url={"/compressed.glb"} />
</Suspense>
{/* <PointerLockControls /> */}
{/* <Button position={props.value} /> */}
<PointerLockControls />
</Canvas>
</div>
);
};
I'm trying to reproduce this animation (see below) with react-three-fiber. I'm still very new to this package and to three-js.
http://makesportmakebook.com/livres/.
I've been able to do create book shapes with meshLambertMaterial, as such:
function Book(props) {
const mesh = useRef();
useFrame(() => {
mesh.current.rotation.x = mesh.current.rotation.y += 0.01
})
const bookCover = useLoader(TextureLoader, bookCoverImg)
const bookSpine = useLoader(TextureLoader, bookSpineImg)
const bookBack = useLoader(TextureLoader, bookBackImg)
const bookPages = useLoader(TextureLoader, bookPagesImg)
const bookPagesTexture = useLoader(TextureLoader, bookPagesTextureImg)
const bookPagesTopBottomTexture = useLoader(TextureLoader, bookPagesTopBottomTextureImg)
return (
<mesh
position={props.position}
ref={mesh}>
<boxBufferGeometry attach="geometry" args={
[
7, 10, 1.2, 4, 4, 1
]
} />
<meshLambertMaterial color={"0xffffff"} map={bookCover} />
<meshLambertMaterial map={bookSpine} />
<meshLambertMaterial map={bookBack} />
<meshLambertMaterial map={bookPages} />
<meshLambertMaterial map={texture_5} />
<meshLambertMaterial map={texture_6} />
</mesh>
)
};
Here's a code sandbox of my code so far: https://codesandbox.io/s/cocky-fast-61ndj
My question is: how can I avoid the overlap of these you can see here (below) but still keep the same parallel position we can see in the first example?
There are two ways that you could handle this. The first is to move the camera instead of the books. The second is that instead of moving the books separately, move them as a group. I suspect that this second method is what you want to do.
This was quick and dirty, but it works.
Create a function to house the two books. Put the two books in a group and rotate the group.
import React, { useRef, Suspense } from "react";
import { Canvas, useFrame, extend, useLoader } from "react-three-fiber";
import { OrbitControls, StandardEffects, draco } from "drei";
import { TextureLoader } from "three/src/loaders/TextureLoader.js";
extend({ OrbitControls });
function Bookshelf(props) {
const mesh = useRef();
useFrame(() => {
mesh.current.rotation.x = mesh.current.rotation.y += 0.01;
});
return (
<group ref={mesh} position={[0, 0, 0]}>
<Suspense fallback={null}><Book position={[3, 0, 3]} /></Suspense>
<Suspense fallback={null}><Book position={[-3, 0, 0]} /></Suspense>
</group>
)
}
function Book(props) {
const bookCover = useLoader(
TextureLoader,
"https://res.cloudinary.com/www-c-t-l-k-com/image/upload/v1607732427/HEAD_PUBLISHING/book-cover.jpg"
);
const bookSpine = useLoader(
TextureLoader,
"https://res.cloudinary.com/www-c-t-l-k-com/image/upload/v1607732420/HEAD_PUBLISHING/book-back.jpg"
);
const bookBack = useLoader(
TextureLoader,
"https://res.cloudinary.com/www-c-t-l-k-com/image/upload/v1607732421/HEAD_PUBLISHING/book-side.jpg"
);
const bookPages = useLoader(
TextureLoader,
"https://res.cloudinary.com/www-c-t-l-k-com/image/upload/v1607732421/HEAD_PUBLISHING/book-side.jpg"
);
const texture_5 = useLoader(
TextureLoader,
"https://res.cloudinary.com/www-c-t-l-k-com/image/upload/v1607732427/HEAD_PUBLISHING/book-cover.jpg"
);
const texture_6 = useLoader(
TextureLoader,
"https://res.cloudinary.com/www-c-t-l-k-com/image/upload/v1607732421/HEAD_PUBLISHING/book-spine.jpg"
);
return (
<mesh position={props.position} >
<boxBufferGeometry attach="geometry" args={[7, 10, 1.2, 4, 4, 1]} />
<meshLambertMaterial color={"0xffffff"} map={bookCover} />
<meshLambertMaterial map={bookSpine} />
<meshLambertMaterial map={bookBack} />
<meshLambertMaterial map={bookPages} />
<meshLambertMaterial map={texture_5} />
<meshLambertMaterial map={texture_6} />
</mesh>
);
}
export default function App() {
let styling = {
width: "100vw",
height: "100vh",
position: "relative"
};
return (
<div style={{ position: "relative" }}>
<Canvas camera={{ position: [0, 0, 20] }} style={styling}>
<ambientLight intensity={0.3} />
<directionalLight intensity={1} />
<Suspense fallback={null}>
<Bookshelf>
</Bookshelf>
</Suspense>
<OrbitControls enableZoom={false} />
</Canvas>
</div>
);
}