如何在 Three.JS 中以第一人称环顾场景？

如何解决如何在 Three.JS 中以第一人称环顾场景？

我已经用 Three.JS 渲染了一个简单的立方体到屏幕上，现在我在网上找到的方法是我需要使用 PointerLockControls.js 锁定鼠标并环顾场景。我已经设法查看光标并使用它隐藏它，但是我不确定如何实现“环顾四周”

这是我目前的代码：

<!DOCTYPE html>
<html>
    <head>
        <Meta charset="utf-8">
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <script src="javascript/three.js"></script>
        <script src="javascript/PointerLockControls.js"></script>
        <script>

            var scene,camera,renderer,geometry,material,cube;

        var init = function(){

            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera( 75,window.innerWidth / window.innerHeight,0.1,1000 );

            renderer = new THREE.Webglrenderer();
            renderer.setSize( window.innerWidth,window.innerHeight );
            document.body.appendChild( renderer.domElement );

            geometry = new THREE.BoxGeometry();
            material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
            cube = new THREE.Mesh( geometry,material );
            scene.add( cube );

            camera.position.z = 5;


            document.addEventListener("mousedown",doMouseDown,false);

            //const controls = new PointerLockControls( camera,document.body);
            controls = new THREE.PointerLockControls( camera,document.body );


        }


function doMouseDown(event){
controls.lock();

}



            function render() {
                renderer.render( scene,camera );
            };


init();
render();

        </script>
    </body>
</html>

解决方法

通过“环顾四周”，我假设您想四处移动相机？这对您来说可能是一个开始。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My first three.js app</title>
        <style>
body { margin: 0; }
#js3canvas { width:800px; height:600px; }            
        </style>
    </head>
    <body>
<canvas id="js3canvas"></canvas>
    <script src="javascript/three.js"></script>
    <script>
  var scene,camera,renderer,geometry,material,cube;
  var canvaselt = document.getElementById("js3canvas");
  var init = function(){
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera( 75,canvaselt.clientWidth/canvaselt.clientHeight,0.1,1000 );
  renderer = new THREE.WebGLRenderer( { canvas:canvaselt } );
  renderer.setSize(canvaselt.clientWidth,canvaselt.clientHeight);
  geometry = new THREE.BoxGeometry();
  material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
  cube = new THREE.Mesh( geometry,material );
  scene.add( cube );
  camera.position.z = 5;
  canvaselt.addEventListener("mousemove",doMouseMove,false);
}
function doMouseMove(ev) { // point camera 
  camera.lookAt((ev.pageX-400)/100,-(ev.pageY-300)/100,0);
}
function animate() { // need to animate,not just render once
  renderer.render( scene,camera );
  requestAnimationFrame( animate );
}
init();
animate();
        </script>
    </body>
</html>

如何在 Three.JS 中以第一人称环顾场景？

如何解决如何在 Three.JS 中以第一人称环顾场景？

解决方法

相关推荐