What is the best way to switch from using the three.js JSONLoader to the ObjectLoader?

Question

What is the best way to switch from using the three.js JSONLoader to the ObjectLoader?

I successfully loaded multiple files using the code below for three.js JSONLoader:

<!DOCTYPE html>
<html>
  <head>
    <title>Rotating Sphere</title>
    <meta charset="utf-8">
    
    <!-- https://cdnjs.com/libraries/three.js -->
    <script src="http://www.amdesigngroup.com/clients/AM_6292_Learning/js/three.min.js"></script>
    <script src="http://www.amdesigngroup.com/clients/AM_6292_Learning/js/OrbitControls.js"></script>
    <!-- Tween.js: https://cdnjs.com/libraries/tween.js/ -->
    <script src="http://www.amdesigngroup.com/clients/AM_6292_Learning/js/Tween.js"></script>
  </head>
  <body style="margin: 0; background-color:#6cdbf5;">
    <div class="canvas-wrapper">
      <canvas id="mycanvas">

      </canvas>
    </div>
    
    
    

      // Code here

      
    </script>
  </body>
</html>

Unfortunately, I encountered issues with trying to load two models using the ObjectLoader. It seems like there are errors related to GeometryUtils.center and a.center being undefined. How can I resolve these errors and why are they occurring?

It appears that JSONLoader and ObjectLoader operate differently, leading to compatibility issues in my code. Despite attempting various fixes, I couldn't find helpful information online or in the documentation. Any guidance on rectifying these errors would be greatly appreciated!

Thank you for your assistance!!!

NOTE: Apologies for the messy code - I understand it's not optimized, but currently, functionality is the primary focus. Cleanup will be done later!

javascript 3d three.js

Answer 1

Answer №1

Found the solution here:

var loader = new ObjectLoader();
loader.load('scene.js', function(object) {
    scene.add(object); // add the object to the scene
});

The issue was not receiving the object as a function argument and failing to include it in the scene. I was attempting to use mesh/geometry instead of the object loader. The provided code below resolved the issue:

<!DOCTYPE html>
<html>
  <head>
    <title>Rotating Sphere</title>
    <meta charset="utf-8">
    
    <!-- https://cdnjs.com/libraries/three.js -->
    <script src="js/three.min.js"></script>
    <script src="js/OrbitControls.js"></script>
    <!-- Tween.js: https://cdnjs.com/libraries/tween.js/ -->
    <script src="js/Tween.js"></script>
  </head>
  <body style="margin: 0; background-color:#6cdbf5;">
    <div class="canvas-wrapper">
      <canvas id="mycanvas">

      </canvas>
    </div>
    
    
    <script>

      function createObject(filePath) {
        var canvas = null,
            scene = null,
            camera = null,
            renderer = null,
            mesh = null,
            mesh2 = null,
            object = null;

        init();
        run();

        function init() {

          canvas = document.getElementById( "mycanvas" );
          scene = new THREE.Scene();
          var WIDTH = window.innerWidth,
              HEIGHT = window.innerHeight;

          renderer = new THREE.WebGLRenderer({antialias:true, alpha:true, canvas:canvas});
          renderer.setSize(WIDTH, HEIGHT);
          document.body.appendChild(renderer.domElement);

          camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 20000);
          camera.position.set(0,6,0);
          camera.lookAt(scene.position);
          scene.add(camera);

          window.addEventListener('resize', function() {
            var WIDTH = window.innerWidth,
                HEIGHT = window.innerHeight;
            renderer.setSize(WIDTH, HEIGHT);
            camera.aspect = WIDTH / HEIGHT;
            camera.updateProjectionMatrix();
          });

          var light = new THREE.PointLight(0xffffff);
          light.position.set(0,0,-100);
          scene.add(light);

          var loader = new THREE.ObjectLoader();
          loader.load( filePath, function(object, materials){
            object.rotation.x = - (Math.PI / 2);
            object.rotation.y = Math.PI;
            scene.add(object);
          });

          var loader2 = new THREE.ObjectLoader();
          loader2.load( "models/Platform/Platform.json", function(object, materials){
            object.rotation.x = - (Math.PI / 2);
            object.rotation.y = Math.PI;
            object.scale.set(.025, .025, .025);
            object.position.set(0, 1, .4);
            scene.add(object);
          });

          controls = new THREE.OrbitControls(camera, renderer.domElement);

        }
        
        function animate(mesh) {
          var tween = new TWEEN.Tween(mesh.rotation)
            .to({ z: "-" + Math.PI/2}, 2500)
            .onComplete(function() {
                if (Math.abs(mesh.rotation.z)>=2*Math.PI) {
                    mesh.rotation.y = mesh.rotation.z % (2*Math.PI);
                }
            })
            .start();
          tween.repeat(Infinity)
        }

        function run() {

          requestAnimationFrame(run);
          TWEEN.update();

          renderer.render(scene, camera);
          controls.update();
        }
      
      }
      
      createObject("models/ConstructionManA_2/ConstructionManA_2.json");

    </script>
  </body>
