立方体无法在 three.js 内沿 Y 轴完全旋转

Question

我有一个低多边形世界，我为我的角色添加了带有光线投射的“重力”。现在我需要在角色前面添加另一个光线投射器（在本例中是指针锁定控件）指向前方（始终在相机前面并面向同一方向）让我的角色能够在非平面上行走表面。

照片中'b'是光线投射器。然后我会用三角函数来计算坡度，以便知道是否可以步行到那里，如果可以，那么我就使用偏移量； 'a' 以及从角色到称为 'b' 的交叉点的距离，以在其局部 Y 轴和 Z 轴上平移相机。

所以我开始测试并想出了这个：

#blocker {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

#instructions {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
    font-size: 14px;
    cursor: pointer;
}

    <div id="blocker">
        <div id="instructions">
            <p style="font-size:36px">
                Click to play
            </p>
        </div>
    </div>

<script type="module">

 import * as THREE from "https://cdn.skypack.dev/three@0.135.0";
 
import {PointerLockControls} from "https://cdn.skypack.dev/three@0.135.0/examples/jsm/controls/PointerLockControls";

  let scene = new THREE.Scene();
  
  let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
  camera.position.set(0, 8, 13);
  
  let renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setSize(innerWidth, innerHeight);
  renderer.setClearColor(0x404040);
  document.body.appendChild(renderer.domElement);
  
  window.addEventListener("resize", () => {
    camera.aspect = innerWidth / innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(innerWidth, innerHeight);
  })

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

  const blocker = document.getElementById( 'blocker' );
  const instructions = document.getElementById( 'instructions' );

  instructions.addEventListener( 'click', function () {

    controls.lock();

  } );

  controls.addEventListener( 'lock', function () {

    instructions.style.display = 'none';
    blocker.style.display = 'none';

  } );

  controls.addEventListener( 'unlock', function () {

    blocker.style.display = 'block';
    instructions.style.display = '';

  } );
  
  scene.add( controls.getObject() );

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

  function animate(){
    renderer.render(scene,camera)
    cube.position.copy(controls.getObject().position)
    cube.rotation.y = controls.getObject().rotation.y
    cube.translateZ(-10)
  }
  animate();
</script>

我不知道为什么 Pointer Lock 不能使用片段...我可能做错了什么但我找不到 Fiddle 或 Codepen 所以这里有一个视频显示显然 the issue。如您所见，立方体不能进行完整的旋转，它在一侧工作得很好，但当我转向另一侧时，立方体就会朝另一个方向移动。与这个问题相关的代码主要是这3行：

        cube.position.copy(controls.getObject().position)
        cube.rotation.y = controls.getObject().rotation.y
        cube.translateZ(-10)

Answer 1

解决方案：当我将角度应用于基于弧度的网格旋转时，我必须将角度转换为弧度。

立方体无法在 three.js 内沿 Y 轴完全旋转

Cube cannot do a full rotation on the Y axis in three.js

javascript

euler-angles

three.js