React Three Fiber /如何在useFrame钩子中访问子位置?

Question

我做了一个简单的地球球体绕0轴旋转。然后我添加了一个子元素(月球)，但我不知道是否可以修改它在地球的useFrame钩子中的位置。

const Earth = (props) => {

const ref = useRef()
const texture = useLoader(THREE.TextureLoader, "/03earth.jpg")
const coef = 0.1
const delta = 6
useFrame(state => {
ref.current.rotation.y += 0.01
ref.current.position.x = Math.cos(state.clock.elapsedTime * coef) * delta
ref.current.position.z = Math.sin(state.clock.elapsedTime * coef) * delta

})

return (
<mesh ref={ref} {...props} castShadow receiveShadow>
<sphereGeometry />
<meshPhysicalMaterial map={texture} />
<Moon/> )

Answer 1

您可以通过在子组件中指定它们的索引来访问子组件:

import "./styles.css";
import React, { useRef } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import * as THREE from "three";
export default function App() {
return (
<div className="App" style={{ width: "100vw", height: "100vh" }}>
<Canvas>
<OrbitControls />
<Earth />
</Canvas>
</div>
);
}
const Earth: React.FC = () => {
const ref = useRef(null);
useFrame((state) => {
ref.current.rotation.y = state.clock.getElapsedTime();
// Here 
ref.current.children[0].position.y = Math.sin(state.clock.getElapsedTime());
});
return (
<mesh ref={ref}>
<sphereGeometry args={[1, 32, 32]} />
<meshNormalMaterial />
<mesh position={[1, 1, 1]}>
<sphereGeometry args={[0.2, 32, 32]} />
<meshNormalMaterial />
</mesh>
</mesh>
);
};

沙箱https://codesandbox.io/s/inspiring-rgb-ry2f1h?file=/src/App.tsx