相机转动时面向用户的文本几何

Question

我正在创建这个代表人际网络的 3d 图。网络中的节点是人名，节点之间画线代表连接。这个网络的目的是人们可以把它转过来看看他们的网络是什么样子的，但是，当我把相机转过来网络时，我用 textgeometry 创建的 3d 文本被卡在了同一个位置并且不幸的是，当用户想从不同的角度看网络时，他们无法阅读。我知道这个问题已经被问过好几次了，我已经阅读了这里的大部分答案，但我仍然无法解决这个问题。
我遇到的最多的问题是，当我尝试做这样的事情时：

nodeRenderer.lookAt(camera.position);

我遇到相机未定义的问题。相机被添加到场景中，但这发生在不同的 .js 文档中。这是创建场景和添加相机的地方 (/ngraph.three/index.js):

var THREE = require('./lib/three');

module.exports = function (graph, settings) {
  var merge = require('ngraph.merge');
  settings = merge(settings, {
    interactive: true
  });

  var beforeFrameRender;
  var isStable = false;
  var disposed = false;
  var layout = createLayout(settings);
  var renderer = createRenderer(settings);
  var camera = createCamera(settings);
  var scene = settings.scene || new THREE.Scene();

  (...)

  function renderNode(nodeId) {
     nodeRenderer(nodeUI[nodeId]);
  }

  (...)

 function initNode(node) {
     var ui = nodeUIBuilder(node);
     if (!ui) return;
     // augment it with position data:
     ui.pos = layout.getNodePosition(node.id);
     // and store for subsequent use:
     nodeUI[node.id] = ui;

     scene.add(ui);
 }

 (...)

 function createCamera(settings) {
     if (settings.camera) {
       return settings.camera;
     }
     var container = renderer.domElement;
     var camera = new THREE.PerspectiveCamera(75, container.clientWidth/container.clientHeight, 0.1, 3000);
     camera.position.z = 400;

     return camera;
 }

这是创建节点的地方 (ngraph.three/lib/defaults.js):

var THREE = require('./three');

module.exports.createNodeUI = createNodeUI;
module.exports.createLinkUI = createLinkUI;
module.exports.nodeRenderer = nodeRenderer;
module.exports.linkRenderer = linkRenderer;

function createNodeUI(node) {
  var nodeMaterial = new THREE.MeshFaceMaterial( [
     new THREE.MeshPhongMaterial( { color: 0x00cccc, shading: THREE.FlatShading } ), // front
     new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.SmoothShading } ) // side
  ] );

  var nodeGeometry = new THREE.TextGeometry( node.data, { size: 5, height: 2, curveSegments: 6, font: "helvetiker", weight: "normal", style: "normal" });
  var nodeDirection = new THREE.Quaternion (THREE.Camera.Quaternion);

  return new THREE.Mesh(nodeGeometry, nodeMaterial);
}

function createLinkUI(link) {

  var linkGeometry = new THREE.Geometry();
  linkGeometry.vertices.push(new THREE.Vector3(0, 0, 0));
  linkGeometry.vertices.push(new THREE.Vector3(0, 0, 0));

  var linkMaterial = new THREE.LineBasicMaterial({ color: 0x00cccc });
  return new THREE.Line(linkGeometry, linkMaterial);
}

(...)

function nodeRenderer(node) {
    node.position.x = node.pos.x;
    node.position.y = node.pos.y;
    node.position.z = node.pos.z;
}

(...)

我在 /ngraph.three/index.js 中尝试了 ui.quaternion = camera.quaternion;，但这没有做任何事情，并且我试过 nodeUI.lookAt(camera.position); 但这给出了一个错误： TypeError: nodeUI.lookAt is not a function.

PS：我正在使用 Three.js Rev. 68、Ngraph 和 node.js。

Answer 1

我只能猜测，因为缺少很多代码，但是您的 createNodeUI returns 一个 THREE.Mesh 是 Object3D 的子类，具有函数 .lookAt(vector) 将其局部 z 轴与给定向量对齐。

并且您说您收到此错误：TypeError: nodeUI.lookAt is not a function 看起来您正在尝试调用数组的 .lookAt 而不是节点本身。

所以尝试 nodeUI[node.id].lookAt(camera.position)

相机转动时面向用户的文本几何

Textgeometry facing user when camera turns

javascript

node.js

three.js