I apologize in advance if I'm missing something obvious here.
I'm trying to use the three.js VOXLoader while using Flask.
I'm able to load three.js fine, but when I try and load the VOXLoader, it doesn't seem to work and breaks all three.js functionality on the page.
Here is the code from the page I'm trying to run.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ThreeJS Starter</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<script src="/static/three/build/three.js"></script>
<script type="module" src="/static/three/examples/jsm/controls/OrbitControls.js"></script>
<script type="module" src="/static/three/examples/jsm/loaders/VOXLoader.js"></script>
<script type="module">
// Canvas
const canvas = document.querySelector('canvas.webgl')
// Scene
const scene = new THREE.Scene()
// Problem Loading Here
const loader = new VOXLoader();
const geometry = new THREE.TorusGeometry( .7, .2, 16, 100 );
// Materials
const material = new THREE.MeshBasicMaterial()
material.color = new THREE.Color(0xff0000)
// Mesh
const sphere = new THREE.Mesh(geometry,material)
scene.add(sphere)
// Lights
const pointLight = new THREE.PointLight(0xffffff, 0.1)
pointLight.position.x = 2
pointLight.position.y = 3
pointLight.position.z = 4
scene.add(pointLight)
/**
* Sizes
*/
const sizes = {
width: window.innerWidth,
height: window.innerHeight
}
window.addEventListener('resize', () =>
{
// Update sizes
sizes.width = window.innerWidth
sizes.height = window.innerHeight
// Update camera
camera.aspect = sizes.width / sizes.height
camera.updateProjectionMatrix()
// Update renderer
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})
/**
* Camera
*/
// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.x = 0
camera.position.y = 0
camera.position.z = 2
scene.add(camera)
// Controls
// const controls = new OrbitControls(camera, canvas)
// controls.enableDamping = true
/**
* Renderer
*/
const renderer = new THREE.WebGLRenderer({
canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
/**
* Animate
*/
const clock = new THREE.Clock()
const tick = () =>
{
const elapsedTime = clock.getElapsedTime()
// Update objects
sphere.rotation.y = .5 * elapsedTime
// Update Orbital Controls
// controls.update()
// Render
renderer.render(scene, camera)
// Call tick again on the next frame
window.requestAnimationFrame(tick)
}
tick()
</script>
TEST
<canvas class="webgl"></canvas>
Currently, when the page loads correctly it displays a red spinning Torus, but if it doesn't it show a white background with black text saying "TEST".
Ideally, I should be able to create a new instance of the VOXLoader without it breaking the page.
I've tried adding "import { VOXLoader } from '/static/three/examples/jsm/loaders/VOXLoader.js';" too, but the import function alone also seems to break the page.
I also checked the three.js documentation but didn't find anything helpful there yet.
It seems most people using three.js, aren't typically using it with flask, so I'm not sure if this is flask specific?
What's confusing to me is that the three.js file is imported fine and works with no issues, but for some reason, VOXLoader doesn't.
I double-checked the path and directory for VOXLoader and it's 100% correct.
This page is also currently only being used as a template for other pages to extend from, so it doesn't have any python code on it either.
I'm just trying to get the VOXLoader working and any suggestions or advice would be greatly appreciated.
Thank you in advance!
Related
I've been wanting to use Three.js in a project but I can't get anything to render on my screen.
After a while of troubleshooting, I thought I would just ask and see if anyone can help me.
DETAILS:
Hosting on XAMPP,
here's a complete Three.js example that should work, to my knowledge, but evidently does not:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="c"></canvas>
<script type="module">
import {
Camera,
Material,
Texture,
} from "https://cdn.skypack.dev/three#0.132.2";
import { OrbitControls } from "https://cdn.skypack.dev/three#0.132.2/examples/jsm/controls/OrbitControls.js";
function main() {
const canvas = document.getElementById('c');
const renderer = new THREE.WebGLRenderer({canvas});
const fov = 75;
const aspect = 2; // the canvas default
const near = 0.1;
const far = 5;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 2;
const scene = new THREE.Scene();
const boxWidth = 1;
const boxHeight = 1;
const boxDepth = 1;
const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
const material = new THREE.MeshBasicMaterial({color: 0x44aa88});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.render(scene, camera);
}
</script>
</body>
</html>
I've linked through a cdn here, but other methods such as installing with npm and linking that way have also had the same confounding results.
In any case it's not throwing any errors, so I'm at a loss.
All I end up getting is a blank white page.
The function main() is not gonna call itself. When you declare a function, you have to make sure you execute it, otherwise it'll just sit there, unused.
// First we declare the function
function main() {
// Do a bunch of stuff
}
// Then we call the function
main();
im a bit of a noob when it comes to three.js and html but ive created other js files and they would import into the html page just fine but im confused why my basic box copy pasta code isnt showing up on the page. it works fine when scripting it all in html but not when import the js file in the same folder. could yall help me understand whats going on?
index.js
/*import * as THREE from 'three'
const canvas=document.querySelector('.webgl')
const scene = new THREE.Scene();
const geo = new THREE.BoxGeometry(1,1,1)
const mats = new THREE.MeshBasicMaterial({
color:'red'
})
const boxmesh=new THREE.Mesh(geo,mats)
scene.add(boxmesh)
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,100)
camera.position.set(0,1,2)
scene.add(camera)
const renderer=new THREE.WebGL1Renderer({
canvas:canvas
})
renderer.setSize(window.innerWidth,window.innerHeight)
renderer.setPixelRatio(Math.min(window.devicePixelRatio,2))
renderer.shadowMap.enabled=true
renderer.gammaOutput=true
renderer.render(scene, camera)*/
import * as THREE from 'three';
// init
const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;
const scene = new THREE.Scene();
scene.background= new THREE.Color('black')
const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
const material = new THREE.MeshNormalMaterial();
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animation );
document.body.appendChild( renderer.domElement );
// animation
function animation( time ) {
mesh.rotation.x = .1;
mesh.rotation.y = .1;
renderer.render( scene, camera );
}
animation()
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="learning html" content="This is learing making websites">
<title>Learing GLTF</title>
<script src="index.js"></script>
</head>
<body>
<canvas class="webgl"></canvas>
?
</body>
</html>
When using the latest versions of three.js(e.g. r140), then it's important to define an import map in your HTML. Otherwise the import import * as THREE from 'three'; does not work. A import map is required so the bare module specifier three can be resolved in browsers. For testing, try it with:
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three#0.140/build/three.module.js"
}
}
</script>
ive been trying to deploy a threejs project that im working on, on either github pages or firebase, but whenever I deploy them, the browser just shows a whitescreen, its weird because when I run the same project through localhost, everything its working perfectly.
here is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Waber App</title>
</head>
<body>
<canvas id="bg"></canvas>
<script type="module" src="/main.js"></script>
</body>
</html>
and here is my main.js
import "./style.css";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector("#bg"),
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.setZ(30);
renderer.render(scene, camera);
const geometry = new THREE.TorusGeometry(10, 3, 16, 100);
const material = new THREE.MeshStandardMaterial({
color: 0xff6347,
});
const torus = new THREE.Mesh(geometry, material);
//scene.add(torus);
const pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(20, 20, 20);
const ambientLight = new THREE.AmbientLight();
scene.add(pointLight, ambientLight);
const lightHelper = new THREE.PointLightHelper(pointLight);
const gridHelper = new THREE.GridHelper(200, 50);
//scene.add(lightHelper, gridHelper);
const controls = new OrbitControls(camera, renderer.domElement);
function addStar() {
const geometry = new THREE.SphereGeometry(0.25, 24, 24);
const material = new THREE.MeshStandardMaterial({ color: 0xffffff });
const star = new THREE.Mesh(geometry, material);
const [x, y, z] = Array(3)
.fill()
.map(() => THREE.MathUtils.randFloatSpread(100));
star.position.set(x, y, z);
scene.add(star);
}
Array(200).fill().forEach(addStar);
const spaceTexture = new THREE.TextureLoader().load("space.jpeg");
scene.background = spaceTexture;
function animate() {
requestAnimationFrame(animate);
moon.rotation.y += 0.005;
torus.rotation.x += 0.01;
torus.rotation.y += 0.005;
torus.rotation.z += 0.01;
controls.update();
renderer.render(scene, camera);
}
const moonTexture = new THREE.TextureLoader().load("moon.jpeg")
const normalTexture = new THREE.TextureLoader().load("normal.jpeg")
const moon = new THREE.Mesh(
new THREE.SphereGeometry(3,32,32),
new THREE.MeshStandardMaterial({
map: moonTexture,
normalMap: normalTexture,
})
)
scene.add(moon)
animate();
LOCALHOST PREVIEW
FIREBASE PREVIEW
I don't know if you've found a solution for your problem yet, but I had the same problem a couple of days ago. I was able to solve it and deploy on Github Pages by putting all my javascript code into my index.html file. I added the link to my CSS file somewhere in the head of the html like you normally would:
<link rel="stylesheet" href="./style.css" />
Then I added the Threejs cdn and all my js code at the bottom of the body. So yours would have to look something like this:
<canvas id="bg"></canvas>
<script type="module">
// Find the latest version by visiting https://unpkg.com/three. The URL will
// redirect to the newest stable release.
import * as THREE from "https://unpkg.com/three/build/three.module.js";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
const scene = new THREE.Scene();
//Followed by all the rest of your code.
</script>
</body>
</html>
This is what worked for me, anyway.
I hope you find this helpful!
Full disclosure, this is my first time answering someone's question on here. If you need anymore info, let me know, and I'll do my best to supply it.
Hy!
I'm working with three js(webgl). I was trying to embed html webpage, but somehow it don't wants to work.
Tutorials that I was checking:
http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/
http://stemkoski.github.io/Three.js/CSS3D.html
The stemkoski one was working with three js v58, also v60. But it don't realy wants to work using v68(newest version). I don't get any error message, just a black screen where the website should be.
Also I'm able to do something similiar like http://threejs.org/examples/#css3d_youtube .
My question is is there a workaround, or "hot fix" for this problem because I'm out of ideas.
Thanks for your answers.
---UPDATE---
Then let's say I'm using this code:
<!doctype html>
<html lang="en">
<head>
<title>CSS3D (Three.js)</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel=stylesheet href="css/base.css"/>
</head>
<body>
<script src="js/Three58.js"></script>
<script src="js/Detector.js"></script>
<script src="js/Stats.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/THREEx.KeyboardState.js"></script>
<script src="js/THREEx.FullScreen.js"></script>
<script src="js/THREEx.WindowResize.js"></script>
<!-- new for this example -->
<script src="js/CSS3DRenderer.js"></script>
<!-- jQuery code to display an information button and box when clicked. -->
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel=stylesheet href="css/jquery-ui.css" />
<link rel=stylesheet href="css/info.css"/>
<script src="js/info.js"></script>
<div id="infoButton"></div>
<div id="infoBox" title="Demo Information">
This three.js demo is part of a collection at
http://stemkoski.github.io/Three.js/
</div>
<!-- ------------------------------------------------------------ -->
<div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div>
<script>
/*
Three.js "tutorials by example"
Author: Lee Stemkoski
Date: July 2013 (three.js v58)
This demo is based on the work of Jerome Etienne:
http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/
*/
// MAIN
// standard global variables
var container, scene, camera, renderer, controls, stats;
var keyboard = new THREEx.KeyboardState();
var clock = new THREE.Clock();
// custom global variables
var rendererCSS;
init();
animate();
// FUNCTIONS
function init()
{
// SCENE
scene = new THREE.Scene();
// CAMERA
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
scene.add(camera);
camera.position.set(0,150,400);
camera.lookAt(scene.position);
// RENDERER
if ( Detector.webgl )
renderer = new THREE.WebGLRenderer( {antialias:true} );
else
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container = document.getElementById( 'ThreeJS' );
container.appendChild( renderer.domElement );
// EVENTS
THREEx.WindowResize(renderer, camera);
THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) });
// CONTROLS
controls = new THREE.OrbitControls( camera, renderer.domElement );
// STATS
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.bottom = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
// LIGHT
var light = new THREE.PointLight(0xffffff);
light.position.set(0,250,0);
scene.add(light);
// FLOOR
var floorTexture = new THREE.ImageUtils.loadTexture( 'images/checkerboard.jpg' );
floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat.set( 10, 10 );
var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side: THREE.DoubleSide } );
var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
var floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.position.y = -0.5;
floor.rotation.x = Math.PI / 2;
scene.add(floor);
////////////
// CUSTOM //
////////////
var planeMaterial = new THREE.MeshBasicMaterial({color: 0x000000, opacity: 0.1, side: THREE.DoubleSide });
var planeWidth = 360;
var planeHeight = 120;
var planeGeometry = new THREE.PlaneGeometry( planeWidth, planeHeight );
var planeMesh= new THREE.Mesh( planeGeometry, planeMaterial );
planeMesh.position.y += planeHeight/2;
// add it to the standard (WebGL) scene
scene.add(planeMesh);
// create a new scene to hold CSS
cssScene = new THREE.Scene();
// create the iframe to contain webpage
var element = document.createElement('iframe')
// webpage to be loaded into iframe
element.src = "index.html";
// width of iframe in pixels
var elementWidth = 1024;
// force iframe to have same relative dimensions as planeGeometry
var aspectRatio = planeHeight / planeWidth;
var elementHeight = elementWidth * aspectRatio;
element.style.width = elementWidth + "px";
element.style.height = elementHeight + "px";
// create a CSS3DObject to display element
var cssObject = new THREE.CSS3DObject( element );
// synchronize cssObject position/rotation with planeMesh position/rotation
cssObject.position = planeMesh.position;
cssObject.rotation = planeMesh.rotation;
// resize cssObject to same size as planeMesh (plus a border)
var percentBorder = 0.05;
cssObject.scale.x /= (1 + percentBorder) * (elementWidth / planeWidth);
cssObject.scale.y /= (1 + percentBorder) * (elementWidth / planeWidth);
cssScene.add(cssObject);
// create a renderer for CSS
rendererCSS = new THREE.CSS3DRenderer();
rendererCSS.setSize( window.innerWidth, window.innerHeight );
rendererCSS.domElement.style.position = 'absolute';
rendererCSS.domElement.style.top = 0;
rendererCSS.domElement.style.margin = 0;
rendererCSS.domElement.style.padding = 0;
document.body.appendChild( rendererCSS.domElement );
// when window resizes, also resize this renderer
THREEx.WindowResize(rendererCSS, camera);
renderer.domElement.style.position = 'absolute';
renderer.domElement.style.top = 0;
// make sure original renderer appears on top of CSS renderer
renderer.domElement.style.zIndex = 1;
rendererCSS.domElement.appendChild( renderer.domElement );
}
function animate()
{
requestAnimationFrame( animate );
render();
update();
}
function update()
{
if ( keyboard.pressed("z") )
{
// do something
}
controls.update();
stats.update();
}
function render()
{
// remember to call both renderers!
rendererCSS.render( cssScene, camera );
renderer.render( scene, camera );
}
</script>
</body>
</html>
As I mentioned above, this is the code from http://stemkoski.github.io/Three.js/CSS3D.html, and he made his code from another tutorial: http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/ this one.
The problem is, theese are working on three js r58-r60(Let's say theese are old codes). I want to do the same thing with three js r68(the newest version). But somehow, when I launch the same code on r68 that screen goes black instead of showing a html page. This is a known bug, you can check it http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/ here:
Hi Jerome, thanks for your interest. Here are a couple of jsfiddles
copied from stemkoski's github showing the results of Three r58 and
r68. Observe that the only difference between the samples is the
library in use: Threejs 58 (working) - http://jsfiddle.net/jL48v/2/
Threejs 68 (broken) - http://jsfiddle.net/jL48v/3/
I've tried several approaches to get this technique working in r68,
but without much luck so far.
Just realized that I messed up the dependency load order. Here's a
"fixed" broken version of r68 - http://jsfiddle.net/jL48v/4/
But he/she forgot to write the solution. and the v4 not working either.
I have tried to clone Lee Stemkoski's excellent example of dual viewports at http://stemkoski.github.io/Three.js/Viewports-Dual.html.
It runs fine when accessed from its location on github on my local PC Windows 7 using Firefox 23.0.1.
But when I copy the source and try to run it from my local drive it will only show the second viewport to be rendered.
If I comment out the code for the second viewport rendering then it will show the first viewport OK.
It may be a version problem. I would have gotten the code from GitHub but it doesnt seem to be there.
I obtained the source by doing "save as complete web page" from Firefox.
To assist debugging I then minimized the javascript by progressively cutting out inessentials like stats, controls, information button.
I have run out of ideas and wonder if anyone can see what the problem is .
The last 11 lines of the underneath code block are where the action is.
Cheers.
=========================================================================================================================
<!doctype html> // based on Three.js "tutorials by example" Author: Lee Stemkoski Date: June 2012 (three.js v49)
<html lang="en">
<head>
<title> LIGER05 -- Three.js</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body
{
font-family: Monospace;
font-weight: bold;
background-color: #ccccff;
margin: 0px;
overflow: hidden;
}
</style> </head>
<body>
<!-- <div id="message"></div>-->
<script src="js/Three.js"></script>
<script src="js/Detector.js"></script>
<script src="js/Stats.js"></script>
<script src="js/THREEx.KeyboardState.js"></script>
<script src="js/THREEx.FullScreen.js"></script>
<script src="js/THREEx.WindowResize.js"></script>
<div id="ThreeJScontainer" style="position: absolute; left:0px; top:0px"></div><!-- Pre-defined Container for rendered can
<script> // based on Three.js "tutorials by example" Author: Lee Stemkoski Date: June 2012 (three.js v49) -->
var container, scene, camera, camera2, renderer;
init();
animate();
// FUNCTIONS //
function init() {
scene = new THREE.Scene();
// CAMERA //
var SCREEN_WIDTH = window.innerWidth , SCREEN_HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45, ASPECT = (0.5*SCREEN_WIDTH) / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
camera2 = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
scene.add(camera);
scene.add(camera2);
camera.position.set(0,0,200);
camera2.position.set(0,250,0);
camera.lookAt(scene.position);
camera2.lookAt(scene.position);
// RENDERER NEW
if ( Detector.webgl )
{renderer = new THREE.WebGLRenderer( {antialias:true} );}//alert("WebGL Renderer"); }
else
{renderer = new THREE.CanvasRenderer();}//alert("Canvas Renderer"); }
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
//...Either create a div element to contain the renderer ==> container = document.createElement( 'div' );
container = document.getElementById( 'ThreeJScontainer' ); //...OR reference predefined container in the html
container.appendChild( renderer.domElement );
//Hmmmm THREEx.WindowResize(renderer, camera);
var light = new THREE.PointLight(0xffffff);
light.position.set(0,250,0);
scene.add(light);
//var ambientLight = new THREE.AmbientLight(0x111111);
// scene.add(ambientLight);
var sphereGeometry = new THREE.SphereGeometry( 50, 32, 16 );
// use a "lambert" material rather than "basic" for realistic lighting.//(don't forget to add >= 1 light!)
var sphereMaterial = new THREE.MeshLambertMaterial( {color: 0x8888ff} );
var sphere1 = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere1.position.set(-60, 0, 50);
scene.add(sphere1);
var sphere2 = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere2.position.set(0, 0, -50);
scene.add(sphere2);
var sphere3 = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere3.position.set(60, 0, 50);
scene.add(sphere3);
}
function animate() {
requestAnimationFrame( animate );
render();
update(); }
function update() {
// delta = change in time since last call (in seconds)
var delta = clock.getDelta(); }
function render(){
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
camera.aspect = (0.5 * SCREEN_WIDTH) / SCREEN_HEIGHT;
camera.updateProjectionMatrix();
camera2.aspect = (0.5 * SCREEN_WIDTH) / SCREEN_HEIGHT;
camera2.updateProjectionMatrix();
var mar = 100
var panelX1min = mar
var panelWidth = Math.floor(0.5 * SCREEN_WIDTH) - (2* mar)
var panelX2min = mar + panelWidth + mar + mar
var panelYmin = mar
var panelHeight = SCREEN_HEIGHT - (2*mar)
//...LEFT SIDE
renderer.setViewport( panelX1min, panelYmin, panelWidth , panelHeight );
renderer.render( scene, camera );
//...RIGHT SIDE
// ***** if you comment out the next two lines then the left side viewport will be shown *****
renderer.setViewport( panelX2min, panelYmin, panelWidth, panelHeight );
renderer.render( scene, camera2 );
}
</script></body></html>
=========================================================================================================================
=========================================================================================================================
Needed the following statement (in the javascript init function)
to prevent renderer clearing its buffer after rendering the first viewport:-
renderer.autoClear = false