javascript - (THREE.js) 软件渲染器未在 Node 中渲染我的场景

Question

我正在尝试在 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}`) });

我已经用头撞键盘几个小时了，非常感谢任何帮助......

Answer 1

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

尝试将查看设置为某个显式值，例如 (0,0,0)。