如何在 Three.js 中为线条的增长设置动画？

Question

我有什么：

var pointA = new THREE.Vector3(camera_RC_Holder.position.x, camera_RC_Holder.position.y, camera_RC_Holder.position.z);

var direction = camera_RC.position.clone();
direction.applyMatrix4( camera_RC.matrixWorld );
direction.normalize();

var distance = 700;

var pointB = new THREE.Vector3();
pointB.addVectors ( pointA, direction.multiplyScalar( -distance ) );

var geometry = new THREE.Geometry();
geometry.vertices.push( pointA );
geometry.vertices.push( pointB );

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

scene_Main.add( line );

我想要什么：

我正在尝试做的是显示一条光线从相机开始并通过视图体积进行探索。因此，我不想立即创建一条线 (point_A, point_B)，而是希望将线从 point_A 逐个像素地增长，直到它到达目的地 (point_B)。

问题：

如下面代码sn-p所示，如何逐像素绘制线条？？

var w = 200;
var h = 150;
var x;

function setup(){

  createCanvas(w,h);
  x=0;
  y=0;
}

function draw(){
  
  
  if(x>w){
    x = 0;
  }
  background(250);
  line(0,50,x,50); //x1,y1,x2,y2
  x++;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>

Answer 1

标题问题和解释不太适合我，也许我没有完全理解你的问题。我将尝试仅回答标题问题并在您进行一些澄清后立即编辑此答案。

（我也会尽量避免多问。）

关于标题问题：

在场景中添加一些东西基本上就是在绘制它……还是你的意思是别的？

将此代码 sn-p 绑定到您的单击鼠标事件。这将创建您的光线投射，为了看到它，您需要将其添加到您的场景中。之后您可以移动您的相机并查看它的外观：

var material = new THREE.LineBasicMaterial({
    color: 0x0000ff
});
var geometry = new THREE.Geometry();

geometry.vertices.push(new THREE.Vector3(raycaster.ray.origin.x, raycaster.ray.origin.y, raycaster.ray.origin.z));
geometry.vertices.push(new THREE.Vector3(raycaster.ray.origin.x + (raycaster.ray.direction.x * 100000), raycaster.ray.origin.y + (raycaster.ray.direction.y * 100000), raycaster.ray.origin.z + (raycaster.ray.direction.z * 100000)));
var line = new THREE.Line(geometry, material);