Articles of three.js

Three.js场景stringify失败

将three.js编辑器场景对象string化失败,出现Range错误 – 无效的string长度。 所以我们尝试获取场景对象的键,并将它们分别串化,并尝试使用WebSockets将其发送到服务器,但是失败,最大有效载荷大小超出了错误。将这个巨大场景对象发送到服务器的任何帮助将不胜感激

JSONLoader在node.js上有三个

我需要在我的node.js服务器上使用three.js来控制玩家的位置和碰撞(我试图制作一个video游戏)。 要在nodejs上使用三个,我已经安装了“npm install three”,这是可行的。 但是当我想调用JSONLoader时,我不能。 我的课,我补充说: var THREE =require('three'); //or require('three/three.js'); var JSON=require('three/src/loaders/JSONLoader.js'); 要么 require('three'); //or require('three/three.js'); var JSON=require('three/src/loaders/JSONLoader.js'); 同样,我有一个错误,“三不明确”,我不明白为什么? 为了解决这个错误,我把JSON代码放在three.js文件中,但是当我加载json的时候,我发现了另一个问题: var loader = new THREE.JSONLoader(); loader.load(__dirname + '/public/js/essai/test.dae',function ( collada ){ … }); Error : XMLHttpRequest is not defined. 我想,我没有正确使用,但我不明白我的错在哪里? 你能帮我吗? 非常感谢你。

与jsdom一起使用WebGLRenderer()时出错

