My script is attached below, I am repurposing three.js webgl - multiple elements for loading actual obj's files. Best way I can put this question is "Why are all the obj's loading only on the last element/scene Three.js". The idea is that I render multiple objs onto multiple different elements and this is like an adaptation of https://github.com/rollup/three-jsnext/blob/master/examples/webgl_multiple_elements.html but for obj's:
<html lang="en">
<head>
<title>three.js webgl - multiple elements</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
color: #000;
font-family: Monospace;
font-size: 13px;
background-color: #fff;
margin: 0px;
}
#info {
position: absolute;
top: 0px;
width: 100%;
padding: 5px;
text-align: center;
}
#content {
position: absolute;
top: 0px;
width: 100%;
z-index: 1;
padding: 3em 0 0 0;
}
a {
color: #0080ff;
}
#c {
position: fixed;
left: 0px;
width: 100%;
height: 100%;
}
.list-item {
display: inline-block;
margin: 1em;
padding: 1em;
box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.25);
}
.list-item .scene {
width: 200px;
height: 200px;
}
.list-item .description {
color: #888;
font-family: sans-serif;
font-size: large;
width: 200px;
margin-top: 0.5em;
}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="content">
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - multiple elements - webgl</div>
</div>
<script src="Detector.js"></script>
<script id="template" type="notjs">
<div class="scene"></div>
<div class="description">Scene $</div>
</script>
<script type="module" defer>
import * as THREE from 'https://cdn.skypack.dev/[email protected]';
import { OBJLoader } from "https://cdn.skypack.dev/[email protected]/examples/jsm/loaders/OBJLoader.js";
let checkpointsFiles = [
"./model1.obj",
"./model2.obj"
]
if (!Detector.webgl) Detector.addGetWebGLMessage();
var canvas;
var scenes = [], renderer;
init();
animate();
function init() {
canvas = document.getElementById("c");
var template = document.getElementById("template").text;
var content = document.getElementById("content");
for (let i = 0;i<checkpointsFiles.length;i++) {
var loader = new OBJLoader();
var scene = new THREE.Scene();
// make a list item
var element = document.createElement("div");
element.className = "list-item";
element.innerHTML = template.replace('$', i + 1);
// Look up the element that represents the area
// we want to render the scene
scene.userData.element = element.querySelector(".scene");
content.appendChild(element);
var camera = new THREE.PerspectiveCamera(50, 1, 1, 10);
camera.position.z = 2;
scene.userData.camera = camera;
// add one random mesh to each scene
loader.load(checkpointsFiles[i], function (obj) {
console.log(checkpointsFiles[i])
scene.add(obj);
});
scene.add(new THREE.HemisphereLight(0xaaaaaa, 0x444444));
var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.set(1, 1, 1);
scene.add(light);
scenes.push(scene);
}
renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });
renderer.setClearColor(0xffffff, 1);
renderer.setPixelRatio(window.devicePixelRatio);
}
function updateSize() {
var width = canvas.clientWidth;
var height = canvas.clientHeight;
if (canvas.width !== width || canvas.height != height) {
renderer.setSize(width, height, false);
}
}
function animate() {
render();
requestAnimationFrame(animate);
}
function render() {
updateSize();
renderer.setClearColor(0xffffff);
renderer.setScissorTest(false);
renderer.clear();
renderer.setClearColor(0xe0e0e0);
renderer.setScissorTest(true);
scenes.forEach(function (scene) {
// so something moves
scene.children[0].rotation.y = Date.now() * 0.001;
// get the element that is a place holder for where we want to
// draw the scene
var element = scene.userData.element;
// get its position relative to the page's viewport
var rect = element.getBoundingClientRect();
// check if it's offscreen. If so skip it
if (rect.bottom < 0 || rect.top > renderer.domElement.clientHeight ||
rect.right < 0 || rect.left > renderer.domElement.clientWidth) {
return; // it's off screen
}
// set the viewport
var width = rect.right - rect.left;
var height = rect.bottom - rect.top;
var left = rect.left;
var bottom = renderer.domElement.clientHeight - rect.bottom;
renderer.setViewport(left, bottom, width, height);
renderer.setScissor(left, bottom, width, height);
var camera = scene.userData.camera;
//camera.aspect = width / height; // not changing in this example
//camera.updateProjectionMatrix();
//scene.userData.controls.update();
renderer.render(scene, camera);
});
}
</script>
</body>
</html>```
[each model in the array should be on its own element but its on the last. I realistically have 20 but in this code snippet above it's just 2 for simplicity. Here is the problem I am getting in a visualization:](https://i.stack.imgur.com/X9YB5.png)