如何在反应三纤维中定位物体

Question

我在画布上有一个立方体网格，我想将其向左移动（更改其 X 轴）而不更改其旋转点。我尝试将参数

position={[1,0,0]}

应用于框组件中的网格组件，但似乎它只是将框移离了位于画布中心的旋转点。我计划将来创建更多类似于下图中的 3d 盒子，那么我将如何定位它们，同时将每个盒子的旋转点分别保持在盒子的中心？

这是我的代码：

import React from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";

function Box() {
  return (
    <mesh>
      <boxBufferGeometry attach="geometry" />
      <meshLambertMaterial attacah="material" color="white" />
    </mesh>
  );
}

const Background= () => {
  return (
    <Canvas>
      <OrbitControls
        enableZoom={false}
        rotateSpeed={2}
        autoRotate={true}
        autoRotateSpeed={5}
      />
      <ambientLight intensity={0.5} />
      <spotLight position={[10, 15, 10]} angle={0.3} />
      <Box />
    </Canvas>
  );
};

export default Background;

我是 React Three Fiber 的新手，所以任何参考/文档或建议都会非常有帮助。谢谢

Answer 1

mesh

组件就像

spotLight

组件一样采用

position

属性，它是一个长度为3的x、y和z坐标数组