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

Posted 2021-05-03

是）我有的：

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_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>

答案

标题问题和解释并不适合我，也许我完全不理解你的问题。我会尝试回答标题问题，并在您的一方做出一些澄清后立即编辑此答案。

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

关于标题问题：

在场景中添加一些内容基本上是绘制它...或者你的意思是别的什么？

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

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