My goal is to incorporate multiple obj models into separate scenes, following the concept from webgl_multiple_elements.html. I have successfully loaded a single obj file and now want to add it to each individual scene. Although the obj file loads without errors, I am facing difficulties in displaying the model within the scenes. When running the geometries shown in the example provided above, everything works as intended. However, when substituting the basic geometries with the obj model, the model remains invisible.
<style>
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
background-color: #fff;
color: #444;
}
a {
color: #08f;
}
#content {
position: absolute;
top: 0; width: 100%;
z-index: 1;
padding: 3em 0 0 0;
}
#c {
position: absolute;
left: 0;
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>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="592d312b3c3c196977616c7769">[email protected]</a>/build/three.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d29352f38381d6d736568736d">[email protected]</a>/examples/js/controls/OrbitControls.js"></script>
<canvas id="c"></canvas>
<div id="content">
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - multiple elements - webgl</div>
</div>
<script id="template" type="notjs">
<div class="scene"></div>
<div class="description">Scene $</div>
</script>
<script>
var canvas;
var scenes = [], renderer;
var loader = new THREE.ObjectLoader();
var objFlag = null;
loadObject();
function loadObject(){
loader.load("./test_obj.json",
function( objectLoaded ) {
objFlag = objectLoaded;
init();
animate();
},
// called when loading is in progresses
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened' ,error);
}
);
}
function init() {
...
...
... (remaining code unchanged)
}
</script>