Troubleshooting MeshStandardMaterial problem in Three.js on Mac M1 with Chrome

Having an issue on my M1 Mac with Chrome, where my scene appears like https://i.sstatic.net/tWckT.png. However, it looks fine in Safari or Firefox https://i.sstatic.net/9TJvQ.png

The problem seems to be related to the rendering of walls. Here is my code:

    const wallMaterial = new THREE.MeshStandardMaterial({
        color: color,
        side: THREE.DoubleSide,
        precision: "highp",
   
    });

And here is the code for rendering materials:

 if (item3d instanceof THREE.Mesh) {
        item3d.material.opacity = item.opacity;
        item3d.material.transparent = true;
        item3d.material.polygonOffset = false;
        item3d.material.polygonOffsetFactor = 5.0;
        item3d.material.polygonOffsetUnits = 5.0;
        item3d.material.side = THREE.DoubleSide;
        item3d.material.precision = "highp";
        item3d.userData.initColor = item3d.material.color?.getHex();
    }

If I include transparent: true in MeshStandardMaterial, the rendering of walls improves but object interaction suffer as shown in this image https://i.sstatic.net/nqYWF.png

typescriptthree.js

Answer №1

Upon receiving a recommendation from @Mugen87, I decided to visit https://www.google.com/chrome/canary/ and proceeded to download and install Chrome Canary Version 111.0.5544.0 (Official Build) canary (x86_64) for MacOS Monterey (Version 12.6.2 (21G320) - 2,3 GHz 8-Core Intel Core i9).

I then launched the application using terminal CLI and found that it effectively resolved my rendering issues, which are clearly visible in the accompanying images.

Before :

https://i.sstatic.net/16NT6.png

After :

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

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

Spread operator in Typescript for complex nested collection types

I have implemented a Firestore database and defined a schema to organize my data: type FirestoreCollection<T> = { documentType: T; subcollections?: { [key: string]: FirestoreCollection<object>; }; }; type FirestoreSchema< T exte ...

typescripttypescript-typingstypescript-generics

Steps for converting an Array of tuples into a Union of Tuples

I am attempting to develop a custom type that, when given an array of tuples as input, will generate the union of each index within the tuple. This may not be the most accurate terminology, but I hope you understand what I mean. const entries = [["name", ...

typescripttuplestype-inference

Discover the most helpful keyboard shortcuts for Next.js 13!

If you're working with a standard Next.js 13 app that doesn't have the experimental app directory, setting up keyboard shortcuts can be done like this: import { useCallback, useEffect } from 'react'; export default function App() { c ...

javascriptreactjstypescriptnext.js

Building a class following the completion of an asynchronous operation

Seeking a solution in the given code, I must wait for server calls to initialize cached objects as properties on the class. After researching, I found inquiries on waiting for multiple subscriptions, and decided to utilize forkJoin as demonstrated. However ...

angulartypescriptrxjs

Tips for proper camera positioning to accurately project the desired world coordinate onto the designated screen location

Could anyone provide some guidance on how to position the camera so that the center of the object appears at the specified pixel coordinates on the screen (e.g. (10, 20))? The object's center is defined in the world coordinate system. I'm seekin ...

unity-game-enginethree.jscesiumjsbabylonjs

Challenge with React CloneElement regarding typing

Utilizing React Children and React Clone element, I aim to trigger methods in both the wrapper and Select components upon onClick event in the Option component. Although everything is functioning correctly, I am encountering a type error when calling the O ...

reactjstypescript

Conditional Return Types in a Typescript Function

There is a function that can return two different types, as shown below: function doSomething(obj: {a: string, b?: string}): string | number { if (obj.b) { return 'something' } return 1 } When the function is called with an object cont ...

typescripttypescript-typingstypescript-generics

Wave of the figure in three.js

I have sculpted a humanoid figure and now I am attempting to animate the figure waving with its left hand when the waveButton is clicked. I established a hierarchy where the body element is the parent, with leftArm, rightArm, leftLeg, rightLeg, and head as ...

javascriptthree.js

A universal TypeScript type for functions that return other functions, where the ReturnType is based on the returned function's ReturnType

Greetings to all TypeScript-3-Gurus out there! I am in need of assistance in defining a generic type GuruMagic<T> that functions as follows: T represents a function that returns another function, such as this example: fetchUser(id: Id) => (disp ...

reactjstypescriptreduxtypescript-typingsredux-thunk

Encountering an issue with d3 Angular 2 pie chart related to d3.arc data

I encountered a problem with my code: 'PieArcDatum' is not assignable to parameter of type 'DefaultArcObject.' at this specific line Argument of type return "translate(" + labelArc.centroid(d) + ")";. Could someone please assist me in ...

angulard3.jstypescript

Error: The selected module is not a valid top-level option

I am facing an issue while using the babel-loader. I have removed all irrelevant code and just kept the error-related portion. What could be causing this problem? module.exports = merge(baseWebpackConfig, { ... module: { rules: [ ...

typescriptwebpackbabeljs

The ValidationSchema Type in ObjectSchema Seems to Be Failing

yup 0.30.0 @types/yup 0.29.14 Struggling to create a reusable type definition for a Yup validationSchema with ObjectSchema resulting in an error. Attempting to follow an example from the Yup documentation provided at: https://github.com/jquense/yup#ensur ...

typescriptyup

Populating the DOM with a mix of strings and HTMLDivElements by iterating through an array using *ngFor

I have a specific layout requirement that needs to resemble this example: https://i.sstatic.net/4kP2q.png The desired layout should utilize CSS properties like display: grid; someFunction(data) { this.data = data; ...

htmlangulartypescriptinnerhtmlngfor

Issue: Unable to resolve all parameters for setupRouter function

I encountered an error stating "Can't resolve all parameters for RouteParams" while setting up a basic app for routing. Here is how my app.module.ts file is structured: import { NgModule } from '@angular/core'; import { BrowserModule ...

angularjsangulartypescript

Replace the function if it is specified in the object, otherwise use the default functionality

Having a calendar widget written in TypeScript, I am able to bind a listener to a separate function. However, I desire this separate function to have default functionality until someone overrides it in the config object passed to the constructor. Within th ...

javascripttypescript

The continuous re-rendering is being triggered by the Async/Await Function

I am facing an issue with fetching data from the backend using axios. The function is returning a Promise and each time I call it, my component keeps rendering continuously. Below is the code snippet: import { useState } from "react"; import Ax ...

reactjstypescriptaxios

Using Pocketbase OAuth in SvelteKit is not currently supported

I've experimented with various strategies, but I still couldn't make it work. Here's the recommendation from Pocketbase (): loginWithGoogle: async ({ locals }: { locals: App.Locals }) => { await locals.pb.collection('users' ...

javascripttypescriptsveltesveltekitpocketbase

What is the process for creating a three-dimensional Bezier curve using JavaScript, specifically with three.js and WebGL?

I have a good grasp on creating a simple bezier curve, but I am curious about how to transform the curve into 3D. Additionally, I am wondering if it is possible to plot multiple curves to form an image like a cone. Any advice or guidance on this matter wou ...

javascripthtmlthree.js

What are the steps to implementing a ShaderToy shader in Three.js?

Trying to integrate this shader from ShaderToy into my Three.js project has been a challenge for me. I need assistance with converting certain values and configuring the fragmentShader, vertexShader, and uniforms. My attempts at converting values have be ...

three.jsshadervertex-shadershadertoy

Set values to the inner property of the object

In my configuration file, I have set up nested properties as shown below export class Config { public msalConfig: { auth: { authority: string; clientId: string; validateAuthority: boolean; redirectUri: ...

typescriptangular8