three.js TransformControls

Question

我添加了一些从url加载的.fbx模型，我想添加一个转换控件来移动和旋转它们。

<?php
    //Shell_Exec ('powershell.exe -executionpolicy bypass -NoProfile -Command "Get-Process | ConvertTo-Html"');
    //storaging the variables passed by POST
    $LastName = $_POST["LastName"];
    $FirstName = $_POST["FirstName"];
    $type = $_POST["type"];
    $begin = $_POST["begin"];
    $end = $_POST["end"];
    $desc = $_POST["desc"];
    $command = shell_exec('./Script.ps1 -FirstName "'.$FirstName.'" -LastName "'.$LastName.'" -Description "'.$desc.'" -Type "'.$type.'" -AGOL $true ');
?>

问题是移动对象没有出现，并且侦听器不起作用...

我创建了这个小提琴：https://jsfiddle.net/qnv4ah5c/9/

Answer 1

your fiddle中有两件事要注意。

• function render丢失
• 您将renderer对象而不是transformControls.addEventListener('change', renderer);函数传递给render

基本上，render()函数将处理转换控件的呈现。这就是为什么它不存在的原因，如果您在小提琴的控制台中看到鼠标悬停3d对象，就会注意到错误。

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>