如何为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）。

问题：

如下面的代码片段所示，如何逐像素绘制线条？

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

标题的问题和解释不太适合我，也许我不太了解您的问题。一旦您做出一些澄清，我将尝试仅回答标题问题并编辑此答案。

（另外，我总是会尽量避免出现多个问题。）

关于标题的问题：

在场景中添加一些东西基本上就是在绘制它……还是您有其他意思？

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

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);