在 3D 個對象上循環 JavaScript

Question

我是 Three Js 的初學者。

在代碼中，當我單擊按鈕 +1時，您可以看到 object 在 1 個房間后移動/更改其位置。 現在我想這樣做，每當我單擊按鈕 +2時，他們應該在 2 個房間后更改 position。

這就是我的意思

這是我的代碼： https://codesandbox.io/s/2nddddddd-7ydbr2

這是文件：

import React, { Suspense, useEffect, useMemo, useRef, useState } from "react";

import { Canvas } from "@react-three/fiber";
import { ContactShadows, OrbitControls, useGLTF } from "@react-three/drei";

import "./PartOne.css";
import { RoomOne } from "../assets/Room1";
import { Room2 } from "../assets/Room2";
import { Room3 } from "../assets/Room3";
import { Room4 } from "../assets/Room4";
import { Room5 } from "../assets/Room5";
import { Room6 } from "../assets/Room6";
import { Room7 } from "../assets/Room7";
import { Room8 } from "../assets/Room8";

const PartOne = () => {
  const [rooms, setRooms] = useState([
    RoomOne,
    Room2,
    Room3,
    Room4,
    Room5,
    Room6,
    Room7,
    Room8
  ]);
  const positions = useMemo(() => [
    [0.0, 0.0, 0.0],
    [-3.6, -2.7, 0.0],
    [-0.0, -2.7, 3.6],
    [-7.2, -5.4, 0.0],
    [-3.6, -5.4, 3.6],
    [-0.0, -5.4, 7.2],
    [-7.2, -8.1, 3.6],
    [-3.6, -8.11, 7.2]
  ]);
  useEffect(() => {
    console.log("rooms state:", rooms);
  }, [rooms]);

  return (
    <div className="wrapper">
      <button
        onClick={() => {
          let arr = [...rooms];
          arr.unshift(arr.pop());
          console.log("arr::", arr);
          setRooms(arr);
        }}
      >
        Button +1
      </button>

      <button
        onClick={() => {
          let arr = [...rooms];
          arr.unshift(arr.pop());
          console.log("arr::", arr);
          setRooms(arr);
        }}
      >
        Button +2
      </button>

      <Canvas shadows camera={{ fov: 70, position: [0, 0, 30] }}>
        <Suspense fallback={null}>
          <ambientLight intensity={0.3} />
          <directionalLight
            castShadow
            receiveShadow
            intensity={2}
            position={[80, 80, 80]}
            shadow-normalBias={0.1}
            shadow-camera-left={-12}
            shadow-camera-right={12}
            shadow-camera-top={12}
            shadow-camera-bottom={-12}
            shadow-camera-near={0.5}
            shadow-camera-far={200}
          />
          {console.log("rooms render", rooms)}
          {rooms.map((room, roomIndex) =>
            room({ position: positions[roomIndex] })
          )}
          <ContactShadows />
        </Suspense>
        <OrbitControls enablePan={true} enableZoom={true} enableRotate={true} />
      </Canvas>
    </div>
  );
};

export default PartOne;

Answer 1

基本上你想根據旋轉次數旋轉你的數組。

所以你可以像這樣使用 function

 const rotate = function (arr, numberOfShifts) { let tmp = 0; const leng = arr.length; numberOfShifts = numberOfShifts % leng; for (let i = 0; i < numberOfShifts; i++) { tmp = arr.pop(); arr.unshift(tmp); } return arr; }; const arr = [1,2,3,4,5] console.log(rotate(arr, 1)) console.log(rotate(arr, 2))

在你的代碼中而不是這個arr.unshift(arr.pop());

調用此 function rotate(arr, 1) button 1和rotate(arr, 2) button 2

更新了您的代碼：

 import React, { Suspense, useEffect, useMemo, useRef, useState } from "react"; import { Canvas } from "@react-three/fiber"; import { ContactShadows, OrbitControls, useGLTF } from "@react-three/drei"; import "./PartOne.css"; import { RoomOne } from "../assets/Room1"; import { Room2 } from "../assets/Room2"; import { Room3 } from "../assets/Room3"; import { Room4 } from "../assets/Room4"; import { Room5 } from "../assets/Room5"; import { Room6 } from "../assets/Room6"; import { Room7 } from "../assets/Room7"; import { Room8 } from "../assets/Room8"; const PartOne = () => { const [rooms, setRooms] = useState([ RoomOne, Room2, Room3, Room4, Room5, Room6, Room7, Room8 ]); const positions = useMemo(() => [ [0.0, 0.0, 0.0], [-3.6, -2.7, 0.0], [-0.0, -2.7, 3.6], [-7.2, -5.4, 0.0], [-3.6, -5.4, 3.6], [-0.0, -5.4, 7.2], [-7.2, -8.1, 3.6], [-3.6, -8.11, 7.2] ]); useEffect(() => { console.log("rooms state:", rooms); }, [rooms]); const rotate = function (arr, numberOfShifts) { let tmp = 0; const leng = arr.length; numberOfShifts = numberOfShifts % leng; for (let i = 0; i < numberOfShifts; i++) { tmp = arr.pop(); arr.unshift(tmp); } return arr; }; return ( <div className="wrapper"> <button onClick={() => { let arr = [...rooms]; rotate(arr,1) console.log("arr::", arr); setRooms(arr); }} > Button +1 </button> <button onClick={() => { let arr = [...rooms]; rotate(arr,2) console.log("arr::", arr); setRooms(arr); }} > Button +2 </button> <Canvas shadows camera={{ fov: 70, position: [0, 0, 30] }}> <Suspense fallback={null}> <ambientLight intensity={0.3} /> <directionalLight castShadow receiveShadow intensity={2} position={[80, 80, 80]} shadow-normalBias={0.1} shadow-camera-left={-12} shadow-camera-right={12} shadow-camera-top={12} shadow-camera-bottom={-12} shadow-camera-near={0.5} shadow-camera-far={200} /> {console.log("rooms render", rooms)} {rooms.map((room, roomIndex) => room({ position: positions[roomIndex] }) )} <ContactShadows /> </Suspense> <OrbitControls enablePan={true} enableZoom={true} enableRotate={true} /> </Canvas> </div> ); }; export default PartOne;