I use nw.js and I open a new window first like so:
global.stuff.renderWindow = gui.Window.open('render.html',{
frame:true,
icon: "c3dicon.png",
"always_on_top": false,
title: 'Render',
position: 'center',
width: global.stuff.config.renderCameraWidth,
height: global.stuff.config.renderCameraHeight,
show: true
}, function(new_win){
new_win.on('loaded', function(){
new_win.window.render.cam = el.value;
new_win.window.render.mainWindow = mainwin;
new_win.window.render.init();
});
});
In the render.html…
<body>
<div id="renderDiv" class="bgChecker"></div>
<input type="file" id="saveRender" nwsaveas accept=".png" onchange="render.save(this)" style="display:none;">
<button onclick="render.saveRender()" class="rounded" style="position:absolute; top: 4px; left: 4px;">Save</button>
</body>
<script type="module">
import * as THREE from './build/three.module.js';
window.THREE = THREE;
</script>
<script type="text/javascript" src="render.js" defer></script>
and in the render.js…
var render = new renderData();
function renderData(){
this.cam; //the ID of the camera we will be rendering
this.renderer = new THREE.WebGLRenderer( { alpha: true } );
this.camera = null;
this.cameraP = new THREE.PerspectiveCamera();
this.cameraO = new THREE.OrthographicCamera();
this.mainWindow = null;
this.renderDiv = null;
this.imageData; //used for saving out the render
this.init = function(){
this.renderer.autoClear = false;
this.renderDiv = document.getElementById("renderDiv");
this.renderDiv.style.width = global.stuff.config.renderCameraWidth + 'px';
this.renderDiv.style.height = global.stuff.config.renderCameraHeight + 'px';
var w = global.stuff.config.renderCameraWidth, h = global.stuff.config.renderCameraHeight;
this.renderer.setSize( w, h );
this.renderDiv.appendChild(this.renderer.domElement);
if(this.cam == 'Default'){
if(global.stuff.camera.activeCamera.inOrthographicMode) this.camera = this.cameraO;
else this.camera = this.cameraP;
this.camera.copy(global.stuff.camera.activeCamera);
}else{
this.cam = parseInt(this.cam);
for(var i=0; i<global.stuff.camera.cam.length; i++){
if(global.stuff.camera.cam[i].helper.id == this.cam){
if(global.stuff.camera.cam[i].helper.camera.type == 'PerspectiveCamera') this.camera = this.cameraP;
else this.camera = this.cameraO;
this.camera.copy(global.stuff.camera.cam[i].helper.camera);
}
}
}
this.camera.aspect = w / h;
if(this.camera.type == 'OrthographicCamera'){
var ratioWidth = w / this.mainWindow.window.innerWidth;
var ratioHeight = h / this.mainWindow.window.innerHeight;
this.camera.left *= ratioWidth;
this.camera.right *= ratioWidth;
this.camera.top *= ratioHeight;
this.camera.bottom *= ratioHeight;
}
this.camera.updateProjectionMatrix();
this.renderer.setClearColor( new THREE.Color( global.stuff.config.renderCameraBackgroundColor ), global.stuff.config.renderCameraBackgroundTransparency );
var rememberCameraVisible = global.stuff.skybox.activeSkybox.visible;
if( global.stuff.config.renderCameraSkybox ){
global.stuff.skybox.activeSkybox.visible = true;
global.stuff.skybox.activeSkybox.position.copy(this.camera.position);
global.stuff.camera.skyCamera.position.copy(this.camera.position);
global.stuff.camera.skyCamera.rotation.copy(this.camera.rotation);
this.renderer.clear(); // clear buffers
this.renderer.render( global.stuff.skybox.sceneSky, global.stuff.camera.skyCamera );
this.renderer.clearDepth(); // clear depth buffer
}else{
this.renderer.clear(); // clear buffers
}
this.renderer.render( global.stuff.scene, this.camera );
this.imageData = this.renderer.domElement.toDataURL('image/png').replace(/data:image\/png;base64,/, '');
global.stuff.skybox.activeSkybox.visible = rememberCameraVisible;
}
this.saveRender = function(){
document.getElementById('saveRender').click();
}
this.save = function(e){
var fpath = e.files[0].path;
e.value = '';
var fs = require('fs');
fs.writeFile(fpath, this.imageData, 'base64', function(err) {
if(err) {
console.log(err);
} else {
console.log("The file was saved: "+fpath);
}
});
}
}
It renders the scene, because I can see the lines and points being rendered to the canvas, however, there aren’t any polygons/faces… when I do a console.log of the scene, it shows that it has all the data of the objects… so I don’t know why they aren’t all being rendered…
It worked before I started migrating my geometry to buffer geometry… I also changed to using modules… but that is all that I changed, and now it won’t render the complete scene…
any help would be appreciated because I have no clue what could be the problem.
