Exploring the creation of a WebGL viewer by utilizing Three.js in conjunction with ColladaLoader.js

I am in the process of setting up a WebGl viewer using three.js + colladaloader.js, but I'm encountering some difficulties when attempting to import and visualize my own collada object. The example loads correctly, however, when I try to incorporate my model into it (without modifying the code), I encounter a

Can not convert Transform of type lookat WebGLRenderingContext: GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 0

Any suggestions on how to make my own model work?

I want to mention that the ColladaLoader.js I'm using is a customized version available at this link

Here is the specific model I'm trying to load:

This is the code snippet I'm utilizing:

<script>

    if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

    var container, stats;

    var camera, scene, renderer, objects;
    var particleLight, pointLight;
    var dae, skin;

    var loader = new THREE.ColladaLoader();
    loader.options.convertUpAxis = true;
    loader.load( '/site_media/models/model.dae', function ( collada ) {

        dae = collada.scene;
        skin = collada.skins[ 0 ];

        dae.scale.x = dae.scale.y = dae.scale.z = 0.002;
        dae.updateMatrix();

        init();
        animate();

    } );

    // Additional code continues...

</script>

Answer №1

Resolved the issue by enlarging my texture size (and placing it in the same folder as my model with the same name) It appears that ColladaLoader.js has trouble loading small textures for some reason

Additionally, there is a known bug https://github.com/mrdoob/three.js/issues/3106 but the workaround can be found here , and it seems essential for resolving the issue

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 monitor changes in objects within a JavaScript array?

Currently, I am in the process of developing a Todo application using electron and Vue.js. In my project, there is an array of objects called items. Each object follows this format: {id: <Number>, item: <String>, complete: <Boolean>, ...

Tips for updating a specific section of a Django webpage using AJAX

Currently, I am in the process of launching a website using Django. One crucial application on this site is the 'forum' which facilitates discussions among users. The discussion forum can be accessed through the URL 'XXX.com/forum/roomY&apo ...

The browser encountered an issue trying to load a resource from a directory with multiple nested levels

I've stumbled upon an unusual issue. Here is a snapshot from the inspector tools. The browser is unable to load certain resources even though they do exist. When I try to access the URL in another tab, the resource loads successfully. URLs in the i ...

Unable to adjust price slider on mobile device, bars are not sliding

I have been utilizing the jQuery slider from lugolabs.com for my website, and while it works flawlessly on desktop, it seems to have issues when viewed on mobile devices. You can check out the slider at this link: The library used for this slider is jQue ...

Tips for Creating a CSS Radio Button in ASP.NET

I've recently developed a web application using asp.net and I'm facing an issue while trying to style the radio buttons using CSS like the example below: https://i.sstatic.net/k7qGB.jpg However, after applying this design, the radio buttons are ...

Troubleshooting a 404 error for an existing object: What to do?

I encounter a 404 'Not Found' error when attempting to edit a mark through my form. I am puzzled by the source of this error because in order to access this form, I require the brand ID (which can be found in the URL). Upon accessing my modifica ...

Issue: Unable to assign type 'FormDataEntryValue' to type 'string'. Type 'File' cannot be assigned to type 'string'

After retrieving data from the formData, I need to pass it to a function for sending an email. Error: The error message states that 'FormDataEntryValue' is not compatible with type 'string | null'.ts(2322) definitions.ts(119, 3): The e ...

Every second, Three.js invokes a function instead of every frame

I am facing an issue in moving an object every second using an array of Vectors. I have tried to implement the animation in React.js but haven't been successful so far. Here's a snippet of my code: animate() { this.lorryBounds.forEach(vector =& ...

Exploring the differences between arrays and filter functions within MongoDB aggregation operations

Recently, I crafted a sophisticated pipeline for my database: let orders = await Order.aggregate( { $unwind: "$candidate", }, { $lookup: { from: "groups", localField: & ...

Aligning the ant design carousel in the center of the page

I adjusted the size of an Ant Design carousel and now I want to position the image in the center of my screen. This is how the current image looks: https://i.sstatic.net/TmfDb.png Here is what I have attempted: const contentStyle = { heigh ...

Break down and extract elements using typedEvent in TypeScript

Within the external library, there is the following structure: export interface Event extends Log { args?: Result; } export interface TypedEvent<EventArgs extends Result> extends Event { args: EventArgs; } export type InstallationPreparedEven ...

Guide to retrieving the second value variable in an array based on the selected dropdown option within a controller

In my controller, I am trying to extract the second value in an array list that a user selects from a dropdown so that I can perform mathematical operations on it. $scope.dropdown = [ {name:'Name', value:'123'}] When a user chooses "N ...

Vue.js powered search bar for exploring countries worldwide (utilizing the restcountries API)

Despite successfully loading the API country data (as evidenced by the console.log() entry and the accompanying picture of my work desk), the country information does not display when hovering the mouse cursor over the search bar field (expecting a dropdow ...

Using Angular's ng-switch directive within a select dropdown option

Can we implement the [Data Presentation Format] to be utilized in the [Dropdown Box]? Specifically, I would like the "parent" items to appear as is within the dropdown, while the "child" items should have a [tab] indentation to denote their relationship wi ...

Transferring the data entered into an input field to a PHP script, in order to retrieve and display the value with JavaScript, unfortunately results in a

My situation involves a form that consists of only one input text field (search_term) and a submit button. The goal is to enter a keyword into the input field, click Submit, have the keyword sent to a php script for json encoding, and then returned back t ...

Is it possible to export files from Flash to CreateJS via the command line?

Is there a method to automatically run the createjs toolkit for Flash tool from the command line? I have multiple components that I need to export in bulk. Is it possible to do this in a batch process? ...

Ways to retrieve the output from an AJAX call

Today I'm developing a JavaScript function named "sendData". This function simplifies the process by eliminating the need to manually code an entire ajax statement. However, considering that it operates asynchronously, I found myself wondering how to ...

Is there a way for me to detect when the progress bar finishes and execute a different function afterwards?

After clicking a button in my Javascript function, the button disappears and a progress bar is revealed. How do I trigger another function after a certain amount of time has passed? $('#go').click(function() { console.log("moveProgressBar"); ...

Creating components through the command line while managing multiple projects using Angular CLI 6

Currently, I am utilizing the most recent Angular CLI version (v6). Within my codebase resides a collection of applications housed within the projects directory. My objective is to create and organize various modules and components within these projects v ...

A guide on incorporating React components from a locally installed npm package

Recently, I've been working on developing an npm package that contains a collection of React components that are essential for all my projects. Let me walk you through the folder structure and contents: / dist/ bundle.js src/ MyComponent.jsx ...