CODEWITHSUNDEEP
javascriptthree.js
Alessandro Zago
Alessandro Zago

Reputation: 803

three.js TransformControls

I add some .fbx models loaded from url and i want to add a transform controls to to move and rotate them.

    var transformControls = new THREE.TransformControls(camera3d, renderer3d.domElement);
    transformControls.addEventListener('change', renderer3d);
    console.log(object);

    try {
        transformControls.attach(object);
    }
    catch (err) {
        console.log(err); 
    }


    scene3d.add(transformControls);


    transformControls.addEventListener('mouseDown', function () {
        controls3d.enabled = false;
    });
    transformControls.addEventListener('mouseUp', function () {
        controls3d.enabled = true;
    });

the problem is that the move object doesn't appear and the listeners doesn't work...

i have created this fiddle : https://jsfiddle.net/qnv4ah5c/9/

Upvotes: 0

Views: 4610

Answers (1)

codtex
codtex

Reputation: 6558

Two things to note in your fiddle.

  • function render is missing
  • You pass renderer object to transformControls.addEventListener('change', renderer); instead of render function

Basically render() function will handle the rendering of the transform controls. That's why it is missing and if you see in the console of your fiddle you will notice error when you hover the 3d object.

var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
  camera.position.z = 1;

  scene = new THREE.Scene();
  geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
  material = new THREE.MeshNormalMaterial();
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement);

  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  var transformControls = new THREE.TransformControls(camera, renderer.domElement);
  transformControls.addEventListener('change', render);

  try {
    transformControls.attach(mesh);
  } catch (err) {
    console.log(err);
  }

  scene.add(transformControls);
}

function animate() {

  requestAnimationFrame(animate);

  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.02;

  renderer.render(scene, camera);
}

function render() {
  renderer.render(scene, camera);
}
.as-console {
  display: none !important;
}
<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/TransformControls.js"></script>
<script src="https://threejs.org/examples/js/libs/inflate.min.js"></script>
<script src="https://threejs.org/examples/js/loaders/FBXLoader.js"></script>

Upvotes: 2

Related Questions