What is preventing the display of this .obj 3D model on my screen?

I am attempting to showcase a 3D model from BodyParts3D using Three.js. Specifically, here is an example of the 3D human stomach model (you can check the box and click Download). Despite my efforts, I have not been successful in doing so.

My initial attempt was to replace the '.obj' file in the three.js obj-loader example with the one from BodyParts3D. There are no error messages displayed, but the object does not appear on the screen. I have adjusted the camera settings, lighting, and object configurations, but to no avail. I have also tried various suggestions from this question without luck.

Considering my limited experience with 3D models, there might be a simple oversight on my part. Any advice or guidance would be greatly appreciated.

It is worth mentioning that I have successfully loaded the models with ArtOfIllusion, confirming that they are functional.

javascript3dthree.js

Answer №1

It seems like we may not have downloaded the exact same object, as the objects in the stomach zip file I reviewed are not centered around coordinates (0,0,0). The center of the object I examined is actually located at (38.2862, -137.925, 1098.39). Therefore, before rendering the object, it's important to adjust its position closer to zero or relocate your camera accordingly.

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

Angular click event not triggering as expected

Is there a way to automatically trigger an Angular element click event upon page load? $scope.fetchMealInfo = function (incomingDate) { angular.element(".trackNext a").on("click", function () { //alert(offset.left); console.log("inside ...

javascriptangularjs

Ways to activate and deactivate the Delete button in a GridView using Jquery when the checkbox is left unchecked

I am struggling with getting my Delete button to disable and enable based on whether a checkbox is checked in a GridView using JQuery. The code I currently have is not working as expected. If anyone could provide assistance in a clear and easy-to-understa ...

c#javascriptjqueryasp.netgridview

Removing the previous value in React by shifting the cursor position - a step-by-step guide

I have successfully created a phone using React that saves the numbers in an input field whether you press the keys or use the keyboard. Although the phone is functioning well, I am facing an issue where pressing the delete button or backspace key always ...

javascriptreactjscursor-position

Button within the Magnific Popup (do not use to close)

I am currently developing a website with a gallery page that utilizes the Magnific Popup plugin. My client has provided lengthy 'captions' for each image, almost like short stories. To display these captions effectively, I have utilized the titl ...

javascriptjquerycssmagnific-popup

At what moment does the object returned from a get method come into existence?

Exploring the code below: var obj={ prop1:7, get prop2 (){ console.log('I ran'); return {a:1,b:2} } } At what point is the object {a:1,b:2} created? Is it created when the code above is executed, ...

javascriptgetter

What is the best way to verify the [routerLink] values displayed from an Angular component string array?

I want to display the [routerLink] values coming from a string array in my Angular component. This is the TypeScript code: import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-header', templateUrl: & ...

javascriptangulartestingkarma-jasmine

Script for Detecting Table Header Presence in Office Fails to Identify Absence of Header

Currently, I am developing a macro in Office Scripts for Excel that has several requirements: Verify the existence of a column header in a specified table If the column does not exist, add it and set the desired header Write values to that newly added col ...

javascriptexcelexcel-tablesoffice-scripts

What are some reasons that event.preventDefault() may not be effective in certain situations?

I'm experiencing an issue with submitting a form via ajax. I am trying to validate the input field values before submission, but even if the criteria are not met, the form still submits. I have checked my code and the form submission function returns ...

javascriptjqueryajax

How can I utilize Luxon to calculate the total number of days that are equal to or greater than 30?

Looking at my current array structure const arr = [ { id: '1', name: 'thing1', createdAt: '2022-09-21T16:26:02Z', }, { id: '2', name: 'thing1', createdAt: '2022-11-21T16:20:20Z', } ...

javascripttypescriptluxon

What is the process for creating an index signature for a type alias representing a Map in Typescript?

Suppose I have a custom type for a Map as follows: type MyCustomMap = Map<string, number>; Is there any way to add an index signature to this type so that I can set key-value pairs after initializing it? I have been able to achieve this with types ...

javascripttypescripttypescript2.0typing

The inner workings of Virtual DOM in React and Vue disclosed

I am a student experimenting with creating my own Virtual DOM for a college project in JavaScript, keeping it simple without advanced features like props or events found in popular frameworks like React and Vue. I'm curious about code splitting. If I ...

javascriptreactjsvue.js

A div element springs forth into a new window and seamlessly transitions back to its original position with fresh content

Most of us are familiar with Gmail chat, where you can pop out the chat window into a new window with its content, and then pop it back in to its original position. However, I encountered an issue while working on replicating this functionality. While I w ...

javascriptjqueryhtmliframe

Hiding Div with JavaScript (Quick and Easy)

Hey there, I'm looking to make regStart and regPage alternate visibility based on a click event. I'm still getting the hang of JavaScript so any simple answers would be appreciated. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/x ...

javascripthtml

Sending Ajax GET request following the first Ajax POST request

Upon completing the initial ajax post, I am attempting to make a second ajax call. The initial call is a POST and the second call is a GET. Even though I am able to retrieve the values from the url file.php in the second call, I am facing difficulties in u ...

javascriptphpjqueryhtmlajax

Tips for positioning a texture in a precise spot?

Within my code, I am combining two textures. My goal is to be able to position a texture anywhere on the plane. However, when I introduce an offset to the texture UV XY coordinate, the image ends up being stretched. offsetText1 = vec2(0.1,0.1); vec4 ...

three.jsglslshaderfragment-shadervertex-shader

retrieving data from GET variables and sending to a PHP array

Is there a way to retrieve form variables and store them in an array in memory without reloading the page? I'm not very experienced with this, so any guidance would be appreciated. My goal is to update a JSON file using PHP based on form inputs. JSON ...

javascriptphpjson

Alter the hue of a component upon being clicked

Seeking help to modify the color of my menu elements upon clicking on the "center" or "right" containers (reverting back when clicked again). Currently, the three lines in my menu are white, but I desire them to turn red when either of these containers is ...

javascriptjqueryhtmlcss

Exploring the functionality of buttons within jQuery Impromptu

My current project involves creating a survey composition tool. The main focus is on having a preview button that displays the values inputted by the user. <!doctype html> <html> <head> &l ...

javascriptjqueryhtml

What is the best way to edit a span when there are two of them?

Attempting to modify the content of a span, but encountering a conflict with another span using the same class. -the one I don't wish to alter- <span id="chat-subrooms-toggle" class="chat-column-title"> Chat </span> However, this is the ...

javascriptjquery

Include an additional image with a JavaScript function

I recently started using a WordPress plugin known as User Submitted Posts. This plugin has the functionality to allow users to upload multiple images. I have configured it so that users can upload anywhere from 0 to a maximum of 3 images. However, when att ...

phpjavascriptfile-uploadwordpress