Question

我在我的three.js演示中使用雷卡斯特检测到碰撞，该雷卡斯特指出了我的相机正面（它只能沿着它面向的方向移动 - 尽管鼠标朝任何方向操纵相机）：

var ray = new THREE.Raycaster( camera.position, cameraDirectionVector );
var collisionResults = ray.intersectObjects( scene.children  );
if ( collisionResults.length > 0 ) 
    {
        if (collisionResults[0].distance < 0.15) {
            var crossAxis = new THREE.Vector3( 0, 0, 1 );
            crossAxis.crossVectors(cameraDirectionVector, collisionResults[0].face.normal)
            camera.rotateOnAxis( crossAxis, 0.2); // this second parameter is the number I'd like to calculate correctly
    }
}

因此，当发生碰撞时，我使用碰撞面法线和相机行进方向的交叉积作为旋转轴，目的是有效地将相机旋转远离碰撞。

我想知道如何正确计算该轴周围的旋转方向;根据crossAxis Vector3相对于面法线和行进方向的方向，该值可能需要为正或负。

我应该指出，这次碰撞检测的目标只是非常简陋 - 并且受到玩家只能前进这一事实的限制。

如何确定相机是否需要围绕该产品轴顺时针或逆时针旋转？（一旦我知道如何计算这个数字，我就可以更真实地表达碰撞;例如，通过让旋转值减少超过一定数量的帧）。

任何帮助，非常感谢！

Answer 1

也许我误解了你的问题，但是根据相机接近碰撞面正常的方向，十字产品将面向不同的方向，从而改变旋转方向。

在下面的示例中，蓝色箭头是您的碰撞面法线，红色箭头是您的相机方向，绿色箭头是两个之间的交叉积（红色X蓝色）。摄像机方向朝向不同方向的正常方向，从而每次创建不同的叉积。

您会注意到，每当红色和蓝色箭头之间的角度相互经过180度时，白色球体的旋转方向会发生变化。这是因为我使用绿色箭头（红色和蓝色箭头的叉积）作为旋转轴，并且当旋转轴改变侧时，旋转方向也由于right hand rule而改变。

因此，您不必在第二个参数前面放置任何符号，旋转方向已经在用作旋转轴的（叉积）向量中给出。

但是既然你问了这个问题，并且你提供了一些示例代码，我认为你提供的解决方案并不是你想要的。也许你的意思是你总是希望相机从碰撞法线上旋转远离，你是否尝试过将一个负值作为第二个参数？

＆＃13;

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75,     window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var origin = new THREE.Vector3(0, 0, 0)

var a = new THREE.Vector3(1, 0, 0);
var arrowHelperA = new THREE.ArrowHelper( a, origin, 1, 0xff0000 );
scene.add( arrowHelperA );

var b = new THREE.Vector3(0, 1, 0);
var arrowHelperB = new THREE.ArrowHelper( b, origin, 1, 0x0000ff );
scene.add( arrowHelperB );

var crossAB = new THREE.Vector3().crossVectors(a, b);
var arrowHelperCrossAB = new THREE.ArrowHelper( crossAB, origin, 1, 0x00ff00 );
scene.add( arrowHelperCrossAB );

var geometry = new THREE.SphereGeometry( 0.02, 32, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffffff} );
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );
sphere.position.copy(crossAB);
sphere.position.x = 0.3;

camera.position.z = 2;
camera.position.x = 2;
camera.position.y = 2;

camera.lookAt(origin);

var animate = function () {
  requestAnimationFrame( animate );
  
  a.applyAxisAngle(new THREE.Vector3(0, 0, 1), 0.01);
  arrowHelperA.setDirection(a);
  
  crossAB = new THREE.Vector3().crossVectors(a, b);
  arrowHelperCrossAB.setDirection(crossAB);
  arrowHelperCrossAB.setLength(crossAB.length())
 
  sphere.position.z = crossAB.z;
  sphere.position.applyAxisAngle(crossAB.normalize(), .1);
  
  renderer.render(scene, camera);
};

animate();

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js"></script>

＆＃13;

在three.js

1 个答案: