三.js的lookAt函数问题

Question

我用圆柱几何体创建了一个圆锥体。然后当我想用lookAt函数旋转锥体指向X轴的正方向时，它就不起作用了。我的代码有什么问题吗？或者这是 Three.js 的一个错误？

你也可以在 jsFiddle 上看到我的代码：http : //jsfiddle.net/ysmood/CRdxP/

class Stage
    constructor: ->
        @init_scene()
        @make_meshes()

    init_scene: ->
        @scene = new THREE.Scene

        # Renderer
        width = window.innerWidth;
        height = window.innerHeight;
        @renderer = new THREE.WebGLRenderer({
            canvas: document.querySelector('.scene')
        })
        @renderer.setSize(width, height)

        # Camera
        @camera = new THREE.PerspectiveCamera(
            45,                 # fov
            width / height,     # aspect
            1,                  # near
            1000                # far
        )
        @camera.position.z = 200;
        @scene.add(@camera)

    make_meshes: ->
        size = 20
        @mesh = new THREE.Mesh(
            new THREE.CylinderGeometry(
                0, size, size
            ),
            new THREE.MeshNormalMaterial()
        )
        @scene.add(@mesh)

        # I want the mesh's tip point to right, but it doesn't work.
        @mesh.lookAt(new THREE.Vector3(1, 0, 0))

    draw: =>
        @renderer.render(@scene, @camera)

stage = new Stage
stage.draw()

Answer 1

默认情况下，所有网格的lookAt矢量设置为(0,0,1)，up矢量设置为(0,1,0)。通过设置lookAt矢量，(1,0,0)您实际上将网格围绕 y 轴旋转了 90 度。

看这个演示：http : //threejs.org/examples/misc_lookat.html

你会找到

geometry.applyMatrix( new THREE.Matrix4().makeRotationFromEuler( new THREE.Vector3( Math.PI / 2, Math.PI, 0 ) ) );

该命令以这种方式修改几何体，圆锥体的尖边现在沿着 z 轴放置，然后它用于mesh.lookAt(someVector)重新定向网格以查看空间中的某个所需点。

希望这可以帮助。