0

我正在使用 React 三光纤构建我的投资组合，它显示在移动设备和笔记本电脑或 PC 上的显示。但是当我试图在 i-pad 上查看时，显示是空白的。我正在尝试解决这个问题，但我找不到任何解决方案。如果能给我一些建议，我会很高兴。

这是我的代码

import React, { useState, useRef, useEffect } from 'react';
import * as THREE from 'three';
import { extend, Canvas, useFrame } from 'react-three-fiber';
import * as meshline from 'threejs-meshline';
import Typical from 'react-typical';

// firebase
import firebase from '../firebase/firebase.utils';
// custom hook
import useAuthor from '../hooks/getAuthor';
// component
import Spinner from './Spinner';

import '../assets/styles/components/ThreeFiber.scss';

extend(meshline);

const numLines = 100;
const lines = new Array(numLines).fill();
const colors = ['#f6f6f6', '#fff8cd', '#6495ED'];

function Fatline() {
 const material = useRef();
 const [color] = useState(
   () => colors[parseInt(colors.length * Math.random())]
 );
 const [ratio] = useState(() => 0.6 + 0.7 * Math.random());
 const [width] = useState(() => Math.max(0.1, 0.1 * Math.random()));
 // Calculate wiggly curve
 const [curve] = useState(() => {
   const pos = new THREE.Vector3(
     30 - 60 * Math.random(),
     -5,
     10 - 20 * Math.random()
   );
   const points = new Array(30)
     .fill()
     .map(() =>
       pos
         .add(
           new THREE.Vector3(
             2 - Math.random() * 4,
             4 - Math.random() * 2,
             5 - Math.random() * 10
           )
         )
         .clone()
     );
   return new THREE.CatmullRomCurve3(points).getPoints(500);
 });
 // Hook into the render loop and decrease the materials dash-offset
 useFrame(() => {
   material.current.uniforms.dashOffset.value -= 0.0005;
 });

 return (
   <mesh>
     <meshLine attach="geometry" vertices={curve} />
     <meshLineMaterial
       attach="material"
       ref={material}
       transparent
       depthTest={false}
       lineWidth={width}
       color={color}
       dashArray={0.2}
       dashRatio={ratio}
     />
   </mesh>
 );
}

function Scene() {
 let group = useRef();
 let theta = 0;
 // Hook into the render loop and rotate the scene a bit
 useFrame(() => {
   group.current.rotation.set(
     0,
     8 * Math.sin(THREE.Math.degToRad((theta += 0.02))),
     0
   );
 });

 return (
   <group ref={group}>
     {lines.map((_, index) => (
       <Fatline key={index} />
     ))}
   </group>
 );
}

const ThreeFiber = React.memo(() => {
 const collectionRef = firebase.firestore().collection('author');
 const authorCollection = useAuthor(collectionRef);

 const [loading, setLoading] = useState(false);

 useEffect(() => {
   setLoading(true);
 }, []);

 return (
   <div className="Hero_container">
     <Canvas
       camera={{ position: [0, 60, 10], fov: 150 }}
       resize={{ scroll: false }}
     >
       <Scene />
     </Canvas>
     {loading ? (
       authorCollection.map((author) => (
         <h4 key={author.informations} className="Hero_content">
           Hi! <br /> I&#39;m {author.informations.name}, <br />
           <Typical
             loop={Infinity}
             wrapper="b"
             steps={[
               'Front-end Developer with React',
               1500,
               'a self-taught Web Engineer',
               1500,
             ]}
           />
         </h4>
       ))
     ) : (
       <Spinner />
     )}
   </div>
 );
});

谢谢您的帮助.....

4

0 回答 0