如何在 node.js 中渲染三个.js? [英] How do I render three.js in node.js?

问题描述

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

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

我想从 Blender 导出，然后通过 fs 打开导出并用它渲染场景.

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

推荐答案

这是一个很糟糕的实现，但要记住的关键部分是创建几何图形的部分，其他一切都非常简单.我主要是把它放在这里供我以后参考，但它确实有效，而且在 nodejs 中进行 3d 渲染很酷.哦，是的，它也需要画布才能工作.

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.

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

it relies on three.js npm module 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

如果出现错误cannot find ./lib/Three:

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

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

这篇关于如何在 node.js 中渲染三个.js?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！