I'm puzzled by why a portion of my THREE.js object appears to be transparent

I've created a solid (not transparent) object in Blender and exported it using the three.js Blender plugin to obtain JSON data.

However, when I add it to my three.js project, there are transparent areas on the object that I can't seem to get rid of. I need the object to be completely solid.

I would greatly appreciate any assistance with this issue.

Below is the JavaScript code:


    window.kristal_json = {
      "metadata": {
        "formatVersion": 3.1,
        "generatedBy": "Blender 2.7 Exporter",
        "vertices": 12,
        "faces": 30,
        "normals": 12,
        "colors": 0,
        "uvs": [10],
        "materials": 1,
        "morphTargets": 0,
        "bones": 0
      },
      "scale": 1.000000,
      "materials": [{
        "DbgColor": 15658734,
        "DbgIndex": 0,
        "DbgName": "Mat",
        "blending": "NormalBlending",
        "colorAmbient": [0.1694117690535153, 0.3545098119156034, 0.6400000190734865],
        "colorDiffuse": [0.1694117690535153, 0.3545098119156034, 0.6400000190734865],
        "colorEmissive": [0.0, 0.0, 0.0],
        "colorSpecular": [0.5, 0.5, 0.5],
        "depthTest": true,
        "depthWrite": true,
        "shading": "Lambert",
        "specularCoef": 255,
        "transparency": 1.0,
        "transparent": false,
        "vertexColors": false
      }],
      // More JSON data...
    };

    // JavaScript function to initialize ThreeJS rendering
    function initThreeJS() {
      var div = $('#canvas-scene');
      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera(75, div.width()/div.height(), 0.1, 1000);
    
      // Additional setup and rendering logic...

      render();

      function render() {
        requestAnimationFrame(render);

        if (kristal) {
          kristal.rotation.y += 0.01;
        }

        renderer.render(scene, camera);
      }
    }

    initThreeJS();
  

P.S. Here is the JSBin link for the full code: http://jsbin.com/koxicuqavejo/1/

Answer №1

Ensure that your material is set to THREE.DoubleSide

krystal.material.side = THREE.DoubleSide;

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 could be the reason for an empty FormData map being fetched when testing a fetch call in React?

Currently experimenting with a fetch call using Formdata in a react app while utilizing jest for testing. export const submitform = async (url:string, file:File, params:{}) => { const body = new FormData() body.append('file', file) if ( ...

The Bootstrap image slider is limited to showing a single item at a time

I've been attempting to implement a carousel in Bootstrap 4 that displays multiple items at once and allows scrolling one item at a time, but I can't seem to get it right. Despite going through various tutorials and forum posts, the carousel alwa ...

What is the best way to utilize the sort function in order to arrange the elements of the object based on their names and then retrieve their values?

I need to organize the objects in my array named inje based on the numerical order of the last number in each object's name property. Despite using sort(), the order remains unchanged. How can I correct this in my code? const inje = [ { name: " ...

Tips for establishing secure communication between a shell app and micro application (frontend) using pubsub technology

I have developed a shell application that serves as the main container for handling all API communications. Additionally, I have created several Micro applications that simply send API request signals to the shell application. When it comes to security, m ...

React data is being updated prior to waiting for the API call

I'm currently developing a React app that includes a table with a scroller. On each scroll, the page number is updated and an API call is made using the new page number. However, the page number updates too quickly, exceeding the limit and resulting i ...

Can JavaScript variables be accessed within Jinja?

I'm struggling with accessing JavaScript variables in a Jinja template. Can someone help me out? For example, here is the code snippet: <script> let data_str = "video1"; let url = `{% url "renderVideo" args="${d ...

Using a JavaScript Map to merge results from multiple mongoDB queries

Running two separate queries to combine results into a map is faster than running a single, larger query. I create a dictionary using the _id field and set the entire object as the value. let sessions = await getListSessions(minDate, maxDate); if (confi ...

Leveraging ES6 modules within JavaScript for exporting uncomplicated variables

In my JavaScript code, I have defined pageId = 3 in one file and socket = io() in another file. Now, I need to access these variables in other files. I am considering using ES6 modules for this purpose, but I am unsure of how to proceed. Currently, the s ...

Node.js equivalent of Java's byteArray

I have a Node.js REST API with images being sent from a Java application as byte arrays. Here is an image Below is the string representation of the image in byte array form: [B@c75af72 I need to decode this byte array to verify if it is indeed an ima ...

Guidelines for incorporating a router into the title of a Vuetify.js toolbar

I am currently utilizing vuetify.js in my project and I encountered an issue. I wanted the application title to link to the top menu, but when navigating to /route shop and /discount, the HogeHoge button's state changed unexpectedly. Is there a soluti ...

Filtering GridView Results with Live Search on ASP.net Textbox

I am currently working on implementing a live search feature for my ASP.net project. The goal is to have a description textbox where users can enter their search term, and the GridView below will dynamically filter the results as the user types. While I ...

Exploring the Art of Structuring Json Data Using jquery

After importing data from a csv file, I am trying to utilize it in a dependent dropdown feature using jquery. However, I am unsure if it is feasible to nest the received data with my current code implementation. CSV File Banco Tarjeta Cuotas Medio_Pag ...

Having trouble getting the dropdown feature to work on my WordPress theme that is built on Bootstrap

I have experimented with various examples on this platform. A few of them have been successful, but only when incorporated into an HTML file, not a PHP one like the default for Wordpress. I have a suspicion that the issue lies in the JavaScript not loadin ...

Steps for eliminating QRcode warning in npmjs package

Issue: Warning Message (node:24688) ExperimentalWarning: buffer.Blob is an experimental feature. This feature could change at any time (Use `node --trace-warnings ...` to show where the warning was created) Seeking Solution: How can I prevent this warning ...

Explore Earth in 360 degrees with mouse interactions using threejs

I am facing an issue. I want to rotate the earth in 360° using my mouse, but nothing is happening. However, I would like the world to remain fixed and not move when I rotate it with the mouse. Looking forward to a solution. <!DOCTYPE html> ...

Error message in Jquery function: Uncaught TypeError - undefined property 'noDisagree'

Hey there! I am attempting to invoke a function in an AngularJs controller with a parameter using Jquery, but unfortunately encountering the error: Uncaught TypeError: Cannot read property 'noDisagree' of undefined function noDisagree(id){ ...

Are you able to create a digital representation of a gemstone or diamond using three.js?

For a while now, I've been utilizing sophisticated renderers such as Vray to render gemstones offline. Currently, I am venturing into rendering them in real time using three.js. Although I don't consider myself a 3D expert, I am curious whether ...

Discover the country's three-letter code with the power of HTML and Javascript!

I am in search of a way to determine the location of a user based on the country they are browsing from. I want to achieve this using HTML and Javascript. While researching on stackoverflow, I came across various suggestions to use different API's for ...

Develop a platform similar to Shadertoy, specifically designed for use in three.js. This platform will allow for the storage of program state within a texture, which can then be accessed and utilized within the rendering shader

In my project, I have two shaders: a "logic" shader that updates the program state by writing to a texture, and a "rendering" shader that reads this state from the texture and renders the scene to the screen. However, I encountered an issue where, when I ...

Leveraging multer for handling a FormData object in a node.js server

Having trouble with an HTML form that includes two buttons among other text input areas. The front-end javascript code is set up to handle the submit action by creating a FormData object to store the file and sending it via a jQuery AJAX request to a node. ...