Hi there,
I am attempting to load 3 identical glb objects onto a single page. I’m running each object through a while loop, however only the final loop outputs the object as expected.
Specifically, to my case, I’m running a loop via WordPress (via ACF).
The canvas loads for all three objects, however only the third model generates as expected. While the first two canvases load at the correct size - however they appear to be empty.
The loop I’m running is as follows:
<?php
if( have_rows('development_process') ):
while ( have_rows('development_process') ) : the_row();
$model = get_sub_field('step_3d_model');
?>
<script>
if ( WEBGL.isWebGLAvailable() ) {
console.log("webgl is available: <?php echo $model['caption'] ?>");
container = document.getElementById( '<?php echo $model['caption'] ?>' );
var camera, controls, scene, renderer;
init();
animate();
function init(){
// Create the camera
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 50);
// camera.position dictates how far away it will be from the rotational axis. 1 is close and 1< is further away
// Ultimatley, this will dictate the size of the object - by varying the distance between the object and the camera
camera.position.z = 7.25;
// Set camera controls (REMEMBER: It's the camera that's rotating, not the object)
// controls = new THREE.TrackballControls( camera );
controls = new THREE.TrackballControls(camera, document.getElementById('<?php echo $model['caption'] ?>'));
controls.addEventListener('change', render);
// Removes camera pan on right click
controls.noPan = true;
// Removes camera zoom on scroll
controls.noZoom = true;
// Create the scene where the object will be located
scene = new THREE.Scene();
// Add light to the scene so that objects can be seen
ambientLight = new THREE.AmbientLight(0x404040, 5, 0.5);
scene.add(ambientLight);
// Add a spotlight to the scene for some direct lighting
light = new THREE.PointLight(0xf5f5f5, 5, 5)
// variable.position.set(x, y, z) references where the light will be angled
light.position.set(3, 4, 3);
light.castShadow = true;
light.shadow.camera.near = 0.001;
light.shadow.camera.far = 25;
scene.add(light);
// for instances where you need more than one direct light source, you may add multiple spot lights
light = new THREE.PointLight(0x404040, 5, 5)
light.position.set(3, -2, 3);
light.castShadow = true;
light.shadow.camera.near = 0.001;
light.shadow.camera.far = 25;
scene.add(light);
renderer = new THREE.WebGLRenderer({
alpha: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild( renderer.domElement );
var loader = new THREE.GLTFLoader();
renderer.gammaOutput = true;
renderer.gammaFactor = 2.2;
loader.load( '<?php echo $model['url'];?>', function ( glb ) {
object = glb.scene.children[0];
// variable.scale.set(x, y, z) references the size of the object
object.scale.set(1.4,1.4,1.4);
// .position refers to the location of the object on the canvas
object.position.set(-0.02,-0.75,2);
// .rotation refers to the angle of the object
object.rotation.set(90, 0.25, -0.5);
scene.add( object );
// This code will center the cameras roatational axis around the loaded object.
var boundingBox = new THREE.Box3();
boundingBox.setFromObject( object );
var center = boundingBox.getCenter();
// set camera to rotate around center of object
controls.target = center;
}, undefined, function ( error ) {
console.error( error );
} );
}
function animate(){
requestAnimationFrame( animate );
controls.update();
}
function render(){
renderer.render(scene, camera );
}
} else {
var warning = WEBGL.getWebGLErrorMessage();
document.getElementById( '<?php echo $model['caption'] ?>' ).appendChild( warning );
console.log("webgl is NOT available");
}
</script>
<?php
endwhile;
else :
?>
<script>
console.log("error");
</script><?php
endif;
?>
Am I loading these canvases in an incorrect manner? Or is there a specific function that I’m missing - which allows you to load multiple objects?
Any light on the subject would be greatly appreciated! Thanks