What could be causing the appearance of white lines in my rendered 3D obj file when using three.js?

I'm perplexed by the appearance of white lines in my rendered 3D model using three.js. Could these be part of the wireframe? It seems that some meshes weren't separated properly, leading to this issue. I'm unsure about how to remove the wireframe if that's the case, and I could really use some guidance on this matter. Unfortunately, I wasn't able to find any examples that could help me address this problem. Below is a screenshot displaying the issue:

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

For reference, here is a snippet of my three.js code:


import * as THREE from '../dap/three.js-master/build/three.module.js';
import { DDSLoader } from '../dap/three.js-master/examples/jsm/loaders/DDSLoader.js';
import { MTLLoader } from '../dap/three.js-master/examples/jsm/loaders/MTLLoader.js';
import { OBJLoader } from '../dap/three.js-master/examples/jsm/loaders/OBJLoader.js';
import { OrbitControls } from '../dap/three.js-master/examples/jsm/controls/OrbitControls.js';
// Additional code and functions go here...
javascriptthree.js

Answer №1

Upon examination, it appears that the lines were initially defined as segments with two vertices per line, but the loader mistakenly created them as a single continuous line.

  • Line
  • LineSegments

Whether it is more efficient to adjust the loader's output or to make modifications directly to the loader itself remains uncertain. To address the issue from a tweak standpoint, you can try the following:

scene.traverse( node => {
  if ( node.isLine ) {
    node.isLineSegments = true;
  }
} );
// re-render the scene

By implementing the above code snippet, the draw mode for the lines should be set to segments instead of continuous, eliminating the need to reconstruct the objects.

(three.js r113)

Answer №2

It could be an issue with a stray wireframe material, or the geometry might not have been exported properly.

After loading, you could attempt the following:

scene.traverse( (node)=>{ if(node.isMesh && node.material && node.material.wireframe) node.material.wireframe = false });

Check to see if that resolves 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

Even though `return false` is called, the line of code is still being executed

