1
Node.jsのランドに3Dグラフィックスをレンダリングしようとしています。グーグル・グーグルの後、私はソフトウェア・レンダラーを見つけて走らせましたが、私は自分のシーンをレンダリングするのに問題があります。（THREE.js）ノードでソフトウェアレンダラーがシーンをレンダリングしない
問題は、私の3Dオブジェクトが単に生成されたイメージに表示されないということです。 Planes、Spheres、GridHelpersを挿入しようとしましたが、実際には何も表示されません。しかし、renderer.setClearColor()を使用して背景色を変更した場合、画像に適用された新しいソリッドカラーが表示されます
ブラウザでコードをテストしたところ、THREE.WebGLRendererを使用して問題なく動作しています。 ..
私のレンダラーコードはここにあります。あなたは私が私のTHREE.Sceneをレンダリングしてから、私は提供しています新しいPNG、にデータを書いていますかrenderFrame方法で見ることができます：
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;
}
そしてここでは、リクエストを処理私エクスプレスアプリです：
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}`) });
私は数時間キーボードから頭を叩いていましたが、どんな助けも高く評価されています。
光や周囲光を追加しようとしましたか？ –