axis three.js पर 3D ऑब्जेक्ट को घुमाने के लिए कैसे?

Question

मुझे तीन.js में रोटेशन के बारे में एक बड़ी समस्या है, मैं अपने 3 डी घन को अपने गेम में घुमाने के लिए चाहता हूं।

//init 
geometry = new THREE.CubeGeometry grid, grid, grid 
material = new THREE.MeshLambertMaterial {color:0xFFFFFF * Math.random(), shading:THREE.FlatShading, overdraw:true, transparent: true, opacity:0.8} 
for i in [1...@shape.length] 
    othergeo = new THREE.Mesh new THREE.CubeGeometry(grid, grid, grid) 
    othergeo.position.x = grid * @shape[i][0] 
    othergeo.position.y = grid * @shape[i][1] 
    THREE.GeometryUtils.merge geometry, othergeo 
@mesh = new THREE.Mesh geometry, material 

//rotate 
@mesh.rotation.y += y * Math.PI/180 
@mesh.rotation.x += x * Math.PI/180 
@mesh.rotation.z += z * Math.PI/180 

और (एक्स, वाई, जेड) (1, 0, 0)

तो घन बारी बारी से कर सकते हैं हो सकता है, लेकिन समस्या यह है घन है अपनी ही धुरी पर बारी बारी से, इसलिए बाद यह है घुमाया गया, यह उम्मीद के रूप में घूम नहीं सकता है।

मुझे पृष्ठ How to rotate a Three.js Vector3 around an axis? मिल गया है, लेकिन यह सिर्फ विश्व अक्ष के चारों ओर एक वेक्टर 3 बिंदु घुमाने देता है? कि क्या मैं एक गलत तरीका में इसका इस्तेमाल किया या वहाँ अन्य तरीके हैं नहीं

और मैं के रूप में

@mesh.matrixRotationWorld.x += x * Math.PI/180 
@mesh.matrixRotationWorld.y += y * Math.PI/180 
@mesh.matrixRotationWorld.z += z * Math.PI/180 

matrixRotationWorld उपयोग करने के लिए कोशिश की है, लेकिन यह काम नहीं करता, मैं करता हूँ ..

तो, कैसे 3 डी घन दुनिया के धुरी के चारों ओर घूमने दें ???

Answer 1

यहां मेरे द्वारा उपयोग किए जाने वाले दो कार्य हैं। वे मैट्रिक्स रोटेशन पर आधारित हैं। और मनमाना अक्षों के चारों ओर घुमा सकते हैं। दुनिया के अक्षों का उपयोग करके घूमने के लिए आप दूसरे फ़ंक्शन को घुमाने के लिए AroundWorldAxis() का उपयोग करना चाहेंगे।

// Rotate an object around an arbitrary axis in object space 
var rotObjectMatrix; 
function rotateAroundObjectAxis(object, axis, radians) { 
    rotObjectMatrix = new THREE.Matrix4(); 
    rotObjectMatrix.makeRotationAxis(axis.normalize(), radians); 

    // old code for Three.JS pre r54: 
    // object.matrix.multiplySelf(rotObjectMatrix);  // post-multiply 
    // new code for Three.JS r55+: 
    object.matrix.multiply(rotObjectMatrix); 

    // old code for Three.js pre r49: 
    // object.rotation.getRotationFromMatrix(object.matrix, object.scale); 
    // old code for Three.js r50-r58: 
    // object.rotation.setEulerFromRotationMatrix(object.matrix); 
    // new code for Three.js r59+: 
    object.rotation.setFromRotationMatrix(object.matrix); 
} 

