按钮上的旋转3D对象单击Three.js

时间:2017-11-25 12:12:07

标签: jquery 3d three.js rotation

当用户点击按钮时,我必须旋转一个立方体:左,右,前和后。当用户单击“左”时,立方体应旋转,使其左侧位于摄像机前方。它是一个像建筑一样的结构,用户希望从四个方向看到建筑物。

请查看示例小提琴(评论中给出的链接)

1 个答案:

答案 0 :(得分:0)

好的,有几件事:

  1. 您正在使用面法线来确定方向。但是,手动设置几何体时,尚未设置面法线。因此,在推动所有面部后,您需要调用

    geo.computeFaceNormals();
    
  2. 我不知道为什么,但你把每张脸都加了两次。也许,你想看到双方的面孔。为此,请在材料定义中指定DoubleSide

    new THREE.MeshPhongMaterial({ color: 0x6a4bea, side: THREE.DoubleSide }),
    

    您的方法导致建筑物侧面有两种不同的法线。例如,您有两张标有right标记为(0,0,1)的面孔,另外两张标有right标记为(0,0,-1)的面孔,并未明确指出方向camera建筑物的右侧墙面向。当然,如果您手动设置面孔,则需要注意索引顺序,因此所有面孔都面临着'

  3. 现在,通过正确的法线,我们可以确定用户应该从哪里看建筑物的方向或位置。我没有旋转建筑物,而是重新定位了controls.targetvar vector = selectedFace.normal.clone(); var center = myMesh.geometry.boundingSphere.center.clone(); var camPos = new THREE.Vector3().addVectors(center, vector.setLength(50)); camera.position.copy(camPos); controls.target.copy(center);

    public function recipient($toaddr)
    {
        return $this->sendCommand(
            'RCPT TO',
            'RCPT TO:<' . $toaddr . '>',
            array(250, 251)
        );
    }
    

    (距离也可以根据物体的大小动态确定。)

  4. 这是更新的,有效的JSFiddle:https://jsfiddle.net/0z3z6y7w/80/