(0, 0, 0)
ポイントを見ながらyz平面上のx軸を中心にカメラを回転させたい。lookAt
関数の動作がおかしいことがわかりました。180°回転した後、ジオメトリが予期せず反対側にジャンプします。なぜこのようなことが起こるのか、またそれを回避する方法を教えてください。
jsFiddle でライブ デモを見ることができます: http://jsfiddle.net/ysmood/dryEa/
class Stage
constructor: ->
window.requestAnimationFrame =
window.requestAnimationFrame or
window.webkitRequestAnimationFrame or
window.mozRequestAnimationFrame
@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
)
@scene.add(@camera)
make_meshes: ->
size = 20
num = 1
geo = new THREE.CylinderGeometry(0, size, size)
material = new THREE.MeshNormalMaterial()
mesh = new THREE.Mesh(geo, material)
mesh.rotation.z = Math.PI / 2
@scene.add(mesh)
draw: =>
angle = Date.now() * 0.001
radius = 100
@camera.position.set(
0,
radius * Math.cos(angle),
radius * Math.sin(angle)
)
@camera.lookAt(new THREE.Vector3())
@renderer.render(@scene, @camera)
requestAnimationFrame(@draw)
stage = new Stage
stage.draw()