<BallCanvas> is not floating.

[XinqiYY]

Hi everyone,

My skill balls are fixed rather than floating. My code is exactly the same as the GitHub.

Here is my portfolio (https://xy-portfolio.com/). Can anyone help me? Thanks in advance!

For the blank 3D model, I found the solution from the Issues and will fix it later.

import React, { Suspense } from 'react';
import { Canvas } from '@react-three/fiber';
import { Decal, Float, OrbitControls, Preload, useTexture } from '@react-three/drei';
import CanvasLoader from '../Loader';

const Ball = (props) => {
  const [decal] = useTexture([props.imgUrl]);
  return (
    <Float
      speed={1.75}
      rotationIntensity={1}
      floatIntensity={5}
    >
      <ambientLight intensity={0.75} />
      <directionalLight position={[0, 0, 0.05]} />
      <mesh castShadow receiveShadow scale={2.75}>
        <icosahedronGeometry args={[1, 1]} />
        <meshStandardMaterial 
          color="#fff8eb"
          polygonOffset
          polygonOffsetFactor={-5}
          flatShading
        />
        <Decal 
          position={[0, 0, 1]}
          rotation={[2 * Math.PI, 0, 6.25]}
          flatShading
          map={decal}
        />
      </mesh>
    </Float>
  )
}

const BallCanvas = ({ icon }) => {
  return (
    <Canvas
      frameloop="demand"
      gl={{ preserveDrawingBuffer: true }}
    >
      <Suspense fallback={<CanvasLoader />}>
        <OrbitControls enableZoom={false} />
        <Ball imgUrl={icon} />
      </Suspense>

      <Preload all/>
    </Canvas>
  )
}

export default BallCanvas;

[andreyshpak93]

Change frameloop="demand" to frameloop="always"

[XinqiYY]

andreyshpak93

It works! Thank you so much!