使用补间

Question

抱歉问这个，但我正在失去理智。

在three.js场景的上下文中，我使用以下代码构建了一个多维数据集。

var gcap = new THREE.BoxGeometry( 10, 10, 1, 2, 2, 2 ); 
mcap = new THREE.MeshBasicMaterial( { color: 0x3182bd, wireframe: false, transparent: true, opacity: 0.5} ); 

cap = new THREE.Mesh( gcap, mcap ); 
cap.position.set( - 12, 19, 0 );
gcap.center();
cap.rotation.z = (28 * Math.PI)/180; //convert to radians
app.scene.add(cap);

那么为什么这个补间不起作用（而且不工作我的意思是场景中没有明显的变化）：

new TWEEN.Tween(cap.position)
      .to(-12, 19, 100 ).start();

但是这个确实：

        new TWEEN.Tween(app.controls.target).to({
             x: 31/2,
             y: 29/2,
             z: 11/2
         }).start();

我意识到这可能是一个非常愚蠢的问题，但我对补间（并且通常是三个.js）很新。

Answer 1

在.to()中，您必须完全或部分传递与.Tween()中传递的结构相同的对象。这取决于您想要更改的对象的值。

.to()中的第二个参数是持续时间。

＆＃13;

＆＃13;

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var box1 = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial({
  color: "red",
  wireframe: true
}));
box1.position.set(-3, 0, 0);
scene.add(box1);
var box2 = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial({
  color: "blue",
  wireframe: true
}));
box2.position.set(3, 0, 0);
scene.add(box2);

var tween1 = new TWEEN.Tween(box1.position) // here you pass the position {x, y, z}
  .to({ // here you pass an object with properties you want to change (now you want to change all of them)
    x: 1,
    y: 3,
    z: -2
  }, 2000).delay(500).repeat(Infinity).yoyo(true).start();

var tween2 = new TWEEN.Tween(box2.position) // the same, position {x, y, z}
  .to({ // but you want to change only y-coordinate, so you pass an object of {y}
    y: 3
  }, 1000).delay(500).repeat(Infinity).yoyo(true).start();



render();

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

＆＃13;

body {
  overflow: hidden;
  margin: 0;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/90/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.min.js"></script>

＆＃13;

＆＃13;

＆＃13;