Question

我尝试在three.js的球体上绘制一个点（大小可见）。此点位于从相机开始的线与球体之间的交点处。

我的灵感来自this link。

上查看结果

如您所见，我隐藏了在drawPointIntersection()函数之后调用的render()函数。这是在这个函数中，我指示这一点。

这是代码的这一部分：

function drawPointIntersection() {

  // Direction of camera
  var direction = new THREE.Vector3(0, 0, -1);
  var startPoint = camera.position.clone();
  var ray = new THREE.Raycaster(startPoint, direction);  

  // Get point of camera direction  projected on sphere
  var rayIntersects = ray.intersectObject(scene, true);

  // Distance between camera and projected point
  console.log(rayIntersects[0]);

  // Draw point of camera direction on sphere
  var dotGeometry = new THREE.Geometry();

  // Looking for right syntax with coordinates of intersection point

  //dotGeometry.vertices.push(new THREE.Vector3(0, 0, 0));
  dotGeometry.vertices.push(new THREE.Vector3(rayIntersects[1]);
  //dotGeometry.vertices.push(new THREE.Vector3(rayIntersects.point.x, rayIntersects.point.y, rayIntersects.point.z);

  var dotMaterial = new THREE.PointsMaterial({size: 10, sizeAttenuation: false});
  var dot = new THREE.Points(dotGeometry, dotMaterial);
  scene.add(dot);
}

正如您所看到的，我尝试使用不同的语法来获取ray.intersectObject(scene, true)返回的点的坐标，但都不起作用：

   dotGeometry.vertices.push(new THREE.Vector3(0, 0, 0));

   dotGeometry.vertices.push(new THREE.Vector3(rayIntersects[1]);

   dotGeometry.vertices.push(new THREE.Vector3(rayIntersects.point.x, rayIntersects.point.y, rayIntersects.point.z);

我让你注意到相机在球体周围旋转。

我不知道为什么它不起作用，如果有人可以告诉我如何获得这些坐标以便使用THREE.Points方法在三维上绘制球体上的点.js R75

提前致谢

Answer 1

你在每一帧都改变了相机的位置，所以错误的方向向量。试试这个：

// Camera position
var startPoint = camera.position.clone();

// Direction of camera
var direction = sphere.position.clone().sub(startPoint).normalize();

只需看一下目标物体（球体）的交叉点：

var rayIntersects = ray.intersectObject(sphere, true);

[https://jsfiddle.net/3wm9c0jf/]

Three.js - 在摄像机方向和球体

1 个答案: