Exporting Blender model to three.js CanvasRenderer results in strange distortion of normals

I'm currently experiencing an issue while trying to export a model using the Three.js import/export tool for Blender. Everything works perfectly fine when I use the WebGLRenderer, but when I switch to CanvasRenderer for cross-browser support, the model behaves strangely. It seems that when the model consists of more than 2 geometries touching each other, the normals on the mesh become distorted and start blinking. I've tried joining the geometries before exporting them as a single mesh, but the issue persists. It's almost as if having two different geometries touching each other triggers this behavior.

Here's an image of the problematic model for reference: https://i.sstatic.net/ATjLH.png

If anyone has any tips on how to successfully export this model from Blender for use with CanvasRenderer, I would greatly appreciate your help!

Thank you in advance!

javascriptcanvas3dthree.jsblender

Answer №1

After facing some challenges, I stumbled upon this different approach that might be useful for anyone experiencing a similar issue.

For me, the solution involved utilizing the ThreeCSG library for performing subtractions, unions, and other operations. While it may not be suitable for every scenario due to its complexity with intricate models, it served its purpose in my case.

Here is an image showcasing the final result, along with the successful rendering using CanvasRenderer.

Many thanks!

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

Mastering Authentication in React JS: Best Practices

I am currently working on integrating Backend (Express JS) and Frontend (React JS). One of the challenges I am facing is understanding how to manage sessions effectively. When a user logs in using a form built with React JS, the backend responds with a HS ...

javascriptnode.jsreactjsexpressjwt

An investigation into the texturing and highlighting problem in Three.js

I am currently working on a project involving a cube with multiple textures, one for each face. Initially, I was able to change the color of the cube when hovering over it using a single texture. However, I now want to implement this functionality with a t ...

javascriptopengl-esthree.js

The 'openNewWin' property does not hold a valid Function object and is either null or undefined

I am currently working with an asp menu and trying to configure the navigateurl so that it opens in a new popup window. The issue I am facing is that when I execute the code, I encounter the following error: Error: The value of the property 'openNewW ...

c#javascriptasp.netcontrols

Click to add a card

Attempting to incorporate a new row with the click of a button dynamically has proven to be challenging for me. As someone who is relatively new to JavaScript, I am struggling to figure it out. In the demonstration provided below, you will notice that noth ...

javascripthtmljquerycss

Undefined type in JavaScript

Below is the JavaScript code snippet I have written. function bar() { var x = "Amy"; x = parseInt(x); console.log(x); if (isNaN(x)) { console.log("Your entry is not a number"); } else { if (typeof (x) === "number") { console.log("number" ...

javascript

Value comparison displayed in text boxes

Having two textboxes and a script to compare their values can sometimes result in unexpected behavior. For instance, when the value in Textbox2 comes from the database and it happens to be 0, it can cause issues. One possible solution is to allow Textbox1 ...

javascriptjquery

Tips for handling a disabled button feature in Python Selenium automation

When trying to click this button: <button id="btn-login-5" type="button" class="m-1 btn btn-warning" disabled="">Update</button> I need to remove the disable attribute to make the button clickable. This ...

javascriptpythonseleniumwebdriverwaitdisable

Displaying a Jquery slider by clicking on links

I am interested in setting up a slider for two different forms. Specifically, I plan to have one form labeled Form 1 and another labeled Form 2 displayed as text. When users click on Form 1, a table containing the form will slide out from underneath the ...

javascriptjquery

showcasing recommended options in the search bar through the use of javaScript

Hey there, I've been working on creating result suggestions for my search bar. The generation process is all set, but I'm facing an issue with displaying the elements on the HTML page. During testing, I keep seeing ${resultItem.name}, and when I ...

javascripthtmlcss

Typescript encountering onClick function error during the build process

My current challenge involves creating a submit function for a button in my application. However, when I attempt to build the project, I encounter a typing error that is perplexing me. Despite trying various methods, I am unable to decipher how to resolve ...

javascriptreactjstypescript

How can function expressions result in a returned value?

Function expressions result in a value, unlike function declarations which do not. This distinction was clarified for me by others in a different SO thread (link provided). All functions default to returning undefined, hence the emphasis on "expression" ...

javascript

Tips for concealing passwords and email addresses in URLs within an Express application

http://localhost:3000/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e297918790dd878f838b8edf838081a2858f838b8ecc818d8f">[email protected]</a>&pass=abc123 what is the best way to conceal email addresses and ...

javascriptnode.jsexpressweb-applicationsmobile-website

Issue encountered while configuring server using express.js

Here is the server.js file I am working on, but I encounter a specific error when trying to set up the server with Express.js var express = require('express'); var app = express(); var PORT = process.env.PORT || 3000; app.all('/*', ...

javascriptnode.jsexpress

Sending an AJAX request to a Symfony controller's URL

Recently, I encountered an issue with integrating a piece of code from backend.php into my Symfony controller. In the initial setup, I had an AJAX call in a JS file that interacted with backend.php to test some functionality. function postRequest() { var ...

javascriptphpajaxsymfony

Paper.js: Is there a way to prevent canvas height and width from changing when the window is resized?

My canvas with paperjs is set up to resize dynamically when the window is resized. I appreciate any help in advance. HTML <canvas id="myCanvas" height="800" width="1000"></canvas> JS var Initialize = function () { var canvas = document ...

javascripthtmlcanvaspaperjs

The gltf model fails to load on Chrome for Android when using Threejs

I encountered an issue while attempting to showcase a basic GLTF 3d model on my website. Surprisingly, it functions smoothly on desktop Mac and Windows, as well as on iOS in Safari and Firefox. However, it fails to load on Android's Chrome browser. St ...

javascriptandroidreactjsthree.jsgltf

The table appears to be fixed in place and will not scroll, even though the data

Previously, my code was functioning perfectly with the mCustomScrollbar I implemented to scroll both vertically and horizontally on my table. However, while revising my jQuery code for organization purposes, I seem to have unknowingly altered something tha ...

javascriptjqueryhtml

The error seems to vanish when commenting out the following div structure

Since upgrading to Angular 5, I've been encountering the following error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: undefined'. Current value: 'ngIf: null&apo ...

javascriptjqueryangularangular2-routingangular5

Storing data in an object or array using Node.js to improve caching efficiency

I'm attempting to store and retrieve information in a node CLI script using either an array or an object. My goal is to have a simple key-value setup where I can fetch usernames by using the ID as the key. The code snippet below shows my attempt, but ...

javascriptnode.js

What is the most efficient way to transfer substantial data from a route to a view in Node.js when using the render method

Currently, I have a routing system set up in my application. Whenever a user navigates to site.com/page, the route triggers a call to an SQL database to retrieve data which is then parsed and returned as JSON. The retrieved data is then passed to the view ...

javascriptnode.jsexpresswebrendering