var rotWorldMatrix; 
// Rotate an object around an arbitrary axis in world space  
function rotateAroundWorldAxis(object, axis, radians) { 
    rotWorldMatrix = new THREE.Matrix4(); 
    rotWorldMatrix.makeRotationAxis(axis.normalize(), radians); 

    // old code for Three.JS pre r54: 
    // rotWorldMatrix.multiply(object.matrix); 
    // new code for Three.JS r55+: 
    rotWorldMatrix.multiply(object.matrix);    // pre-multiply 

    object.matrix = rotWorldMatrix; 

    // old code for Three.js pre r49: 
    // object.rotation.getRotationFromMatrix(object.matrix, object.scale); 
    // old code for Three.js pre r59: 
    // object.rotation.setEulerFromRotationMatrix(object.matrix); 
    // code for r59+: 
    object.rotation.setFromRotationMatrix(object.matrix); 
} 

तो आप अपने anim समारोह (requestAnimFrame कॉलबैक) के भीतर इन कार्यों बुलाना चाहिए x- अक्ष पर 90 डिग्री के एक रोटेशन में जिसके परिणामस्वरूप:

var xAxis = new THREE.Vector3(1,0,0); 
rotateAroundWorldAxis(mesh, xAxis, Math.PI/180); 

Answer 2

मैं rotateAroundWorldAxis समारोह जरूरत थी लेकिन इसके बाद के संस्करण कोड नवीनतम रिलीज (आर 52) के साथ काम नहीं करता है। ऐसा लगता है कि getRotationFromMatrix() तरह से setEulerFromRotationMatrix()

function rotateAroundWorldAxis(object, axis, radians) { 

    var rotationMatrix = new THREE.Matrix4(); 

    rotationMatrix.makeRotationAxis(axis.normalize(), radians); 
    rotationMatrix.multiplySelf(object.matrix);      // pre-multiply 
    object.matrix = rotationMatrix; 
    object.rotation.setEulerFromRotationMatrix(object.matrix); 
} 

Answer 3

शायद ज़रुरत पड़े बदल दिया गया था ... R52 में विधि (object.matrix setEulerFromRotationMatrix R55 के साथ के बजाय getRotationFromMatrix

Answer 4

कहा जाता है आप
rotationMatrix.multiplySelf बदलना होगा);
से
rotationMatrix.multiply (object.matrix);

Answer 5

Three.js R59 में, object.rotation.setEulerFromRotationMatrix(object.matrix);object.rotation.setFromRotationMatrix(object.matrix);

3js को बदल दिया गया है इतनी तेजी से बदल रहा है: डी

Answer 6

Three.js R66 में, यह मैं क्या उपयोग है (CoffeeScript संस्करण):

THREE.Object3D.prototype.rotateAroundWorldAxis = (axis, radians) -> 
    rotWorldMatrix = new THREE.Matrix4() 
    rotWorldMatrix.makeRotationAxis axis.normalize(), radians 
    rotWorldMatrix.multiply this.matrix 
    this.matrix = rotWorldMatrix 
    this.rotation.setFromRotationMatrix this.matrix 

Answer 7

कहीं आसपास इस आसान हो जाता है r59 (एक्स चारों ओर घूमने):

bb.GraphicsEngine.prototype.calcRotation = function (obj, rotationX) 
{ 
    var euler = new THREE.Euler(rotationX, 0, 0, 'XYZ'); 
    obj.position.applyEuler(euler); 
} 

Answer 8

रिलीज आर 5 9 के बाद, तीन.जेएस उन तीन कार्यों को ऑब्जेक्ट अक्ष के चारों ओर एक ऑब्जेक्ट घुमाने के लिए प्रदान करता है।

मैं ThreeJS के लिए 'ObjectControls' मॉड्यूल है कि आप एक वस्तु (या एक समूह), और नहीं दृश्य बारी बारी से करने की अनुमति देता है बनाया:

object.rotateX(angle); 
object.rotateY(angle); 
object.rotateZ(angle); 

Answer 9

मैं इस समस्या को इस तरह से हल किया।

<script src="ObjectControls.js"></script>

उपयोग:: https://albertopiras.github.io/threeJS-object-controls/

यहाँ रेपो है: https://github.com/albertopiras/threeJS-object-controls

var controls = new THREE.ObjectControls(camera, renderer.domElement, yourMesh);

आप यहाँ यहाँ एक लाइव डेमो पा सकते हैं

पुस्तकालय को शामिल करें।