在ThreeJS中创建一个三重纸的例子

Question

我正在尝试使用ThreeJS创建三重奏小册子示例。除了一小部分，我几乎是正确的。我正在尝试将页面折叠到 side0 。 side1 - 绿色和 side2 - 红色折叠到 side0 。我正在使用PlaneGeometry创建类似效果的页面。

绿色部分在右侧正确折叠，但红色部分在其顶部折叠。我尝试过设置 rotation.x 和 rotation.y 属性，但无法获得红色多维数据集。

我为它创建了一个JS小提琴： https://jsfiddle.net/prisoner849/w35mjrwf/

以下是代码：

＆＃13;

＆＃13;

var camera, scene, renderer, controls;
var sides = [];
var clock = new THREE.Clock();

init();
animate();


function init() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(0, 0, 1).setLength(5);

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  controls = new THREE.OrbitControls(camera, renderer.domElement);


  var geom = new THREE.PlaneGeometry(1, 1, 1);
  var side0 = new THREE.Mesh(geom, new THREE.MeshBasicMaterial({
    color: "red",
    wireframe: true
  }));
  scene.add(side0);
  sides.push(side0);

  var side1Geom = new THREE.PlaneGeometry(1, 1, 1);
  side1Geom.translate(-0.5, 0, 0);

  var side2Geom = new THREE.PlaneGeometry(1, 1, 1);
  side2Geom.translate(-0.5, 0, 0);



  var side1 = new THREE.Mesh(side1Geom);
  sides.push(side1);

  var side2 = new THREE.Mesh(side2Geom);
  sides.push(side2);

  side1.material = new THREE.MeshBasicMaterial({
    color: "green",
    side: THREE.DoubleSide
  });
  side2.material = new THREE.MeshBasicMaterial({
    color: "red",
    side: THREE.DoubleSide
  });

  side1.position.set(-0.5, 0, 0);
  side0.add(side1);

  side2.position.set(1, 0.5, 0);
  side2.rotation.z = Math.PI / 2;

  //side2.position.set(1.5,0,0);
  side0.add(side2);

  document.getElementById("run").addEventListener("click", foldTheCube);
}

function foldTheCube() {
  var start = {
    value: -Math.PI / 2
  };
  var finish = {
    value: Math.PI / 2
  };
  var angle = 0;

  var tween1 = new TWEEN
    .Tween(start)
    .to(finish, 3000)
    //.easing(TWEEN.Easing.Sinusoidal.InOut)
    .onUpdate(function() {
      angle = this.value;
      sides[1].rotation.y = angle + 1.6;
      sides[2].rotation.x = -angle - 1.6;
    })
    .start()
    .onComplete(function() {
      /*var tween2 = new TWEEN
    			.Tween(start)
    		 .to(finish, 3000)
    		 .easing(TWEEN.Easing.Sinusoidal.InOut)
    		 .onUpdate(function(){
    		 	angle = this.value;
    		 	 sides[1].rotation.x = -1.5;
    		     sides[2].rotation.y = -2.15;
    		 })
    		 tween2.start();*/
      var tween2 = new TWEEN
        .Tween(start)
        .to(finish, 3000)
        .easing(TWEEN.Easing.Sinusoidal.InOut)
        .onUpdate(function() {
          angle = this.value;
          sides[0].rotation.x = 1.5;
          // sides[2].rotation.y = -2.15;
        }); //tween2.start();
    });
}



function animate() {
  requestAnimationFrame(animate);
  TWEEN.update();
  render();
}

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

＆＃13;

<!-- TheJim01: Adding dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.js"></script>
<input type="button" id="run" value="run" />

＆＃13;

＆＃13;

＆＃13;

我需要旋转红色部分，就像绿色部分一样，但是向左旋转。