Three.js 未捕获类型错误：无法读取属性'；旋转'；未定义的

我曾尝试运行小提琴，在那里我得到错误无法读取未定义的属性“ROTATE”，我将三个JS版本升级到R107，错误保持不变

是否有任何其他更改或更新我应该去

请帮我解决这个问题。这是小提琴

var场景、摄影机、myMesh、myGeo、虚拟；
var对象=[]；
风险值控制；
变量宽度=window.innerWidth，
高度=（window.innerHeight*60/100）；
var-objectWidth=12；
$（文档）.ready（函数（）{
加载（）；
});
函数加载（）{
场景=新的三个。场景（）；
scene.fog=新的3.fog（0xBBE0FB，500，10000）；
//创建一个摄像头，它定义了我们要看的地方。
摄像机=新的三个透视摄像机（45，宽/高，0.11000）；
光、材料；
添加（新的三个环境光（0x666666））；
光=新的三方向光（0xdfebff，1.75）；
光。位置。设置（50200100）；
光、位置、多重刻度（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；
场景。添加（灯光）；
renderer=new THREE.WebGLRenderer（）；
renderer.setPixelRatio（window.devicePixelRatio）；
设置大小（宽度、高度）；
renderer.setClearColor（scene.fog.color）；
renderer.gammaInput=true；
renderer.gammaOutput=true；
renderer.shadowMap.enabled=true；
//创建立方体并添加到场景中
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
controls.maxPolarAngle=Math.PI*0.5；
controls.rotateSpeed=1.0；
controls.zoomSpeed=1.2；
控制点速度=0.8；
controls.noZoom=false；
controls.noPan=false；
controls.staticMoving=true；
controls.dynamicDampingFactor=0.3；
dummy=new THREE.Object3D（）；
假人位置x=50；
假人位置z=50；
场景。添加（虚拟）；
myGeo=CreateObject（）；
var材料=[
新的THREE.MeshPhongMaterial（{color:0x6a4bea，side:THREE.DoubleSide}），//右
新的3.MeshPhongMaterial（{color:0xe28c8c，}），//返回
新的三个.MeshPhongMaterial（{color:0x6ff791，}），//左
新的三个.MeshPhongMaterial（{color:0xf4fc00，}），//前面
新的三个.MeshPhongMaterial（{color:0x0c，}），//顶部
];
$.each（myGeo.faces，函数（i，faces）{
如果（i>=0&&i=4&&i=8&&i=12&&i发生这种情况是因为您使用的
three.js
（R87）版本与
DragControl
和
OrbitControls
（R108）的最新版本不匹配。您必须始终确保所有文件都来自同一版本。以下是固定问题：


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;
}