我试图在服务器端渲染一个多维数据集,并能够使用CanvasRenderer,但我想能够使用WebGLRenderer,它应该产生更好的结果。 我已经缩小到这个代码片段: var jsdom = require('jsdom') , document = jsdom.jsdom('<!doctype html><html><head></head><body></body></html>') , window = document.createWindow() , THREE = require('three'); document.onload = docOnLoad(); function docOnLoad() { console.log("docOnLoad called."); global.document = document; global.window = window; //renderer = new THREE.CanvasRenderer(); //works renderer = new THREE.WebGLRenderer(); renderer.setSize(400, 400); document.body.appendChild(renderer.domElement); } 当使用WebGLRenderer时,我得到: _glExtensionTextureFloat = _gl.getExtension( 'OES_texture_float'); ^ TypeError: Cannot call […]

当相机转动时面对用户的纹理几何

我正在创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 = […]

如何呈现three.js服务器端?

我如何渲染three.js服务器端? 目前,我们的网站在本地使用three.js渲染玩家头像,但是这些安全性问题以及与低端计算机的人们的潜在错误(人们可以将代码注入到控制台中,并让渲染神知道什么……) 我看着使用node.js,但所有的文件是模糊的,似乎是相当过时.. 任何帮助将是有用的 当前本地: http : //pastebin.com/yv5Qamfz

节点npm – 在前端引用three.js模块

我目前正在使用节点npm来pipe理前端的jQuery的依赖关系。 使用以下方法。 服务器(工作) app.use('/jquery', express.static(__dirname + '/node_modules/jquery/dist/')); 客户(工作) <script src="/jquery/jquery.js"></script> 这工作,但我希望能够从服务器端pipe理依赖项“three.js”。 就像是… 服务器(不工作) app.use('/three', express.static(__dirname + '/node_modules/three/dist/')); 客户端(不工作) <script src="/three/three.js"></script> 错误() 服务器未能加载状态为404的服务器(未find) 我怎样才能findnpm模块的目录结构?

使用Node在THREE.js中加载纹理

我正在尝试构build一个使用3D进行image processing的Messenger软件,并返回一个全新的图像。 我使用THREE.CanvasRenderer和我的应用程序托pipe在Heroku上。 当一个用户/ POST附件到我的webhook,我想采取新创build的图像的url,并将其插入到我的3D场景。 这是我的代码(使用节点 – canvas库): const addTexture = (imageUrl) => { request({ uri: imageUrl, method: 'GET' }, (err, res, body) => { let image = new Canvas.Image(); image.src = body; mesh.material.map = new THREE.Texture(image); mesh.material.needsUpdate = true; }); } callback得到运行,我实际上可以console.log()图像的内容,但没有出现在场景中 – 我应该渲染的飞机只是变黑,没有任何错误…我在这里错过了什么? 我也尝试了其他几种方式,没有任何成功 我尝试使用THREE.TextureLoader并使用jsdom(模拟document , window )和node-xmlhttprequest ,但随后出现load事件(event.target未定义…)的错误。就像本示例 应该如何解决这个问题呢? 我有一个由Facebook生成的url ,我想从它下载图像,并将其放置在我的场景?

ThreeJS,Websockets和NodeJS客户端/服务器实验

我正在用socket.io,ThreeJS,Javascript和NodeJS来创build一个简单的使用ThreeJSgraphics的客户端/服务器。 我不确定所有这些框架是否能够一起工作,但是我决定给它一个镜头,因为我之前在网上看到过类似的例子,尽pipe我找不到一个简单的解剖或试验的例子。 这主要是为了尝试,但我也想做一个小小的概念游戏来certificate我迄今为止学到的东西。 我在这里发布我的代码: https : //gist.github.com/netsider/63c414d83bd806b4e7eb 对不起,如果有点不整洁,但我尽我所能使它尽可能可读。 基本上,现在服务器端NodeJS脚本似乎运行良好(运行“node server-alpha.js”),客户端脚本(客户端alpha.html,您可以在浏览器中打开)连接到服务器,并显示用户列表(也连接)。 然而,我的意图是让每个用户能够移动他/她自己的立方体,现在每个立方体只能被添加到屏幕上(而不是被添加,减去,然后再添加 – 以给出运动的幻觉)。 如果您运行这两个代码段并连接一个或两个用户,并为每个用户移动箭头键几次,您将看到我在说什么。 有人可以帮我吗? 我尝试了几种不同的方法来删除多维数据集(并记住要在每个之后调用render())…但是我尝试的所有东西似乎都不起作用。 它总是导致立方体被添加到屏幕上,并且不会被减去。 我在代码中添加了一些注释,让事情变得简单一些,因为我知道这是相当多的代码(如果它不是你自己的)。 谢谢,任何帮助将不胜感激…因为我真的坚持试图使立方体移动。 此外,我无法添加Fly-Controls(FlyControls.js – 它被注释掉ATM),所以如果有人能告诉我我错了什么地方,我也会很感激。

在Node中使用JSONLoader时未定义XMLHttpRequest

我正在用Three.js写一个游戏,作为一个多人游戏,我需要在服务器端validation客户的位置以防止作弊。 我目前正在尝试在服务器上加载模型,如下所示: var THREE = require("three"); var loader = new THREE.JSONLoader(); loader.load( './models/tree.json', function ( geometry, materials ) { var mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) ); res.send(mesh); }); 但是,服务器死亡并吐出 var request = new XMLHttpRequest(); ReferenceError: XMLHttpRequest is not defined at FileLoader.load 这个请求来自node_modules\three\build\three.js:29258 ,在这里产生一个XMLHttpRequest 。 为什么发生这种情况? 我做错了什么,或者是这个Three.js的部分打破了节点?

将大型json模型加载到three.js应用程序中

我正在尝试将构build模型加载到three.js中。 模型的格式是由RvtVa3c生成的JSON文件,它是Revit生成JSON输出的附件。 然后,我使用THREE.ObjectLoader()将模型加载到three.js中,就像本例中的json loader three.js一样 。 一切都很好,模型的大小低于100MB。 当我试图加载一个200MB的模型时,Chrome会抛出“Aw,snap”的错误页面。 而且Firefox会引发分配大小溢出。 因为THREE.ObjectLoader()使用XHR将json文件一次读入String,我猜String的大小对于java脚本来说是很大的。 String的长度超过2亿,JSON为100MB。 所以我正在寻求通过stream加载JSON文件的方式。 Node.js中的JSONStream可以处理200MB的JSON。 代码示例如下所示。 var fs = require('fs'), JSONStream = require('JSONStream'), es = require('event-stream'); var getStream = function () { var jsonData = 'buildingModel.js', stream = fs.createReadStream(jsonData, {encoding: 'utf8'}), parser = JSONStream.parse('*'); return stream.pipe(parser); }; getStream() .pipe(es.mapSync(function (data) { console.log(data); })); 由于浏览器不能使用require(/module/) 。 我试着用JSONStream把JSONStream捆绑到我的代码中。 但是, […]