</html>

Answer 2

Found the solution here:

var loader = new ObjectLoader();
loader.load('scene.js', function(object) {
    scene.add(object); // add the object to the scene
});

The issue was not receiving the object as a function argument and failing to include it in the scene. I was attempting to use mesh/geometry instead of the object loader. The provided code below resolved the issue:

<!DOCTYPE html>
<html>
  <head>
    <title>Rotating Sphere</title>
    <meta charset="utf-8">
    
    <!-- https://cdnjs.com/libraries/three.js -->
    <script src="js/three.min.js"></script>
    <script src="js/OrbitControls.js"></script>
    <!-- Tween.js: https://cdnjs.com/libraries/tween.js/ -->
    <script src="js/Tween.js"></script>
  </head>
  <body style="margin: 0; background-color:#6cdbf5;">
    <div class="canvas-wrapper">
      <canvas id="mycanvas">

      </canvas>
    </div>
    
    
    <script>

      function createObject(filePath) {
        var canvas = null,
            scene = null,
            camera = null,
            renderer = null,
            mesh = null,
            mesh2 = null,
            object = null;

        init();
        run();

        function init() {

          canvas = document.getElementById( "mycanvas" );
          scene = new THREE.Scene();
          var WIDTH = window.innerWidth,
              HEIGHT = window.innerHeight;

          renderer = new THREE.WebGLRenderer({antialias:true, alpha:true, canvas:canvas});
          renderer.setSize(WIDTH, HEIGHT);
          document.body.appendChild(renderer.domElement);

          camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 20000);
          camera.position.set(0,6,0);
          camera.lookAt(scene.position);
          scene.add(camera);

          window.addEventListener('resize', function() {
            var WIDTH = window.innerWidth,
                HEIGHT = window.innerHeight;
            renderer.setSize(WIDTH, HEIGHT);
            camera.aspect = WIDTH / HEIGHT;
            camera.updateProjectionMatrix();
          });

          var light = new THREE.PointLight(0xffffff);
          light.position.set(0,0,-100);
          scene.add(light);

          var loader = new THREE.ObjectLoader();
          loader.load( filePath, function(object, materials){
            object.rotation.x = - (Math.PI / 2);
            object.rotation.y = Math.PI;
            scene.add(object);
          });

          var loader2 = new THREE.ObjectLoader();
          loader2.load( "models/Platform/Platform.json", function(object, materials){
            object.rotation.x = - (Math.PI / 2);
            object.rotation.y = Math.PI;
            object.scale.set(.025, .025, .025);
            object.position.set(0, 1, .4);
            scene.add(object);
          });

          controls = new THREE.OrbitControls(camera, renderer.domElement);

        }
        
        function animate(mesh) {
          var tween = new TWEEN.Tween(mesh.rotation)
            .to({ z: "-" + Math.PI/2}, 2500)
            .onComplete(function() {
                if (Math.abs(mesh.rotation.z)>=2*Math.PI) {
                    mesh.rotation.y = mesh.rotation.z % (2*Math.PI);
                }
            })
            .start();
          tween.repeat(Infinity)
        }

        function run() {

          requestAnimationFrame(run);
          TWEEN.update();

          renderer.render(scene, camera);
          controls.update();
        }
      
      }
      
      createObject("models/ConstructionManA_2/ConstructionManA_2.json");

    </script>
  </body>
</html>

What is the best way to switch from using the three.js JSONLoader to the ObjectLoader?

Answer №1

Similar questions

What is the process for implementing a version folder for my @types/definition?

Having multiple upload forms on a single page with PHP, AJAX, and jQuery is not functioning as expected

For the past two days, there has been an ongoing issue that I just can't seem to figure out when running npm start

Scrolling presentation with dynamic animations

How can I obtain the current state of HTML checkboxes from a local JSON file?

Having trouble getting AngularJS ngCloak to function properly?

Using v-bind:class in Vue.js does not successfully assign a value in the method

Loading texts with the same color code via ajax will reveal there are differences among them

Effortless Ways to Automatically Accept SSL Certificates in Chrome

There was an error due to a TypeError: The 'page' property cannot be read because it is undefined

The AngularJS ng-repeat filter {visible: true} does not respond to changes in properties

How can one determine the most accurate box-shadow values?

Firebug version 2.0.1 has been triggered to break on previous breakpoints

Error: Trying to add an element to an undefined variable (d3 force layout)

Transferring a JavaScript Value to a PHP Variable (Under Certain Constraints)

Retrieve the data attribute from a specific dropdown menu using jQuery

How to verify if both MySQL queries in Node.js have fetched results and then display the page content

JavaScript causing values to disappear when the page refreshes

What could be the reason for the appearance of this error message: 'Illegal arguments: undefined, string'?

Enabling communication between JavaScript and PHP and vice versa