I am looking for a way to validate user input details before submitting them to the database. I have multiple tabs in a form and one common save button that triggers a save function when clicked, as shown below; $scope.saveFn = function () { $("#activ ...

javascriptjqueryangularjs

Retrieving the value of a submit button within the `onSubmit` event handler in a React application

In my usual process, I typically handle the form submission by utilizing the onSubmit handler. <form onSubmit={e => { ... } }> <input ... /> <input ... /> <button type="submit">Save</button> </form> ...

javascriptreactjsforms

What is the best way to enhance an error object in Express with additional information beyond just a simple message?

I need to enhance the error handling process in my express application by passing two pieces of information to the error handler, which will then send both pieces of information in a JSON format to the client. Currently, I am only able to include an error ...

javascriptexpress

Guide to choosing an option in a select dropdown using Vue?

<span class="input-group-btn" style="min-width: 100px"> <select class="form-control" v-model="field.related_field"> <option value="null"></option> <option v-for="f in fields" v-bind:val ...

javascriptvue.jsvuejs2vue-component

What is the method to generate an array of values using a single attribute in GeoJSON data?

Note: After reviewing some possible solutions mentioned in this thread, I found that .map is the perfect fit for what I need, which was not covered in the original post. Thomas's response below addresses my specific requirement. In JavaScript, how ca ...

javascriptarraysjsongeojson

Ways to decrease the size of this item while maintaining its child components?

Here is an object that I am working with: { "name": "A", "children": [ { "name": "B", "open": false, "registry": true, "children": [ { ...

javascripttypescript

Does angular have a feature comparable to JavaScript's .querySelectorAll()?

I developed an inventory calculator in JavaScript that provides item count based on weight. The calculator has 4 inputs, and now I'm looking to replicate the same functionality using Angular. Is there a method in Angular similar to .querySelectorAll() ...

javascriptarraysangular

What is the method for determining the location of the VR headset in a three.js environment?

Can anyone help me understand how to obtain the VR headset's position using three.js? I have successfully created a scene and am receiving live controller positions, but I am unsure on how to access the headset's position to track the user's ...

javascriptthree.js

Guide on how to import or merge JavaScript files depending on their references

As I work on my MVC 6 app, I am exploring a new approach to replacing the older js/css bundling & minification system. My goal is to generate a single javascript file that can be easily referenced in my HTML. However, this javascript file needs to be speci ...

javascriptasp.net-mvcvisual-studiotypescriptgulp

What are the reasons behind the failure of this regex matching in Angular specifically on Safari browser?

In my angular project, I have the following code. It works perfectly fine in Chrome and Firefox, but in Safari, it throws an exception. var shour = "9:00:00 PM CDT"; var ehour = "12:00:00 AM CDT"; var conver_shour = shour.match(/^(\d+):(\d+)/)[ ...

javascriptangularjsregexsafari

The process of transferring information from a JSON API to TypeScript models

When working with my JSON API in my services, I need to pass the data to my models. What is the most efficient way to accomplish this task? Currently, I am following this process: import { Attachment } from '.'; export class Contact { id: nu ...

javascriptjsonapiangulartypescript

Encountering a glitch while attempting to render with the select tag in React.js

I have developed two functions that generate JSX content and created a logic to display each function based on the user's choice: const Register = () =>{ const [value, setMyValue] = useState() function Zeff(){ return( <div> <h1& ...

javascriptreactjs

Guide to importing a Kotlin/JS generated module into a separate npm-dependent project

I am interested in developing a JavaScript library using Kotlin Multiplatform (such as the project found here, which includes a websocket server and a JavaScript client). My goal is to build this library as an npm package and then import it into my Vue pro ...

javascriptnpmnode-moduleskotlin-multiplatformkotlin-js

Is Jquery Mobile's Table lacking responsiveness?

I have implemented a basic table from the jQuery Mobile website on my page. Take a look at the HTML code below: <div data-role="page" id="mainPage"> <div data-role="content> <table data-role="table" id="my-table" da ...

javascriptjqueryhtmlcssjquery-mobile

Custom Typescript type that runs concurrently with the base type is disregarded

Assumption: When creating a custom type that mirrors an existing type, the expectation is for variables assigned to that type to maintain it and not default back to the base type. In the function f provided below, the expected return type should be Dog ins ...

javascriptnode.jstypescriptvisual-studio-codetypes

Using Angular, we can assign an array iteration as the value for a dropdown option in

Following the controller logic: $scope.form_data = { day: 'Day' }; $scope.days = [ 'Day',1,2,3,4,5,6,7,8,9,10, 11,12,13,14,15,16,17,18,19,20, 21,22,23,24,25,26,27,28,29,30, 31 ]; In the html section: <select n ...

javascriptarraysangularjs

What method sits snugly between prepend() and append()?

Just a quick question I have. I am attempting to align an element with my target. Usually, we use prepend (before the target) and append (after the target). Is there something similar that allows us to position that element directly on top of what we are ...

javascripthtmljquerycssprepend

Guide for implementing async/await in conjunction with the eval() function within JavaScript

I'm currently using the eval function to evaluate strings and adding await to it to ensure all values are obtained, but unfortunately the await is not functioning correctly. Here is a snippet of my code: if (matchCard.card.status != "notstarted& ...

javascriptnode.js

How can the dependencies object be extracted from the package.json file in an Angular project?

Scenario: I am managing multiple Angular applications within the same project. Whenever I need to upgrade an npm package, I find myself having to manually update the package.json files in each application. While I attempted a mono repo approach, it did not ...

javascriptnode.jsangularnpmpackage.json

Adjust the text size for groupBy and option labels in Material UI Autocomplete without altering the size of the input field

Currently, I am utilizing Material-UI and ReactJS to implement grouped autocomplete functionality. See the code snippet below: import * as React from "react"; import TextField from "@mui/material/TextField"; import Autocomplete from &q ...

javascriptreactjsmaterial-ui