旋转全局.React中的gl global(带有React -three-fiber或其他)

Question

我遵循Globe的这个例子。Gl来实现以下输出。我想使用react-three-fiber来旋转这个球体，也就是使用这个例子中的方法。

这是我的Globe.js:

import React from "react";
import * as d3 from "d3-dsv";
import indexBy from "index-array-by";
import Globe from "react-globe.gl";
import earth from "../../public/images/earth-dark.png";
import background from "../../public/images/globeBackground.png";
function GlobeHome() {
const { useState, useEffect, useRef } = React;
const globeEl = useRef();
const [airports, setAirports] = useState([]);
const [routes, setRoutes] = useState([]);

const COUNTRY = "United States";
const OPACITY = 0.125;
const airportParse = ([
airportId,
name,
city,
country,
iata,
icao,
lat,
lng,
alt,
timezone,
dst,
tz,
type,
source,
]) => ({
airportId,
name,
city,
country,
iata,
icao,
lat,
lng,
alt,
timezone,
dst,
tz,
type,
source,
});
const routeParse = ([
airline,
airlineId,
srcIata,
srcAirportId,
dstIata,
dstAirportId,
codeshare,
stops,
equipment,
]) => ({
airline,
airlineId,
srcIata,
srcAirportId,
dstIata,
dstAirportId,
codeshare,
stops,
equipment,
});
useEffect(() => {
Promise.all([
fetch(
"https://raw.githubusercontent.com/jpatokal/openflights/master/data/airports.dat"
)
.then((res) => res.text())
.then((d) => d3.csvParseRows(d, airportParse)),
fetch(
"https://raw.githubusercontent.com/jpatokal/openflights/master/data/routes.dat"
)
.then((res) => res.text())
.then((d) => d3.csvParseRows(d, routeParse)),
]).then(([airports, routes]) => {
const byIata = indexBy(airports, "iata", false);
const filteredRoutes = routes
.filter(
(d) =>
byIata.hasOwnProperty(d.srcIata) && byIata.hasOwnProperty(d.dstIata)
)
.filter((d) => d.stops === "0")
.map((d) =>
Object.assign(d, {
srcAirport: byIata[d.srcIata],
dstAirport: byIata[d.dstIata],
})
)
.filter(
(d) =>
d.srcAirport.country === COUNTRY && d.dstAirport.country !== COUNTRY
);
setAirports(airports);
setRoutes(filteredRoutes);
});
}, []);
useEffect(() => {
globeEl.current.pointOfView({ lat: 42, lng: -71, altitude: 2 });
}, []);
return (
<Globe
ref={globeEl}
width={1000}
height={1000}
showGlobe={true}
globeImageUrl={earth}
backgroundImageUrl={background}
arcsData={routes}
arcStartLat={(d) => +d.srcAirport.lat}
arcStartLng={(d) => +d.srcAirport.lng}
arcEndLat={(d) => +d.dstAirport.lat}
arcEndLng={(d) => +d.dstAirport.lng}
arcDashLength={0.25}
arcDashGap={1}
arcDashInitialGap={() => Math.random()}
arcDashAnimateTime={4000}
arcColor={(d) => [
`rgba(48, 64, 77, ${OPACITY})`,
`rgba(191, 204, 214, ${OPACITY})`,
]}
arcsTransitionDuration={0}
pointsData={airports}
pointColor={() => "white"}
pointAltitude={0}
pointRadius={0.03}
pointsMerge={true}
/>
);
}
export default GlobeHome;

然后导入到Boxes.js:

import React, { useRef, useState } from "react";
import { Canvas, useFrame } from "react-three-fiber";
import Globe from './Globe'
function Box(props) {
// This reference will give us direct access to the mesh
const mesh = useRef();
// Set up state for the hovered and active state
const [hovered, setHover] = useState(false);
const [active, setActive] = useState(false);
// Rotate mesh every frame, this is outside of React without overhead
useFrame(() => {
mesh.current.rotation.x = mesh.current.rotation.y += 0.01;
});
return (
<mesh
{...props}
ref={mesh}
>
<Globe />
</mesh>
);
}
export default function App() {
return (
<Canvas>
<ambientLight intensity={0.5} />
<spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
<pointLight position={[-10, -10, -10]} />
<Box />
</Canvas>
);
}

使用这种方法会产生以下错误:

Uncaught "Div" is not part of the THREE namespace! Did you forget to extend it?

对调试的看法?有没有更好的方法来旋转这个地球仪。gl全球?

Answer 1

在您的Globe.js组件中，在useEffect()中添加此:globeEl.current.controls().autoRotate = true;

关于你的错误，是别的原因。你需要读这个

Answer 2

我也遇到过这个问题。问题是你将Globe组件作为Box组件的属性传递，Box组件是一个网格。然后，Box组件在Canvas组件中。这个库要求你把Globe组件作为一个标准的React组件放在Canvas组件之外。我能够通过改变应用程序组件来解决我的逻辑问题，只返回<Globe…>只有它的属性。

Answer 3

最新版本的@react-three/fiber不支持shadowMap作为画布中的道具，我们必须在画布中使用阴影道具。但是也可以使用jsx中的元素来实现阴影，这个元素是从"@react-three/dier": https://github.com/pmndrs/drei contactshadows

<canvas shadows>
{/*This is the shadow generating element imported from @react-three/drei */}
<ContactShadows opacity={1} scale={10} blur={1} far={10} resolution={256} color="#000000" />
{/*You must have shadow generating and shadow receiving objects but not the ContactShadows element to support shadows genereated by lights*/}
</canvas>