Question

随着时间的推移，我尝试在Three.js中为2D曲线设置动画。我需要4个以上的控制点，所以我不使用贝塞尔曲线。我基于SplineCurve创建了Three.Line。

如果我记录我的线的geometry.vertices位置，它们会随着时间而变化，但是geometry.attributes.position保持不变。是否可以根据曲线动画对线进行动画处理？我设法用Bezier曲线做到了这一点，但是用SplineCurve找不到方法。谢谢您的帮助，这是我的代码：

首先，我创建一行：

var curve = new THREE.SplineCurve( [
                new THREE.Vector3( -10, 0, 10 ),
                new THREE.Vector3( -5, 5, 5 ),
                new THREE.Vector3( 0, 0, 0 ),
                new THREE.Vector3( 5, -5, 5 ),
                new THREE.Vector3( 10, 0, 10 )
            ] );

            var points = curve.getPoints( 50 );

            var geometry = new THREE.BufferGeometry().setFromPoints( points );

            var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );

            // Create the final object to add to the scene
            curveObject = new THREE.Line( geometry, material );

            scene.add( curveObject );

            curveObject.curve = curve;

然后我尝试更新它：

curveObject.curve.points[0].x += 1;

curveObject.geometry.vertices = curveObject.curve.getPoints( 50 );
curveObject.geometry.verticesNeedUpdate = true;
curveObject.geometry.attributes.needsUpdate = true;

Answer 1

您可以这样做：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, 1, 1, 1000);
camera.position.set(8, 13, 25);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
var canvas = renderer.domElement;
document.body.appendChild(canvas);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.GridHelper(20, 40));

var curve = new THREE.CatmullRomCurve3([
  new THREE.Vector3(-10, 0, 10),
  new THREE.Vector3(-5, 5, 5),
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(5, -5, 5),
  new THREE.Vector3(10, 0, 10)
]);

var points = curve.getPoints(50);

var geometry = new THREE.BufferGeometry().setFromPoints(points);

var material = new THREE.LineBasicMaterial({
  color: 0x00ffff
});

var curveObject = new THREE.Line(geometry, material);

scene.add(curveObject);

var clock = new THREE.Clock();
var time = 0;

render();

function resize(renderer) {
  const canvas = renderer.domElement;
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;
  const needResize = canvas.width !== width || canvas.height !== height;
  if (needResize) {
    renderer.setSize(width, height, false);
  }
  return needResize;
}

function render() {
  if (resize(renderer)) {
    camera.aspect = canvas.clientWidth / canvas.clientHeight;
    camera.updateProjectionMatrix();
  }
  renderer.render(scene, camera);

  time += clock.getDelta();

  curve.points[1].y = Math.sin(time) * 2.5;

  geometry = new THREE.BufferGeometry().setFromPoints(curve.getPoints(50));

  curveObject.geometry.dispose();
  curveObject.geometry = geometry;


  requestAnimationFrame(render);
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

canvas {
  width: 100%;
  height: 100%;
  display;
  block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/97/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Three.js动画曲线

1 个答案: