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属性。如果那样undefined那就可以解释为什么你的代码不起作用。很可能是WebGLRenderer和SoftwareRenderer对未定义的外观有不同的解释。

尝试将look-at设置为某个显式值，如（0,0,0）。

（THREE.js）软件渲染器无法在节点

1 个答案: