如何在node.js中渲染three.js?

时间:2022-05-12 06:08:21

How do I render three.js code in node.js?

如何在node.js中渲染three.js代码?

I'd like to export from blender, then open the export through fs and render a scene with it.

我想从blender导出,然后通过fs打开导出并用它渲染一个场景。

3 个解决方案

#1


18  

This is kind of a smelly implementation, but the key parts to remember are the part where the geometry is created, everything else is pretty straightforward. I'm mostly putting this here for my own reference later, but it does work and it's cool to have 3d rendering in nodejs. oh yea it requires canvas to work too.

这是一种有臭味的实现,但要记住的关键部分是创建几何体的部分,其他一切都非常简单。我主要是把它放在这里供我自己参考,但它确实有用,在nodejs中进行3d渲染很酷。哦,是的,它也需要帆布才能工作。

it relies on three.js npm module https://github.com/uniba/node-three.js

它依赖于three.js npm模块https://github.com/uniba/node-three.js

fs = require("fs")

THREE = require("three.js")
join = require("path").join

app.get '/test/top_:top_id/side_:side_id/x_:x/y_:y.jpg', (req, res, next) =>

  width = 660
  height = 500

  camera = new THREE.PerspectiveCamera(50, width / height, 1, 1000)
  scene = new THREE.Scene()
  renderer = new THREE.CanvasRenderer( )
  renderer.setSize width, height

  camera.position.z = 100

  camera_container = new THREE.Object3D
  scene.add camera_container
  camera_container.add camera

  camera.position.z = 75

  # We have one background plane
  plane_image = new Image
  plane_image.src = fs.readFileSync TOP_DIR + "public/images/vtx_logo.jpg"
  texture = new THREE.Texture plane_image, new THREE.UVMapping()
  texture.needsUpdate = true

  loader = new THREE.JSONLoader()

  geometry = new THREE.PlaneGeometry(200, 200)
  material = new THREE.MeshBasicMaterial
    color       : 0x698144
    #shading        : THREE.SmoothShading
    map     : texture
    overdraw: true
  plane = new THREE.Mesh geometry, material
  plane.position.z = -50
  plane.position.y = -4
  plane.position.x = 4.5

  # We also have an object in the foreground
  scene.add plane
  geometry = false
  loader.createModel JSON.parse(fs.readFileSync(TOP_DIR + 'public/blender_export.json')), (done) =>
    geometry = done

  # Imager.texture gives us a canvas based on some code that grabs specific info
  texture = new THREE.Texture (Imager.texture req.params.side_id, req.params.top_id), new THREE.UVMapping()
  texture.needsUpdate = true

  material = new THREE.MeshBasicMaterial
    color: 0xaaaaaa
    map: texture
    overdraw: true
  mesh = new THREE.Mesh geometry, material

  mesh.rotation.x = parseFloat req.params.x
  mesh.rotation.y = parseFloat req.params.y

  scene.add mesh
  mesh.dynamic = true
  renderer.render scene, camera

  renderer.domElement.toBuffer (err, buf) ->
    res.contentType 'image/jpg'
    res.send buf

If you get an error cannot find ./lib/Three:

如果你得到一个错误找不到./lib/Three:

The three.js module I mentioned might point to an old version of three internally. I remember having to go into the module and edit a file that require('./lib/Three') to require('./lib/three'). I guess he included a non specific three in his package.json, so it got updated without his npm module being updated.. could be fixed by now

我提到的three.js模块可能在内部指向旧版本的三个。我记得必须进入模块并编辑一个需要('。/ lib / Three')要求的文件('。/ lib / three')。我猜他在package.json中包含了一个非特定的三个,所以它更新后没有更新他的npm模块..现在可以修复

#2


0  

I don't see any reason why you couldn't use something like electron, which allows you to create desktop apps and implement node.js in them. This isn't an exact answer to the question, but for the sake of people looking for something like this, I will post this answer

我没有看到任何你不能使用像电子这样的东西的原因,它允许你创建桌面应用程序并在其中实现node.js。这不是问题的确切答案,但为了寻找这样的事情,我会发布这个答案

#3


-12  

You should not run code for visuals on the server really, if you are doing computationally expensive stuff on the server you will need to be prepared to put a considerable buk into those. What you need is to delegate exporting and rendering to the client machines.

