javascript - three.js - 样条上的相机没有统一的速度

Question

我用这个很酷的代码笔让我的相机跟随样条线： https ://codepen.io/wiledal/pen/WvNvEq

这很好用，但我想在我的相机移动过程中保持均匀的速度。我使用了CatmullRomCurve3()函数的所有参数，但无济于事。

在下面的示例中，您可以看到它在到达曲线时立即减速。

我应该尝试在我的样条曲线上到处都有相同的点强度吗？如果是这样，我该怎么做？

非常感谢。

    var renderer, scene, camera, spline, camPos, camPosIndex;

                function init(){
                        renderer = new THREE.WebGLRenderer();
			scene = new THREE.Scene();

			renderer.setSize(window.innerWidth, window.innerHeight);
			document.body.appendChild(renderer.domElement);

			const W = window.innerWidth;
			camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, .1, 2000 );
			

			spline = new THREE.CatmullRomCurve3([
				new THREE.Vector3( -70, 9 ),
				new THREE.Vector3( -20, 9 ),
				new THREE.Vector3( -13, 9 ),
				new THREE.Vector3( 13, -9 ),
				new THREE.Vector3( 20, -9 ),
				new THREE.Vector3( 70, -9 ),
			]);


			var points = spline.getPoints(500);

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

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

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

			scene.add(splineObject);

			camPosIndex = 0;
		}
		
		let speed = 1000;
		function update() {
			renderer.render(scene, camera);
			requestAnimationFrame(update);

			camPosIndex++;
			if (camPosIndex > speed) {
			camPosIndex = 0;
			}

			var camPos = spline.getPoint(camPosIndex / speed);
			var camRot = spline.getTangent(camPosIndex / speed);

			camera.position.x = camPos.x;
			camera.position.y = camPos.y;
			camera.position.z = camPos.z + 40; // so I can watch my spline

			camera.rotation.x = camRot.x;
			camera.rotation.y = camRot.y;
			camera.rotation.z = camRot.z;

			camera.lookAt(spline.getPoint((camPosIndex+1) / speed));
		}

		init();
		update();

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>

标签： javascriptthree.js