如何在React项目中设置ThreeJS Scrollable平面

Question

我想使用ThreeJS创建一个具有左、右、上和下边缘的2D平面。相机应该无法滚动超过这些界限。为什么只有2D平面的场景使用ThreeJS？因为我想使用着色器来绘制平面，并可能最终添加三维内容。

如何设置这样的场景？相机在飞机周围移动吗？飞机绕着摄影机转吗？我如何执行"；有界边"；相机无法滚动过去？

最后，我是否需要使用React Three Fiber，因为它将存在于React应用程序中？我试着只用ThreeJS来设置场景，但我无法让我的控件按我想要的方式工作，我想知道我是否需要React Three Fiber来弥补这一差距。

Answer 1

最终让它工作起来。使用R3F可能会更容易，但我采用了ThreeJS方法，因为许多人似乎认为它提供了更多的灵活性。希望这能帮助未来的某个人：

import React, { useEffect, useRef } from "react";
import * as THREE from "three";
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
const Window = () => {
const windowRef = useRef(null);
const setupScene = () => {
// renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
windowRef.current.appendChild( renderer.domElement );
// scene
const scene = new THREE.Scene();
// camera
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.set(0,0,10);

// controls
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set( 0, 0, 0 ); // view direction perpendicular to XY-plane
controls.enableRotate = false;
controls.enablePan = true;
controls.mouseButtons = { LEFT: THREE.MOUSE.PAN };
controls.minDistance = 1;
controls.maxDistance = 100;
const geometry = new THREE.PlaneBufferGeometry(100, 100, 10, 10);
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const plane = new THREE.Mesh( geometry, material );

scene.add( plane );

const animate = function () {
controls.update();
requestAnimationFrame( animate );
renderer.render( scene, camera );
};

animate();
return () => windowRef.current.removeChild( renderer.domElement);
};
useEffect(setupScene);
return (
<div ref={windowRef} />
);
}
export default Window;