相机转动时面对用户的文字几何

Leafeeeh

我正在创建代表人员网络的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;
}

(...)

我尝试了ui.quaternion = camera.quaternion; 在/ngraph.three/index.js中,但这没有做任何事情,我已经尝试过nodeUI.lookAt(camera.position);。但这给出了一个错误:TypeError:nodeUI.lookAt不是一个函数

PS:我正在使用Three.js修订版68,Ngraph和node.js。

xoryouyou

我只能猜测,因为缺少很多代码,但是您createNodeUI返回的aTHREE.Mesh是其子类Object3D,具有.lookAt(vector)将其局部z轴与给定向量对齐的功能

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

相机转动时面对用户的文字几何

来自分类Dev

WPF几何旋转动画

来自分类Dev

立体相机几何

来自分类Dev

立体相机几何

来自分类Dev

iOS - MapKit 相机旋转动画

来自分类Dev

照相机移动时,Three.js r73合并球体几何消失

来自分类Dev

拍摄图像时在相机上绘制文字

来自分类Dev

ThreeJS:在y轴上旋转以面对相机

来自分类Dev

始终面对相机的着色器纹理

来自分类Dev

如何强制用户在拍照时使用“方形”相机滤镜

来自分类Dev

午餐时如何要求用户打开相机权限

来自分类Dev

在用户打开相机拍照时在屏幕中添加图片

来自分类Dev

iOS 7创建翻转动画,例如在本机相机应用中旋转动画

来自分类Dev

使用UIIMagePickerController通过相机拍照时,更改按钮的文字

来自分类Dev

旋转相机使其面对物体,而不会弄乱纬度值

来自分类Dev

渲染激光束-如何使其面对相机?

来自分类Dev

Unity-如何使对象始终面对移动的相机?

来自分类Dev

着色器可以旋转形状以面对相机吗?

来自分类Dev

SceneKit,在相机方向和几何形状之间进行“命中”测试

来自分类Dev

用户捕获图像时,如何检查当前在 android 中打开的相机 ID(主要或次要)?

来自分类Dev

在Android中为设置“ z”索引或相机的Fragment事务翻转动画

来自分类Dev

libGDX使用贴花的3D面对照相机绘制文本

来自分类Dev

旋转弹丸精灵以面对倾斜的相机及其飞行的目标。二维自上而下

来自分类Dev

C#和Unity 3D:当用户移动鼠标时,如何使相机在对象周围移动

来自分类Dev

CSS3旋转动画:悬停时旋转

来自分类Dev

单击相同元素时如何反转动画

来自分类Dev

当prop是错误样式的组件时如何反转动画

来自分类Dev

我着陆时仍会播放跳转动画

来自分类Dev

CSS旋转动画悬停时出现毛刺

Related 相关文章

  1. 1

    相机转动时面对用户的文字几何

  2. 2

    WPF几何旋转动画

  3. 3

    立体相机几何

  4. 4

    立体相机几何

  5. 5

    iOS - MapKit 相机旋转动画

  6. 6

    照相机移动时,Three.js r73合并球体几何消失

  7. 7

    拍摄图像时在相机上绘制文字

  8. 8

    ThreeJS:在y轴上旋转以面对相机

  9. 9

    始终面对相机的着色器纹理

  10. 10

    如何强制用户在拍照时使用“方形”相机滤镜

  11. 11

    午餐时如何要求用户打开相机权限

  12. 12

    在用户打开相机拍照时在屏幕中添加图片

  13. 13

    iOS 7创建翻转动画,例如在本机相机应用中旋转动画

  14. 14

    使用UIIMagePickerController通过相机拍照时,更改按钮的文字

  15. 15

    旋转相机使其面对物体,而不会弄乱纬度值

  16. 16

    渲染激光束-如何使其面对相机?

  17. 17

    Unity-如何使对象始终面对移动的相机?

  18. 18

    着色器可以旋转形状以面对相机吗?

  19. 19

    SceneKit,在相机方向和几何形状之间进行“命中”测试

  20. 20

    用户捕获图像时,如何检查当前在 android 中打开的相机 ID(主要或次要)?

  21. 21

    在Android中为设置“ z”索引或相机的Fragment事务翻转动画

  22. 22

    libGDX使用贴花的3D面对照相机绘制文本

  23. 23

    旋转弹丸精灵以面对倾斜的相机及其飞行的目标。二维自上而下

  24. 24

    C#和Unity 3D:当用户移动鼠标时,如何使相机在对象周围移动

  25. 25

    CSS3旋转动画:悬停时旋转

  26. 26

    单击相同元素时如何反转动画

  27. 27

    当prop是错误样式的组件时如何反转动画

  28. 28

    我着陆时仍会播放跳转动画

  29. 29

    CSS旋转动画悬停时出现毛刺

热门标签

归档