未捕获的TypeError：无法读取未定义的属性“ ROTATE”

Question

我试图在错误出现的地方进行提琴操作无法读取未定义的属性'ROTATE'，在此我将三个JS版本升级到R107，错误仍然存​​在。

我还需要进行其他更改或更新吗？

请帮我解决这个问题。这里有小提琴https://jsfiddle.net/0z3z6y7w/80/

var scene, camera, myMesh, myGeo, dummy;
var objects = [];
var controls;

var width = window.innerWidth,
  height = (window.innerHeight * 60 / 100);

 var objectWidth = 12;

$(document).ready(function (){
    Load();
});

function Load() {

  scene = new THREE.Scene();
  scene.fog = new THREE.Fog(0xBBE0FB, 500, 10000);
  // create a camera, which defines where we're looking at.
  camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);

  var light, materials;

  scene.add(new THREE.AmbientLight(0x666666));

  light = new THREE.DirectionalLight(0xdfebff, 1.75);
  light.position.set(50, 200, 100);
  light.position.multiplyScalar(1.3);
  light.castShadow = true;
  light.shadow.mapSize.width = 1024;
  light.shadow.mapSize.height = 1024;

  var d = 300;
  light.shadow.camera.left = -d;
  light.shadow.camera.right = d;
  light.shadow.camera.top = d;
  light.shadow.camera.bottom = -d;
  light.shadow.camera.far = 1000;

  scene.add(light);

  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(width, height);
  renderer.setClearColor(scene.fog.color);

  renderer.gammaInput = true;
  renderer.gammaOutput = true;
  renderer.shadowMap.enabled = true;

  // create a cube and add to scene
  controls = new THREE.OrbitControls(camera, renderer.domElement);

  controls.maxPolarAngle = Math.PI * 0.5;
  controls.rotateSpeed = 1.0;
    controls.zoomSpeed = 1.2;
  controls.panSpeed = 0.8;
  controls.noZoom = false;
  controls.noPan = false;
  controls.staticMoving = true;
  controls.dynamicDampingFactor = 0.3;

  dummy = new THREE.Object3D();
  dummy.position.x = 50;
  dummy.position.z = 50;
  scene.add( dummy );

  myGeo = CreateObject();

  var materials = [
    new THREE.MeshPhongMaterial({ color: 0x6a4bea, side: THREE.DoubleSide }), // right
    new THREE.MeshPhongMaterial({ color: 0xe28c8c, }), // back
    new THREE.MeshPhongMaterial({ color: 0x6ff791, }), // left
    new THREE.MeshPhongMaterial({ color: 0xf4fc00, }), // front
    new THREE.MeshPhongMaterial({ color: 0x0c0c0c, }), // top
  ];

    $.each(myGeo.faces, function(i, face){
    if(i >= 0 && i <= 3){
        // right
      face.materialIndex = 0;
    }else if(i >= 4 && i <= 7){
        // right
      face.materialIndex = 1;
    }else if(i >= 8 && i <= 11){
        // right
      face.materialIndex = 2;
    }else if(i >= 12 && i <= 15){
        // right
      face.materialIndex = 3;
    }else {
        face.materialIndex = 4;
    }
  });

  myGeo.materials = materials;

  myMesh = new THREE.Mesh(myGeo, new THREE.MeshFaceMaterial(myGeo.materials));
  myMesh.name = 'myMesh';
  myMesh.geometry.computeBoundingSphere();
  scene.add(myMesh);

  camera.position.x = -63.34568752955681;
  camera.position.y = 21.686809575802087;
  camera.position.z = 11.969556739130862;

  camera.lookAt(scene.position);

  // add the output of the renderer to the html element
  $('#design-screen').append(renderer.domElement);   

  // call the render function
  render();
}

