（THREE.js）软件渲染器未在节点中渲染我的场景答案

【问题标题】：(THREE.js) Software Renderer not rendering my scene in Node（THREE.js）软件渲染器未在节点中渲染我的场景
【发布时间】：2017-06-02 23:22:46
【问题描述】：

我正在尝试在 Node.js 领域渲染一些 3d 图形。经过大量的谷歌搜索，我找到了软件渲染器并让它运行，但是我在渲染我的场景时遇到了问题。

问题是我的 3d 对象根本不显示在生成的图像上。我尝试插入 Planes、Spheres、GridHelpers，但没有任何运气 - 真的什么都没有出现。但是，如果我使用 renderer.setClearColor( ) 更改背景颜色，我可以看到应用于图像的新纯色

我使用THREE.WebGLRenderer在浏览器中测试了代码，它工作正常，问题不在于相机定位/等...

这是我的渲染器代码。您可以在 renderFrame 方法中看到我是如何渲染我的THREE.Scene，然后将数据写入我正在服务的新 png：

const THREE = require('three');
const SoftwareRenderer = require('three-software-renderer');
const PNG = require('pngjs').PNG;

let width  = 1024;
let height = 768;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
const renderer = new SoftwareRenderer({
    alpha: false
});
renderer.setSize(width, height);

camera.position.set(0, 600, 500);
camera.lookAt(scene.position);

const box = new THREE.Mesh(
    new THREE.BoxGeometry(20, 20, 20),
    new THREE.MeshBasicMaterial({ color: 0xFFFF00 })
);
scene.add(box);

const renderFrame = (pos) => {

    camera.position.set(pos.x, pos.y, pos.z);
    camera.lookAt(scene.position);

    let imageData = renderer.render(scene, camera);

    let png = new PNG({
        width: width,
        height: height,
        filterType: -1
    });

    for (let i = 0; i < imageData.data.length; i += 1) {
        png.data[i] = imageData.data[i];
    }

    return png;

}

这是我处理请求的 Express 应用程序：

const express = require('express');
const app = express();

const renderer = require('./app/renderer/renderer');

const PORT = process.env.PORT || 1201;

app.use(express.static('app'));

app.route('/').get((req, res) => {
    let renderExport = renderer.renderFrame({
        x: 40, y: 40, z: 30
    });
    //res.writeHead(200, { 'Content-Type': 'image/png' });
    res.setHeader('Content-Type', 'image/png');
    renderExport.pack().pipe(res); 
});

app.listen(PORT, () => { console.log(`App is listening on ${PORT}`) });

我已经用头敲击键盘几个小时了，任何帮助都将不胜感激......

【问题讨论】：

您是否尝试过添加灯光或环境光？

标签： javascript node.js express three.js webgl

【解决方案1】：

这看起来很可疑：camera.lookAt(scene.position);。根据文档Scene 没有position 属性。如果那是undefined，那么这就解释了为什么你的代码不起作用。 WebGLRenderer 和 SoftwareRenderer 可能对未定义的外观有不同的解释。

尝试将外观设置为某个明确的值，例如 (0,0,0)。

【讨论】：