Three.js - 在相机方向和球体的交点处绘制一个大点

Question

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

我的灵感来自this link。

你可以在this link上查看我的结果

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

这是这部分代码：

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 方法和three.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/]