当相机转动时面对用户的纹理几何
我正在创build这个代表人脉networking的三维graphics。 networking中的节点是人的名字，在它们之间绘制线代表连接。 这个networking的目的是人们可以把它翻过来看看它们的networking是什么样子，但是当我把相机放在networking上的时候，我使用textgeometry创build的三维文本被卡在相同的位置，不幸的是，当用户想从不同的angular度来看待networking时，用户是不可读的。 我知道这个问题之前已经有好几次了，我已经阅读了大部分的答案，但是我仍然无法解决这个问题。
我遇到的问题大多是当我尝试做这样的事情：
nodeRenderer.lookAt(camera.position); 我遇到了相机未定义的问题。 相机被添加到场景，但是这发生在另一个.js文件。 这是场景创build的地方，相机被添加（/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; }
这就是创build节点的地方（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 Rev. 68，Ngraph和node.js.
我只能猜测，因为很多代码丢失了，但是你的createNodeUI返回一个THREE.Mesh ，它是Object3D一个子类，它有函数.lookAt(vector)来把它的本地z轴与给定的vectoralignment。
而你说你收到这个错误： TypeError: nodeUI.lookAt is not a function看起来像你试图调用.lookAt数组而不是节点本身TypeError: nodeUI.lookAt is not a function 。
所以试试nodeUI[node.id].lookAt(camera.position)