OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN problem

  • Thread starter Thread starter jack joe
  • Start date Start date
J

jack joe

Guest
Code:
/* eslint-disable no-unused-vars */
/* eslint-disable react/no-unknown-property */
import React, { Suspense, useEffect, useRef, useState } from 'react';
import { Canvas, events } from '@react-three/fiber';
import { OrbitControls, Preload, SpotLight, useGLTF, useHelper } from '@react-three/drei';
import { Html } from '@react-three/drei';
import * as THREE from 'three';
import PropTypes from 'prop-types';


import CanvasLoader from '../Loader'

const Computers = ({ isMobile }) => {


  const computer = useGLTF('./desktop_pc/scene.gltf');
  // Use helper to debug the spotlight
  const spotLightRef = useRef();

  // Use helper to debug the spotlight
  useHelper(spotLightRef, THREE.SpotLightHelper, 'teal');

  return (
    <mesh>
      <hemisphereLight intensity={2} groundColor="black" />
      <pointLight intensity={1} />
      <SpotLight
        // ref={spotLightRef}
        position={[-20, 50, 10]}
        angle={0.13}
        penumbra={1}
        intensity={5}
        distance={0}
        castShadow
        shadow-mapSize={1024}
      />
      <primitive
        object={computer.scene}
        scale={isMobile ? 0.5 : 0.6}
        position={isMobile ? [0, -2, -1.5] : [0, -3.5, 1]}
        rotation={[0, -0.2, -0.1]}
      />
    </mesh>
  )
}
Computers.propTypes = {
  isMobile: PropTypes.bool.isRequired,
};

const ComputerCanvas = () => {
  const [isMobile, setIsMobile] = useState(false);
  const [isLoaded, setIsLoaded] = useState(false); // New state to track loading completion

  useEffect(() => {
    // Add a listener for changes to the screen size
    const mediaQuery = window.matchMedia("(max-width: 500px)");

    // Set the initial value of the `isMobile` state variable
    setIsMobile(mediaQuery.matches);

    // Define a callback function to handle changes to the media query
    const handleMediaQueryChange = (event) => {
      setIsMobile(event.matches);
    };

    // Add the callback function as a listener for changes to the media query
    mediaQuery.addEventListener("change", handleMediaQueryChange);

    // Remove the listener when the component is unmounted
    return () => {
      mediaQuery.removeEventListener("change", handleMediaQueryChange);
    };
  }, []);
  const handleLoadComplete = () => {
    setIsLoaded(true); // Call this once all resources are loaded
  };
  // if (isLoaded) {

  //   alert("content "+ isLoaded);
  // }
  return (
    <Canvas
      frameloop={'demand'}
      shadows
      dpr={[1, 2]}
      camera={{ position: [20, 3, 5], fov: 25 }}
      gl={{ preserveDrawingBuffer: true }}
      onCreated={handleLoadComplete} // Assuming the Canvas triggers this once it's ready
    >
      <Suspense fallback={<CanvasLoader />} >
        <OrbitControls enableZoom={false}
          maxPolarAngle={Math.PI / 2}
          minPolarAngle={Math.PI / 2}
        />
        <Computers isMobile={isMobile} />
      </Suspense>
      <Preload all />
    </Canvas>
  )
}

export default ComputerCanvas

problem is when i open my site in mobile is look like this. white screen showing[balls image],[computer image]

and when i open inspect elemnt in mobile its return me this type of error

BufferGeometry { attributes: { position: BufferAttribute }, boundingBox: null, boundingSphere: Sphere { center: Vector3, radius: NaN }, drawRange: { start: 0, count: Infinity }, groups: [], index: null, isBufferGeometry: true, morphAttributes: {}, morphTargetsRelative: false, name: "", type: "BufferGeometry", userData: {}, uuid: "369e9df6-be7a-4e27-ad07-316731a36bd9", __r3f: { type: 'bufferGeometry', previousAttach: _BufferGeometry, memoizedProps: {...}, eventCount: 0, root: ƒ, ... }, _listeners: { dispose: Array(1) }, id: 706, [[Prototype]]: EventDispatcher }

i do chatgpt , gemini, copilot also but no solustion work. please provide a batter solustion.

