Quaternion rotation bug?
by Eskel
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r66/three.min.js"></script>
<script src="http://eskel.cz/js/model.js"></script>
CSS
body { margin: 0px }
CoffeeScript
scene = null
light = null
renderer = null
camera = null
mesh1A = null
mesh1B = null
mesh2A = null
mesh2B = null
screenWidth = window.innerWidth
screenHeight = window.innerHeight
clock = new THREE.Clock
init = () ->
# SCENE
scene = new THREE.Scene
camera = new THREE.PerspectiveCamera 40, screenWidth/screenHeight, 50, 10000
camera.position.set 0, 0, 1000
loadModel()
# LIGHTS
light = new THREE.DirectionalLight 0xffffff
light.position.set 1, 1, 1
scene.add light
# RENDERER
renderer = new THREE.WebGLRenderer
width: screenWidth
height: screenHeight
antialias: true
renderer.setSize screenWidth, screenHeight
renderer.setClearColor 0x666666
document.body.appendChild renderer.domElement
# EVENTS
window.addEventListener 'resize', onWindowResize, false
loadModel = ->
loader = new THREE.JSONLoader()
result = loader.parse model
setModels result.geometry
setModels = (model) ->
# torus
mat1 = new THREE.MeshLambertMaterial
color: 0xFF0000
torus = new THREE.TorusKnotGeometry(40, 10, 80, 16)
mesh1A = new THREE.Mesh torus, mat1
mesh1A.position.set -200, 150, 0
scene.add mesh1A
mesh1B = new THREE.Mesh torus, mat1
mesh1B.position.set 200, 150, 0
mesh1B.quaternion = mesh1A.quaternion
scene.add mesh1B
# skinned mesh
mat2 = new THREE.MeshLambertMaterial
color: 0x0000FF,
skinning: true
mesh2A = new THREE.SkinnedMesh model, mat2
mesh2A.position.set -200, -200, 0
scene.add mesh2A
mesh2B = new THREE.SkinnedMesh model, mat2
mesh2B.quaternion = mesh2A.quaternion
mesh2B.position.set 200, -200, 0
scene.add mesh2B
# animation
THREE.AnimationHandler.add model.animations[1]
animation1 = new THREE.Animation mesh2A, 'WalkCycle'
animation2 = new THREE.Animation mesh2B, 'WalkCycle'
animation1.play()
animation2.play()
onWindowResize = ->
screenWidth = window.innerWidth
screenHeight = window.innerHeight
camera.aspect = screenWidth /...