0

我正在尝试使用 react-globe.gl 库并尝试创建云。我是 three.js 的新手，并试图了解问题所在。谁能指导我

npm 库：https ://www.npmjs.com/package/react-globe.gl

代码：https ://github.com/vasturiano/react-globe.gl/blob/master/example/clouds/index.html

演示：https ://vasturiano.github.io/react-globe.gl/example/clouds/

import React, {useState, useEffect, useRef} from 'react';
import backgroundImage  from "./textures/background.png"
import earthImage  from "./textures/earth-large.jpg"
import cloudImage from "./textures/clouds-large.jpg"
import bumpImage from "./textures/bump-large.jpg"
import markerImage from "./textures/markers.png"
import particle from "./textures/particle.png"
import Globe from 'react-globe.gl';
import * as THREE from "three";

import Markers from './Markers';
export default ()=> {
  const globeEl = useRef(true);

  useEffect(() => {
    const globe = globeEl.current;
    // Auto-rotate
    globe.controls().autoRotate = true;
    globe.controls().autoRotateSpeed = 2;
    // Add clouds sphere
    const GLOBE_RADIUS = 100;
    const CLOUDS_IMG_URL = cloudImage; // from https://github.com/turban/webgl-earth
    const CLOUDS_ALT = 0.004;
    const CLOUDS_ROTATION_SPEED = -0.006; // deg/frame
    
    new THREE.ImageLoader().load(CLOUDS_IMG_URL, cloudsTexture => {
      const  clouds = new THREE.Mesh(
              new THREE.SphereBufferGeometry(GLOBE_RADIUS * (1 + CLOUDS_ALT), 75, 75),
              new THREE.MeshPhongMaterial({ map: cloudsTexture, transparent: true })
                
      );
       globe.scene().add(clouds)
      (function rotateClouds() {
        clouds.rotation.y += CLOUDS_ROTATION_SPEED * Math.PI / 180;
        requestAnimationFrame(rotateClouds);
      })();
    });
  }, [globeEl]);

   return (
    <>
      <Globe
      ref={globeEl}
      globeImageUrl={earthImage}
      bumpImageUrl={bumpImage}
    />;

    </>)

}```
4

0 回答 0