When I utilize the three.js GLTFLoader to import a 3D model in GLTF format, I can't help but notice

As a beginner in frontend development, I lack knowledge of OpenGL. I am using the three.js GLTFLoader to import a 3D model, but the result is not satisfying. The preview on the model website looks ugly, and I want to improve the appearance to match the sample output shown in the image below. Can you help me update my code for a better visual output?

  <script>
    const vm = new Vue({
      el: '#root',
      data(){
        return {
          x: 100,
          y: 100,
          z: 100
        }
      },
      mounted(){
        this.initWorld();
        let material = new THREE.LineBasicMaterial({ color: 0x0000ff });
        Vue.prototype.loader = new THREE.GLTFLoader();
        this.loader.load(
          './scene.gltf',
          this.onLoadend,
          this.onLoading,
          this.onError
        )
      },
      methods: {
        initWorld(){
          const { innerWidth: w, innerHeight: h } = window;
          const render = new THREE.WebGLRenderer({
            alpha: false,
            antialias: true,
          });
          render.setSize(w, h);
          document.querySelector('#root').appendChild(render.domElement);
          const camera = new THREE.PerspectiveCamera(45, w/h, 1, 500);
          camera.position.set(this.x, this.y, this.z);
          camera.lookAt(0, 0, 0);
          const scene = new THREE.Scene();
          Vue.prototype.camera = camera;
          Vue.prototype.scene = scene;
          Vue.prototype.render = render;
        },
        refreshRender(){
          this.render.render(this.scene, this.camera);
        },
        changeCameraPosition(x, y, z){
          this.camera.position.set(x, y, z);
          this.refreshRender();
        },
        onLoadend(gltf){
          this.scene.add(gltf.scene);
          console.log(gltf);
          this.scene = gltf.scene;
          this.refreshRender();
        },
        onLoading(xhr){
          console.log((xhr.loaded / xhr.total * 100) + '% loaded');
        },
        onError(err){
          console.log(`An error happened: ${err}`);
          throw err;
        }
      }
    })
  </script>

I am aiming for a look similar to the sample image, but currently, the output is not satisfactory.

Answer №1

While I may not be a Three.js expert, I found success with the following steps: 1) Verify if your exported glTF file loads properly using the viewer provided at the following link: . If it loads correctly and the issue persists,

I suggest implementing glTF Metallic Roughness and glTF Specular Glossiness in your scene to achieve the desired outcome.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to combine the existing array data with the previous array data in JavaScript?

I am implementing server-side pagination in my MERN project. Let's say I retrieve 100 products from the database and want to display only 30 products, with 10 products per page. When a user navigates to the 4th page, I need to make another API call to ...

Having trouble retrieving the chosen option from the select elements

Below is a portion of the code that I have written to capture the selected values of class code and section from a dropdown menu. Currently, only the first element of the select is being retrieved instead of the chosen element. HTML Code: <div id="dia ...

Combining 2 objects in vue.js that share a common field name

Currently, I am attempting to merge two objects based on a shared key, specifically when they have two fields with the same name but differing values. var players = [{ id : 'a', name : "player1",team:1},{ id : 'b', name : &quo ...

How to Retrieve Values from a Movie API?

Struggling with The Movie Database API integration. Specifically, I'm stuck on retrieving the "keys" variable when calling the function with the Movie's id. I'm still learning JavaScript, so this is proving to be a bit challenging. Any assis ...

Change the output of Object.fromEntries

I've been working on updating the values of an object using the .fromEntries() method. The issue I am facing is that even though I am returning a modified Array of hours, when the function completes it reverts back to the original complete Array. If ...

Using footable js will eliminate all form elements within the table

After incorporating the Footable jQuery library to create a responsive table, I encountered an issue with input tags and select boxes being removed by the Footable JavaScript. It turns all these tags into empty <td> elements. <table id="accordi ...

The concept of asynchronicity and callbacks in JavaScript

As a newcomer to the world of JavaScript and Stack Overflow, I have been learning about synchronous, asynchronous, and callbacks through various videos and blogs. However, I still have a lingering doubt. If synchronous code means following a sequential ord ...

Improving code efficiency for checkboxes in upcoming TypeScript versions

Is it possible to create a single checkbox component and dynamically pass different values to it without repeating code? I have set up these checkboxes to help me check the maximum and minimum values of some API data. const[checkValMax, setCheckValMax]= u ...

Choosing various files from separate directories within an HTML input type="file" element

Is there a way to select multiple files from various directories using the HTML input type="file" element? I have been searching for resources on how to do this without any luck. Are there any npm packages that can assist with achieving this functionalit ...

`Struggling with managing callbacks, handling errors, and working with MongoDB`

I recently revamped my code for an application that handles adding companies to a database. In the past, my code was messy and unorganized, so I decided to structure it properly by introducing routes, a controller, and a data access object. Here is how my ...

Ensure that only a single onmouseover event is triggered when hovering over multiple elements

I want to create a simple code snippet like the one below: <span onmouseover="alert('hi')">Hello, <span onmouseover="alert('hello')">this</span> is a test</span> However, I need to ensure that when hovering ove ...

Javascript - Converting a function to run asynchronously

Just starting to work with Node.js for the first time and feeling a bit puzzled by asynchronous functions. I'm getting better at identifying when async is causing issues, but still unsure how to fix them. Here's the code snippet in question: fu ...

Issue with React: Reading the 'pathname' property from undefined is not possible

I can't figure out why this error keeps popping up. My goal is to create animated transitions between Routes. Can anyone point out where I went wrong? view image description here I tried reinstalling the react-spring package but it didn't solve t ...

Adjusting the width of a select box to match the size of its child table using CSS

Within my Vue application, I've implemented a select box that contains a table component. When the select box is clicked, the table becomes visible in a container. However, I'm facing an issue where I can't dynamically adjust the width of th ...

What is the process for appending a file extension to a Next.js URL?

For instance, I am attempting to redirect the URL : https://example.com/data/publications to this : https://example.com/data/publications.json I made an attempt using Next.js redirection, but encountered difficulty when trying to add a string that does no ...

Using Jquery to Insert Numbers Inside Brackets to Selection

I am struggling to calculate the sum of numbers in jQuery for selection fields. Currently, my code looks like this. $(function() { $("select").change(function() { updateTotal(); }); updateTotal(); }); function updateTotal() { ...

JSdom, automation, web scraping, handling dynamic iframes

I am currently in the process of automating my tasks on the website provided at the link below: I need to fill out forms and submit them automatically. So far, I have been successful in automating using Greasemonkey and I am now considering switching to ...

It is not feasible to establish a personalized encoding while sending a post request through XMLHTTPRequest

When using the JS console in the latest version of Chrome browser, I encountered the following issue: x = new XMLHttpRequest(); x.open('POST', '?a=2'); x.setRequestHeader('Content-Type', 'application/ ...

Initializing an Express app with JSON file loading

My movie-finding application relies on backend API calls to function. As part of the initialization process, I need to load two JSON files: one containing a list of languages for searching (lang.json) and another stored in the config variable that provides ...

The submission feature for the textarea in Javascript is not functioning properly

As someone who is new to frontend development, I am currently facing a challenge with debugging JavaScript code that involves making changes to the content of a textarea. Despite my efforts to debug using the browser console, I have yet to identify why it ...