您不应该在服务器上运行可视化代码,如果您在服务器上执行计算成本高昂的东西,则需要准备好对这些内容进行大量修改。您需要的是将导出和呈现委托给客户端计算机。

#1


18  

This is kind of a smelly implementation, but the key parts to remember are the part where the geometry is created, everything else is pretty straightforward. I'm mostly putting this here for my own reference later, but it does work and it's cool to have 3d rendering in nodejs. oh yea it requires canvas to work too.

这是一种有臭味的实现,但要记住的关键部分是创建几何体的部分,其他一切都非常简单。我主要是把它放在这里供我自己参考,但它确实有用,在nodejs中进行3d渲染很酷。哦,是的,它也需要帆布才能工作。

it relies on three.js npm module https://github.com/uniba/node-three.js

它依赖于three.js npm模块https://github.com/uniba/node-three.js

fs = require("fs")

THREE = require("three.js")
join = require("path").join

app.get '/test/top_:top_id/side_:side_id/x_:x/y_:y.jpg', (req, res, next) =>

  width = 660
  height = 500

  camera = new THREE.PerspectiveCamera(50, width / height, 1, 1000)
  scene = new THREE.Scene()
  renderer = new THREE.CanvasRenderer( )
  renderer.setSize width, height

  camera.position.z = 100

  camera_container = new THREE.Object3D
  scene.add camera_container
  camera_container.add camera

  camera.position.z = 75

  # We have one background plane
  plane_image = new Image
  plane_image.src = fs.readFileSync TOP_DIR + "public/images/vtx_logo.jpg"
  texture = new THREE.Texture plane_image, new THREE.UVMapping()
  texture.needsUpdate = true

  loader = new THREE.JSONLoader()

  geometry = new THREE.PlaneGeometry(200, 200)
  material = new THREE.MeshBasicMaterial
    color       : 0x698144
    #shading        : THREE.SmoothShading
    map     : texture
    overdraw: true
  plane = new THREE.Mesh geometry, material
  plane.position.z = -50
  plane.position.y = -4
  plane.position.x = 4.5

  # We also have an object in the foreground
  scene.add plane
  geometry = false
  loader.createModel JSON.parse(fs.readFileSync(TOP_DIR + 'public/blender_export.json')), (done) =>
    geometry = done

  # Imager.texture gives us a canvas based on some code that grabs specific info
  texture = new THREE.Texture (Imager.texture req.params.side_id, req.params.top_id), new THREE.UVMapping()
  texture.needsUpdate = true

  material = new THREE.MeshBasicMaterial
    color: 0xaaaaaa
    map: texture
    overdraw: true
  mesh = new THREE.Mesh geometry, material

  mesh.rotation.x = parseFloat req.params.x
  mesh.rotation.y = parseFloat req.params.y

  scene.add mesh
  mesh.dynamic = true
  renderer.render scene, camera

  renderer.domElement.toBuffer (err, buf) ->
    res.contentType 'image/jpg'
    res.send buf

If you get an error cannot find ./lib/Three:

如果你得到一个错误找不到./lib/Three:

The three.js module I mentioned might point to an old version of three internally. I remember having to go into the module and edit a file that require('./lib/Three') to require('./lib/three'). I guess he included a non specific three in his package.json, so it got updated without his npm module being updated.. could be fixed by now

我提到的three.js模块可能在内部指向旧版本的三个。我记得必须进入模块并编辑一个需要('。/ lib / Three')要求的文件('。/ lib / three')。我猜他在package.json中包含了一个非特定的三个,所以它更新后没有更新他的npm模块..现在可以修复

#2


0  

I don't see any reason why you couldn't use something like electron, which allows you to create desktop apps and implement node.js in them. This isn't an exact answer to the question, but for the sake of people looking for something like this, I will post this answer

我没有看到任何你不能使用像电子这样的东西的原因,它允许你创建桌面应用程序并在其中实现node.js。这不是问题的确切答案,但为了寻找这样的事情,我会发布这个答案

#3


-12  

You should not run code for visuals on the server really, if you are doing computationally expensive stuff on the server you will need to be prepared to put a considerable buk into those. What you need is to delegate exporting and rendering to the client machines.

您不应该在服务器上运行可视化代码,如果您在服务器上执行计算成本高昂的东西,则需要准备好对这些内容进行大量修改。您需要的是将导出和呈现委托给客户端计算机。