我正在创建代表人员网络的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。
我只能猜测,因为缺少很多代码,但是您createNodeUI
返回的aTHREE.Mesh
是其子类Object3D
,具有.lookAt(vector)
将其局部z轴与给定向量对齐的功能。
您说您收到此错误:TypeError: nodeUI.lookAt is not a function
看起来您正在尝试调用.lookAt
数组而不是节点本身。
所以尝试 nodeUI[node.id].lookAt(camera.position)
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句