Bring in a 3D design using the three.js library

I am currently diving into learning three.js and have been closely following their documentation. However, I seem to be facing an issue when trying to import an object from Blender. Can anyone point out what might be going wrong here? I have set up the scene, camera, renderer, and loader as needed.

import * as THREE from "https://cdn.skypack.dev/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89fde1fbececc9b9a7b8bab8a7ba">[email protected]</a>";
import { GLTFLoader } from "path/";

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const loader = new GLTFLoader();

loader.load(
  "path/object.glb",
  function (gltf) {
    scene.add(gltf.scene);
  },
  undefined,
  function (error) {
    console.error(error);
  }
);
renderer.render(scene, camera);

Answer №1

The GLTFLoader cannot be accessed from the specified directory "path/" since it is a folder. You must reference a .js file that includes the loader code instead.

(Additionally, please provide any error messages displayed in the console for further assistance)

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

AngularJS $timeout function failing to update variable

I'm currently working on implementing a shaking animation for a button when it's clicked and the form fields above it are invalid. This is the snippet of code from the controller: if(valid){.. do valid stuff here ..} else{ console.log(this.sha ...

Press on any two table cells to select their content, highlight it, and save their values in variables

I have a table retrieved from a database that looks like this (the number of rows may vary): |Player 1|Player 2| ------------------- |Danny |Danny | |John |John | |Mary |Mary | My goal is to select one name from each Player column and sto ...

The state change in React-Redux does not trigger a re-render

I successfully developed a large react-redux application with an undo feature in one component. While the state updates properly and re-renders the component along with its children, I noticed that the component's position on the page remains unchange ...

The HTML is not rendering as planned

I have 2 files, test.html <!DOCTYPE html> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="./test/jquery.min.js"></script> </head> <body> ...

A Promise-based value returned by a Typescript decorator with universal methods

I am currently working on creating a method decorator that can be applied to both prototype and instance methods. Referenced from: Typescript decorators not working with arrow functions In the code provided below, the instanceMethod() is returning a Prom ...

Show users who liked a post from 2 different collections in Meteor

How do I retrieve a list of users who have "liked" this post from a collection and display it in a template? Collections: likes: { "_id": 1234, "userId": "1dsaf8sd2", "postId": "123445" }, { "_id": 1235, "userId": "23f4g4e4", "pos ...

Selecting a 3D object that has been loaded using OBJMTLLoader

Why is it that when we load an Object3D with OBJMTLLoader, we are unable to use raycaster to select the object with the mouse? The Intersection array length always comes out as 0. Does anyone have any insights into the reason behind this issue? Below is th ...

Building a Multifaceted Website using React and Node.js

I've encountered a rather straightforward issue. My goal is to incorporate a second checkout page into my React and Node Website. I initially believed that the solution would be as simple as adding another 'checkout' Route to the Browser Ro ...

What steps should I take to incorporate this feature into my Meteor project?

After successfully installing the type.js package, I discovered that the code works fine when directly executed in the console. Here is the code snippet: $(function(){ $(".typedelement").typed({ strings: ["You don&apo ...

Scrollbar becomes inactive following the loading of AJAX content

Having an issue with loading a div using Ajax. The div loads, however the scrollbar within it stops working afterwards. In Main.html, I load content from other HTML files like so: <div id="content1" > </div> The content is loaded as follows: ...

Incorporating Past Projects into an Angular 2 Website

Some time ago, I built a Javascript game utilizing the HTML canvas element for image rendering. Now that I have a personal website created with Angular 2, I am unsure of how to properly embed my game into my site. Due to Angular 2 removing the script tag ...

Is it possible to use a '.JS' file downloaded through Node Package Manager (npm) directly in a web browser?

Generally, I am looking to utilize a specific library without relying on Node CMD. For instance: I aim to create a TypeScript playground without having to execute 'tsc.cmd' from "npm\node_modules", instead, I want to directly call the tsc c ...

Once you address a block using jQuery

$(function(){ $(window).scroll(function () { var scrollVal = $(this).scrollTop(); var adscrtop =$(".header").offset().top // 在 RWD 767以下不作動 if(window.screen.width>767){ if(sc ...

Looking to retrieve a set of three specific internal values from a MongoDB array

In my MongoDB database, I have two tables linked with my Node.js application. Daily Weight Table sub_exercise_id workout_id weight height 111111111111 44444444444 120 74 ...

Guidelines for validating email input using jQuery

Although I am not utilizing the form tag, you can still achieve form functionality using jQuery Ajax. <input type="email" placeholder="Email" name="email" /> <input type="password" placeholder="Password ...

Troubleshooting problem: AJAX autocomplete URL returning XML

I found my code reference here: http://example.com/code-reference if ($hint=="") { $hint="<a href='" . $z->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" . $y->item(0)->childNodes-> ...

Error occurred due to an unexpected end of JSON input following a pending promise

I am currently developing a data handler that requires downloading a file for parsing and processing within the handler. To handle this, I have implemented the file request within a promise and called it asynchronously from other methods. Including the h ...

Implementing Vue directives in separate files and importing them into components: A step-by-step guide

For a project using Vuelidate, I have set up a timeout for validation when a user types something. While I achieved success using mixins, I wanted to adhere to good coding practices by creating a Vue directive without globally registering it, and utilizing ...

I am having trouble updating a record in my database table

I am encountering an issue while trying to update a row in a table using a form. The add button works fine, but I am unable to update it using the update (a tag). Just a reminder: the edit button is located in the last column of each row along with the de ...

Guide to integrating ua-parser-js with angular 4

Is there a way to retrieve the OS name, OS version, browser name, browser version, and device from the user agent using User Agent Parser JS in Angular 4? I attempted using [email protected], but it did not provide me with the OS version and device ...