@react-three/fiber在使用react-locomotive-scroll时不渲染 &

Question

我使用@react-three/fiber组件，并且我有一个问题，当我使用react-locomotive-scroll时它不显示。

如果我从_app。TSX @react-three/fiber渲染。

在使用fiber和locomotive-scroll时，滚动条会重复，这也是一个附带问题。

import { useRouter } from 'next/router';
import type { AppProps } from 'next/app';
import { useRef } from 'react';
import { LocomotiveScrollProvider as RLSProvider } from 'react-locomotive-scroll';
import 'locomotive-scroll/dist/locomotive-scroll.css';
import '@styles/globals.scss';
function MyApp({ Component, pageProps }: AppProps) {
const { asPath } = useRouter();
const containerRef = useRef(null);
return (
<RLSProvider
options={{
smooth: true,
// ... all available Locomotive Scroll instance options
}}
watch={
[
//..all the dependencies you want to watch to update the scroll.
//  Basicaly, you would want to watch page/location changes
//  For exemple, on Next.js you would want to watch properties like `router.asPath` (you may want to add more criterias if the instance should be update on locations with query parameters)
]
}
location={asPath}
onLocationChange={(scroll: any) => scroll.scrollTo(0, { duration: 0, disableLerp: true })}
containerRef={containerRef}
>
<div data-scroll-container ref={containerRef}>
<Component {...pageProps} />
</div>
</RLSProvider>
);
}
export default MyApp;

和我正在渲染的没有@react-three/fiber也能工作的@react-three/fiber组件这似乎也是不同的@react-three/fiber示例的问题。

import * as THREE from "three"
import { useRef, useState} from "react"
import { Canvas, extend, useFrame } from "@react-three/fiber"
import { useTexture, shaderMaterial } from "@react-three/drei"

interface ImageProps {
scaleY: number;
scaleX: number;
cssY?: number | string; 
cssX?: number | string; 
image1: string; 
image2: string; 
right?: number | string; 
left?:  number | string;
}

export const ImageFadeMaterial = shaderMaterial(
{
effectFactor: 1.2,
dispFactor: 0,
tex: undefined,
tex2: undefined,
disp: undefined
},
` varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}`,
` varying vec2 vUv;
uniform sampler2D tex;
uniform sampler2D tex2;
uniform sampler2D disp;
uniform float _rot;
uniform float dispFactor;
uniform float effectFactor;
void main() {
vec2 uv = vUv;
vec4 disp = texture2D(disp, uv);
vec2 distortedPosition = vec2(uv.x + dispFactor * (disp.r*effectFactor), uv.y);
vec2 distortedPosition2 = vec2(uv.x - (1.0 - dispFactor) * (disp.r*effectFactor), uv.y);
vec4 _texture = texture2D(tex, distortedPosition);
vec4 _texture2 = texture2D(tex2, distortedPosition2);
vec4 finalTexture = mix(_texture, _texture2, dispFactor);
gl_FragColor = finalTexture;
#include <tonemapping_fragment>
#include <encodings_fragment>
}`
)
extend({ ImageFadeMaterial })
function FadingImage({ scaleY, scaleX, image1, image2 } : ImageProps) {
const ref = useRef(null)
const [texture1, texture2, dispTexture] = useTexture([image1, image2, "/displacement.jpg"])
const [hovered, setHover] = useState(false)
useFrame(() => {
ref.current.dispFactor = THREE.MathUtils.lerp(ref.current.dispFactor, hovered ? 1 : 0, 0.075)
})
return (
<mesh onPointerOver={() => setHover(true)} onPointerOut={() => setHover(false)} scale={[scaleX, scaleY, 1]}>
<planeGeometry />
<imageFadeMaterial ref={ref} tex={texture1} tex2={texture2} disp={dispTexture} toneMapped={false} />
</mesh>
)
}

const ImageShader = ({ scaleY, scaleX, cssY, cssX, image1, image2, right, left } : ImageProps) => {
return (
<div style={{
height: cssY, 
width: cssX,
marginRight: right,
marginLeft: left,
}}>
<Canvas camera={{ position: [0, 0, 2], fov: 50 }}>
<FadingImage scaleX={scaleX} scaleY={scaleY} image1={image1} image2={image2}/>
</Canvas>
</div>
)
}


export default ImageShader

Answer 1

从选项中删除'smooth: true'👍