<pre><code>/* eslint-disable no-unused-vars */
/* eslint-disable react/no-unknown-property */
import React, { Suspense, useEffect, useRef, useState } from 'react';
import { Canvas, events } from '@react-three/fiber';
import { OrbitControls, Preload, SpotLight, useGLTF, useHelper } from '@react-three/drei';
import { Html } from '@react-three/drei';
import * as THREE from 'three';
import PropTypes from 'prop-types';


import CanvasLoader from '../Loader'

const Computers = ({ isMobile }) => {


const computer = useGLTF('./desktop_pc/scene.gltf');
// Use helper to debug the spotlight
const spotLightRef = useRef();

// Use helper to debug the spotlight
useHelper(spotLightRef, THREE.SpotLightHelper, 'teal');

return (
<mesh>
<hemisphereLight intensity={2} groundColor="black" />
<pointLight intensity={1} />
<SpotLight
// ref={spotLightRef}
position={[-20, 50, 10]}
angle={0.13}
penumbra={1}
intensity={5}
distance={0}
castShadow
shadow-mapSize={1024}
/>
<primitive
object={computer.scene}
scale={isMobile ? 0.5 : 0.6}
position={isMobile ? [0, -2, -1.5] : [0, -3.5, 1]}
rotation={[0, -0.2, -0.1]}
/>
</mesh>
)
}
Computers.propTypes = {
isMobile: PropTypes.bool.isRequired,
};

const ComputerCanvas = () => {
const [isMobile, setIsMobile] = useState(false);
const [isLoaded, setIsLoaded] = useState(false); // New state to track loading completion

useEffect(() => {
// Add a listener for changes to the screen size
const mediaQuery = window.matchMedia("(max-width: 500px)");

// Set the initial value of the `isMobile` state variable
setIsMobile(mediaQuery.matches);

// Define a callback function to handle changes to the media query
const handleMediaQueryChange = (event) => {
setIsMobile(event.matches);
};

// Add the callback function as a listener for changes to the media query
mediaQuery.addEventListener("change", handleMediaQueryChange);

// Remove the listener when the component is unmounted
return () => {
mediaQuery.removeEventListener("change", handleMediaQueryChange);
};
}, []);
const handleLoadComplete = () => {
setIsLoaded(true); // Call this once all resources are loaded
};
// if (isLoaded) {

// alert("content "+ isLoaded);
// }
return (
<Canvas
frameloop={'demand'}
shadows
dpr={[1, 2]}
camera={{ position: [20, 3, 5], fov: 25 }}
gl={{ preserveDrawingBuffer: true }}
onCreated={handleLoadComplete} // Assuming the Canvas triggers this once it's ready
>
<Suspense fallback={<CanvasLoader />} >
<OrbitControls enableZoom={false}
maxPolarAngle={Math.PI / 2}
minPolarAngle={Math.PI / 2}
/>
<Computers isMobile={isMobile} />
</Suspense>
<Preload all />
</Canvas>
)
}

export default ComputerCanvas
</code></pre>
<p>problem is when i open my site in mobile is look like this.
white screen showing[<a href="https://i.sstatic.net/pzx37hyf.jpg" rel="nofollow noreferrer">balls image</a>],[<a href="https://i.sstatic.net/fzwOAVz6.jpg" rel="nofollow noreferrer">computer image</a>]</p>
<p>and when i open inspect elemnt in mobile its return me this type of error</p>
<blockquote>
<p>BufferGeometry {
attributes: {
position: BufferAttribute
},
boundingBox: null,
boundingSphere: Sphere { center: Vector3, radius: NaN },
drawRange: { start: 0, count: Infinity },
groups: [],
index: null,
isBufferGeometry: true,
morphAttributes: {},
morphTargetsRelative: false,
name: "",
type: "BufferGeometry",
userData: {},
uuid: "369e9df6-be7a-4e27-ad07-316731a36bd9",
__r3f: { type: 'bufferGeometry', previousAttach: _BufferGeometry, memoizedProps: {...}, eventCount: 0, root: ƒ, ... },
_listeners: { dispose: Array(1) },
id: 706,
[[Prototype]]: EventDispatcher
}</p>
</blockquote>
<p>i do chatgpt , gemini, copilot also but no solustion work. please provide a batter solustion.</p>
 

Latest posts

Top