旋转了三个JS对象

Question

我制作了一个简单的游戏，当你点击一个大飞机时，你可以将对象放置在raycaster位置。

当鼠标移动时，矩形（帮助者）跟随鼠标（raycaster），矩形（帮助者）颜色为绿色或红色，如果您可以将对象放置在该平面的位置上。

我让我的对象在平面上添加如下：

var geometry = new THREE.BoxGeometry( 50, 50, 100 );
var object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0xFBF5D7, opacity: 1 } ) );
object.position.copy( intersects[ 0 ].point );

我创建了我的矩形（帮助器）以向玩家显示将对象放置在平面上是否有效：

var geometry = new THREE.BoxGeometry( 50, 50, 100 );
helper = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x00ff00, opacity: 0.2 } ) );

当鼠标（raycaster）移动时，矩形（帮助者）转到该位置：

helper.position.set( 0, 0, 0 );
helper.lookAt( intersects[ 0 ].face.normal );
helper.position.copy( intersects[ 0 ].point );

问题是助手（绿色物体）是垂直旋转的： 注意：您在左侧看到放置/添加的对象。和右边的帮手。飞机有不透明度。这就是为什么你看到黄色底部的助手。

任何人都可以帮我解决这个问题吗？帮助器垂直旋转的原因是什么？