我是3J的初学者。
在代码中,当我单击按钮+1时,您可以看到对象在1个房间后移动/改变其位置。现在我想这样做,每当我单击按钮+2时,它们应该在2个房间后改变位置。
我的意思是
这是我的代码:https://codesandbox.io/s/2ndddddd-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;
1条答案
按热度按时间xsuvu9jc1#
基本上你要根据旋转的次数来旋转你的数组。
所以你可以用这样一个函数
而不是
arr.unshift(arr.pop());
对于
button 1
调用此函数rotate(arr, 1)
,对于button 2
调用此函数rotate(arr, 2)
已更新您的代码: