0

I'm building 3D model of a cupboard with doors and opportunity of dynamically changing dimensions. My cupboard is a set of cubes defined in json. This is exapmle of shelf:

{
  "name": "shelf_top",
  "rotation_point": {
    "px": 0,
    "py": 0,
    "pz": 0,
    "onclick": [{
      "rx": 0,
      "ry": 0,
      "rz": 0
    }]
  },
  "elements": [{
    "e_type": "box",
    "h": 50,
    "w": 100,
    "d": 2,
    "x": 0,
    "y": 49,
    "z": 0,
    "rx": Math.PI / 2,
    "ry": 0,
    "rz": 0,
    "textures": ["textures/drewno.jpg", "textures/drewno.jpg", "textures/drewno.jpg", "textures/drewno.jpg", "textures/bok.jpg", "textures/drewno.jpg"]
  }],
  "handler": null
}

There is no problem with resizing scale and position of static elements, I'm doing it this way:

function resizeHeight(h) {
  $clickEvent[0].scale.y = h - 4;
  $clickEvent[1].scale.y = h - 4;
  $clickEvent[2].scale.y = h - 4;
  $clickEvent[4].position.setY(-h / 2 + 1);
  $clickEvent[5].position.setY(h / 2 - 1);
}

But I don't know how to manage with rotating doors. They have the rotation point which should be attached to the front of the wall during the resizing. But there's no method for setting the rotation point. I've tried making translation according to this answer Three.js move geometry's center but it changed only the position, not the rotation point. Here, it's a json representation of the doors:

{
  "name": "doors_right",
  "rotation_point": {
    "px": 49,
    "py": 0,
    "pz": 26,
    "onclick": [{
      "rx": 0,
      "ry": 0,
      "rz": 0
    }, {
      "rx": 0,
      "ry": Math.PI / 2,
      "rz": 0
    }]
  },
  "elements": [{
    "e_type": "box",
    "h": 100,
    "w": 50,
    "d": 2,
    "x": -24,
    "y": 0,
    "z": 0,
    "rx": 0,
    "ry": 0,
    "rz": 0,
    "textures": ["textures/drewno.jpg", "textures/drewno.jpg", "textures/drewno.jpg", "textures/drewno.jpg", "textures/drewno.jpg", "textures/drewno.jpg"]
  }]
}

EDIT: After a deeper look in the method with setting rotation point as a parent object, everything works.

Community
  • 1
  • 1
Cymonello
  • 45
  • 1
  • 9
  • This question is already answered [here](http://stackoverflow.com/questions/11911065/three-js-move-geometrys-center) and [there](http://stackoverflow.com/questions/12835361/three-js-move-custom-geometry-to-origin). You could either translate geometry attribute positions (not object position) or make parent object. Could you make a jsfiddle example with one of those approaches which is not working? – Ramil Kudashev Sep 02 '16 at 08:54
  • Thank you @mlkn I'm working with legacy code and that was source of my problems with those approaches. After rebuilding a part of code and use parent object (as in the answers you suggested), everything works perfectly – Cymonello Sep 02 '16 at 12:16

0 Answers0