Utilize .GLB and Blender file formats within a Gridsome project developed with Vue.js

I am working on a project using Three.js in Gridsome, but I am facing difficulties importing .glb files (3D models) with GLTFLoader. While Gridsome recognizes img (png/jpg) or .js files stored in src/assets, it does not seem to support glb files.

This is the hierarchy of my files:

https://i.sstatic.net/nRNnG.png

This is the function I use for importing:

this.loader.load('../assets/models/mars.glb', function(gltf) {
  let scale = 5.6;
});

Unfortunately, I am encountering a 404 error when trying to load the file. Any suggestions?

javascriptvue.jsthree.jsblendergridsome

Answer №1

To utilize the /static directory in Gridsome, simply update your project and rebuild it. Any files within this directory will be automatically transferred to your distribution folder during the build process.

Once completed, you can modify your import function as follows:

this.loader.load('./nameOfYourModel.glb', function(gltf) {
  // Insert your code here 
});

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

When the property "a" is set to true, it must also require the properties "b" and "c" to be included

I'm looking for a way to modify the following type structure: type Foo = { a: boolean; b: string; c: string; } I want to change it so that if a is true, then both b and c fields are required. However, if a is false or undefined, then neither b ...

javascriptreactjstypescript

Save Bson query as a Javascript log

When working with Java to create a complex MongoDB query, I often log the query before executing it: log.info("Filter: {}", queryFilter); The logged query output typically looks like this: And Filter{filters=[Filter{fieldName='FinInstrmGnlAttrbts.C ...

javascriptjavamongodb

What is the best way to utilize functions in Express to dynamically display content on my Jade template?

I have successfully implemented a user registration and login page, but now I need to determine what content to display based on whether the user is logged in. I found this solution: app.use(function(req, res, next) { db.users.find({rememberToken: req.c ...

javascriptnode.jsexpress

Visualization of pie charts in Angular2 using Google library

Currently, I am in the process of building a web application using Angular2 that includes a Google pie chart. One of the components of the application is a Directive specifically designed for the pie chart. Below is the code snippet for the Directive: @D ...

javascriptangulargoogle-visualization

Can saving data within a mongoose pre-save hook initiate a continuous loop?

Currently, I am developing an API for a forum system which includes functionalities for users, forums, and posts. In my MongoDB Database, there is a 'categories' collection where each category acts as a container for a group of forums. Each categ ...

javascriptnode.jsmongodbmongoose

Tips on incorporating CKEditor4 wiris MathML formulas into react JS

I am having trouble displaying MathML in the DOM. When I try to render it, the output is not showing correctly in the Editor. I am utilizing CKEditor4 Let me share the code below to provide more context on what I have attempted so far App.js file: impo ...

javascriptreactjsckeditormathjaxmathml

Create an HTTP-only cookie from the resolver function in Apollo GraphQL

My objective is to pass the 'res' from my context into a resolver in order to utilize 'context.res.cookie' within my signin function and send an http only cookie. Although my sign-in function works fine, I am unable to see the cookie ad ...

javascriptnode.jscookiesgraphqlapollo

There is a lack of definition for an HTML form element in JavaScript

Encountering an issue with a HTML form that has 4 text inputs, where submitting it to a Javascript function results in the first 3 inputs working correctly, but the fourth being undefined. Highlighted code snippet: The HTML section: <form action="inse ...

javascripthtml

Automatically calculate the multiplication of a number by 10 in React JS within the State

In this scenario, I am looking for assistance in creating a functionality where the user can adjust numbers in an input box and see the result of that number multiplied by 10 in a nearby span element. However, I am encountering issues with fetching the des ...

javascriptreactjsdata-binding

Click and keystroke fusion

Greetings everyone, I've been attempting to integrate both click and keypress functionalities into my function, but unfortunately, nothing I've attempted so far has yielded any success. Here's the code snippet: function victoryMessage() { ...

javascriptjqueryhtmlcsskeyboard

Component fails to trigger @click handler

.vue component <template> <div class="modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> Loading Files </div> < ...

javascriptvue.jsvuejs2

searchkit - Issue with Maintaining State of RefinementListFilter Checkboxes

I was curious about the functionality of the RefinementListFilter in searchkit. I have multiple filters that are boolean values, such as {field: 'hasChildren': {'1' : 'Yes', '0': 'No'}} to illustrate the tr ...

javascriptreactjselasticsearchsearchkit

KnexJS Update Error: Failed to perform database update operation

I'm attempting to update a specific line in my database by utilizing Knex's update method. Although the command returns success, I notice no changes reflected in my database upon inspection. Below is the code snippet: async multipleConciliation( ...

javascriptnode.jsexpressknex.js

Text that is curving around a D3.js pie chart

I am currently working on creating a 3D-Js chart and I would like the pie text to wrap around the pie itself. This is the exact effect that I am trying to achieve: https://i.sstatic.net/YOLdo.png I am facing two main issues: I am currently printi ...

javascriptcssd3.jscharts

Leverage the power of Laravel and ReactJS to beautifully display images

Currently, I am working on a project where I am incorporating ReactJS into a Laravel blade file. To get started, I included the React CDN and began writing code within the script tag. Everything seems to be going smoothly so far, however, I have encountere ...

javascriptphpreactjslaravel

Having Trouble Showing Loading Component on Next.js v13

Having some issues with setting up a loading component in my Next.js v13 project. I followed the documentation by creating a file called loading.tsx in the src directory, but it's not appearing on the page as expected. I've also included a functi ...

javascriptreactjstypescriptnext.jsnext.js13

Exploring Vue Component Features through Conditional Display

I am working with a vue component called <PlanView/>. In my code, I am rendering this component conditionally: <div v-if="show_plan" id="mainplan"> <PlanView/> </div> <div class="icon" v-else> ...

javascriptvue.jsvue-component

The arrangement of a table, an iframe, and another table being showcased in close proximity

I need assistance in aligning a table, an iframe, and another table side by side without any breaks. Ideally, I would like all three elements to be centered on the page. It seems odd that they're not displaying next to each other as my screen is larg ...

javascripthtmlformattingline-breaks

Unable to integrate bootstrap with webpack

Incorporating Express, Webpack, and Bootstrap. Currently utilizing css-loader for my stylesheets. Below is the contents of my webpack.config.js: const path = require("path"); config = { "entry": "./modules/entry.js", "output": { "path": p ...

javascriptnode.jsexpresswebpackcss-loader

Connect the front end files, including HTML, CSS, and JavaScript, to the Node.js backend

I'm a beginner in web development and recently completed an online course on node.js and express. However, the course didn't cover how to add HTML, CSS, and JS files when using Node. I attempted the following: var express = require('expres ...

javascripthtmlcssnode.jsexpress