function render() {
    controls.update();
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

$('#btnLeft').on('click', function(e){
    RotateBuilding('left');
});

$('#btnRight').on('click', function(e){
    RotateBuilding('right');
});

$('#btnFront').on('click', function(e){
    RotateBuilding('front');
});

$('#btnBack').on('click', function(e){
    RotateBuilding('back');
});

function RotateBuilding(toShowSide){    
    var selectedFace;
    $.each(myGeo.faces, function(i, fc){
      if(fc.side == toShowSide){
        selectedFace = fc;
        return false;
      }
    }); 

    var vector = selectedFace.normal.clone();
    var center = myMesh.geometry.boundingSphere.center.clone();

    var camPos = new THREE.Vector3().addVectors(center, vector.setLength(50));

    camera.position.copy(camPos);
    controls.target.copy(center);

    //scene.remove(myMesh);
    //dummy.add( myMesh );

    //rotateAroundWorldAxis(dummy, vector, Math.PI/2);
    // rotateAroundObjectAxis(dummy, vector, Math.PI/2);
}

function rotateAroundObjectAxis( object, axis, radians ) {

    var rotationMatrix = new THREE.Matrix4();

    rotationMatrix.makeRotationAxis( axis.normalize(), radians );
    object.matrix.multiply( rotationMatrix ); // post-multiply
    object.rotation.setFromRotationMatrix(object.matrix);
}

function rotateAroundWorldAxis( object, axis, radians ) {

    var rotationMatrix = new THREE.Matrix4();

    rotationMatrix.makeRotationAxis( axis.normalize(), radians );
    rotationMatrix.multiply( object.matrix ); 
    object.matrix = rotationMatrix;
    object.rotation.setFromRotationMatrix( object.matrix );
}

function CreateObject() {

  var geo = new THREE.Geometry();
  geo.verticesNeedUpdate = true;
  geo.uvsNeedUpdate = true;
  geo.dynamic = true;

  geo.vertices.push(new THREE.Vector3(-objectWidth, -4.8, 6)); //0
  geo.vertices.push(new THREE.Vector3(objectWidth, 2.5, 6)); //1 // back
  geo.vertices.push(new THREE.Vector3(-objectWidth, 2.5, 6)); //2
  geo.vertices.push(new THREE.Vector3(objectWidth, -4.8, 6)); //3 // back

  geo.vertices.push(new THREE.Vector3(objectWidth, 0, -6)); //4 // back
  geo.vertices.push(new THREE.Vector3(objectWidth, -4.8, -6)); //5 // back

  geo.vertices.push(new THREE.Vector3(-objectWidth, 0, -6)); //6
  geo.vertices.push(new THREE.Vector3(-objectWidth, -4.8, -6)); //7

  geo.faces.push(new THREE.Face3(0, 1, 2));
  geo.faces[geo.faces.length - 1].side = "right";
  //geo.faces.push(new THREE.Face3(0, 2, 1));
  //geo.faces[geo.faces.length - 1].side = "right";
  geo.faces.push(new THREE.Face3(0, 3, 1));
  geo.faces[geo.faces.length - 1].side = "right";
  //geo.faces.push(new THREE.Face3(0, 1, 3));
  //geo.faces[geo.faces.length - 1].side = "right";

  //geo.faces.push(new THREE.Face3(3, 4, 5));
  //geo.faces[geo.faces.length - 1].side = "back";
  geo.faces.push(new THREE.Face3(3, 5, 4));
  geo.faces[geo.faces.length - 1].side = "back";
  //geo.faces.push(new THREE.Face3(3, 1, 4));
  //geo.faces[geo.faces.length - 1].side = "back";
  geo.faces.push(new THREE.Face3(3, 4, 1));
  geo.faces[geo.faces.length - 1].side = "back";

  //geo.faces.push(new THREE.Face3(5, 6, 7));
  //geo.faces[geo.faces.length - 1].side = "left";
  geo.faces.push(new THREE.Face3(5, 7, 6));
  geo.faces[geo.faces.length - 1].side = "left";
  geo.faces.push(new THREE.Face3(5, 6, 4));
  geo.faces[geo.faces.length - 1].side = "left";
  //geo.faces.push(new THREE.Face3(5, 4, 6));
  //geo.faces[geo.faces.length - 1].side = "left";

  geo.faces.push(new THREE.Face3(7, 2, 6));
  geo.faces[geo.faces.length - 1].side = "front";
  //geo.faces.push(new THREE.Face3(7, 6, 2));
  //geo.faces[geo.faces.length - 1].side = "front";
  geo.faces.push(new THREE.Face3(7, 0, 2));
  geo.faces[geo.faces.length - 1].side = "front";
  //geo.faces.push(new THREE.Face3(7, 2, 0));
  //geo.faces[geo.faces.length - 1].side = "front";

  geo.faces.push(new THREE.Face3(6, 1, 4));
  geo.faces.push(new THREE.Face3(6, 2, 1));
  //geo.faces.push(new THREE.Face3(6, 4, 1));
  //geo.faces.push(new THREE.Face3(6, 1, 2));

    geo.computeFaceNormals();

  return geo;
}

Answer 1

发生这种情况是因为您使用的three.js（R87）版本与DragControls和OrbitControls（R108）的最新版本不匹配。您始终必须确保所有文件都来自同一发行版。这是固定的小提琴：

http://jsfiddle.net/sqeLtkn1/1