Implementing loader as a jQuery function.

[cconsta1]

Hi!

Great job and a great video on YouTube! I want to use your code in a jQuery function I want to use. The function should be able to load and display gltf files once they are uploaded to a repository. Will you be able to provide some support? I'm still exploring your code though and naturally, things don't work for now.

Thank you in advance!

[SekeNikola]

Hello,

I'm not using jQuery in my work and I'm trying to avoid it as much as I can. Is there any specific reason why you need jQuery??

On Wed, 4 Nov 2020 at 19:37, Chrysovalantis Constantinou < notifications@github.com> wrote:

Hi!

Great job and a great video on YouTube! I want to use your code in a jQuery function I want to use. The function should be able to load and display gltf files once they are uploaded to a repository. Will you be able to provide some support? I'm still exploring your code though and naturally, things don't work for now.

Thank you in advance!

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/SekeNikola/ThreeJS-GLTF-loader/issues/2, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHXC63J5N44FGQRGZETZ62LSOGNQJANCNFSM4TKM3AQQ .

--

Personal Website: www.sekenikola.com Behance: https://www.behance.net/sekenikola Instagram: https://instagram.com/sekenikola LinkedIn: https://www.linkedin.com/in/sekenikola/ CodePen: https://codepen.io/Seke/ GitHub: https://github.com/SekeNikola Dribble: https://dribbble.com/Seke_NIkola

[cconsta1]

Hi! Thanks for responding.

I have to use jQuery because I want to create a previewer for 3D models which is going to work inside a webpage which is a repository.

The idea is that once a user uploads a 3D model (gltf for now), the previewer will fire up and show the model inside the repository. Here is how I'm trying to implement your code:

(function ($, Configuration) {
  var useTab = Configuration.tab;
  var referenceUrl = Configuration.url;
  var confId = Configuration.id;
  var fileId = Configuration.fileid;
  var previewer = Configuration.previewer;

  var fileName = $('#file-name-title').text().trim();
  var fileNameExtension = fileName.substr(fileName.length - 3);
  var fileType;

  console.log = console.log || function(message) { alert(message);};

  console.warn = console.warn || function(message) { alert(message);};

  console.error = console.error || function(message) { alert(message);};

  $(useTab).append('<link rel="stylesheet" type="text/css" href="/assets/javascripts/previewers/three_js/style.css">');

  var scripts =["three.min.js", "GLTFLloader.js", "OrbitControls.js", "scripts.js"];

  // load the scripts                                                                       

  for (index = 0; index < scripts.length; index++) {
    scripts[index] = previewer + "/js/" + scripts[index]; 
  }

$.getScript(scripts[0], function () {
    $.getScript(scripts[1], function () {
      $.getScript(scripts[2], function () {
        $.getScript(scripts[3], function () {

//          let scene, camera, render;                                                               

//          init();  

        })
      })
    })
  });

}(jQuery, Configuration)); 

Moreover, I think I found a few errors inside your scripts.js file. Specifically, there are no semicolons when you declare your variables. Here is how I modified your code:

let scene, camera, render;

function init() {

    alert("Check 1");  

    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xdddddd);

    //alert(scene);

    camera = new THREE.PerspectiveCamera(40, window.innerWidth/window.innerHeight,1,5000);
    camera.rotation.y = 45/180*Math.PI;
    camera.position.x = 800;
    camera.position.y = 100;
    camera.position.z = 1000;

    hlight = new THREE.AmbientLight(0x404040, 100);
    scene.add(hlight);

    directionalLight = new THREE.DirectionalLight(0xffffff, 100);
    directionalLight.position.set(0,1,0);
    directionalLight.castShadow = true;
    scene.add(directionalLight);

    light = new THREE.PointLight(0xc4c4cc4, 10);
    light.position.set(0, 300, 500);
    scene.add(light);

    light2 = new THREE.PointLight(0xc4c4cc4, 10);
    light.position.set(500, 100, 0);
    scene.add(light2);

    light3 = new THREE.PointLight(0xc4c4cc4, 10);
    light.position.set(0, 100, -500);
    scene.add(light3);

    light4 = new THREE.PointLight(0xc4c4cc4, 10);
    light.position.set(-5000, 300, 0);
    scene.add(light4);

    renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setSize(window.innerWidth, window.innerHeight);

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

    alert("Check 2");  

    let loader = new THREE.GLTFLoader();

    loader.load('/assets/javascripts/previewers/three_js/3d-obj-loader/assets/scene.gltf', function(gltf){
        car = gltf.scene.children[0];
        car.scale.set(0.5, 0.5, 0.5);
        scene.add(gltf.scene);

        animate();

    });
}

function animate() {
    renderer.render(scene,camera);

    requestAnimationFrame(animate);

  }

init();

Finally here is the style.css file:

body { width: 200vw; height: 200vh; margin: 0; overflow: hidden; } When I try this code, I get no errors on my chrome browser but the model is not loading. Actually, nothing really happens.

Thanks again for providing me with a way to get my project started though :)

[SekeNikola]

Semicolons in javascript are optional. When there is a place where a semicolon was needed, it adds it behind the scenes. The process that does this is called Automatic Semicolon Insertion :)

I'm a little confuse, Are you adding your code to mine or this is your code for loading 3d model?? From what I can see you are using jQuery just to load stylesheet, script, and start the function files which you can do in HTML or with Javascript.

[cconsta1]

Hi @SekeNikola! Thanks for your response. OK, now it all makes sense. I came to JavaScript from a C++ background so I was confused about seeing JavaScript code with semicolons and without.

So, I'm using your code as a template to create a 3D model previewer for another project. I have to use jQuery because the previewer only fires up once a gltf file is loaded to a repository.

After experimenting with the code for a little bit, I managed to make it work! It's not working properly but I need to figure out how to adjust the parameters to make it work. Right now the car loads but it looks very small and awkward, but I can use the mouse to kind of zoom in and see it.

Also, I have a question about textures. Are they useful in any way? How do you use them?

[SekeNikola]

When you load the car you have to scale it. This is part of the code and notice car.scale.set

loader.load('../3d-obj-loader/assets/scene.gltf', function(gltf){
        car = gltf.scene.children[0]
        car.scale.set(0.5, 0.5, 0.5)
        scene.add(gltf.scene)
        animate();

    })

Or you can play with the camera and make it closer to the model.

Textures are useful if you want your models and scene to have some colors and textures of course :). You should read more about exporting GLTF models and you will have a better understanding.

[cconsta1]

Hi @SekeNikola! Sorry about the late response. So, yes rescaling does help but I still can't get it to look great. I'll let you know once I have a presentable result. Thanks for your help :)