Issue: The method onBeforeCompile is not found in the LineDashedMaterialParameters type

I am interested in developing a rotating cube with concealed dashed lines as shown below.

https://i.sstatic.net/0U2im.gif

However, I encountered the following error message in VS Code

(parameter) shader: any Argument of type '{ color: ColorRepresentation; dashSize: number; gapSize: number; onBeforeCompile: (shader: any) => void; }' is not assignable to parameter of type 'LineDashedMaterialParameters'. Object literal may only specify known properties, and 'onBeforeCompile' does not exist in type 'LineDashedMaterialParameters'.

SpinningCube.ts

console.clear();
import * as THREE from 'three';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 1, 100);
camera.position.set(-10, 10, 10);
let renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0x202020);
document.body.appendChild(renderer.domElement);

window.addEventListener('resize', onWindowResize);

let controls = new OrbitControls(camera, renderer.domElement);

let grid = new THREE.GridHelper(10, 10, 0x808080, 0x808080);
grid.position.y = -0.01;

let box = DashedHiddenEdgesBox(10, 6, 3, "yellow");
box.geometry.translate(0, 2.5, 0);
scene.add(box);

renderer.setAnimationLoop((_) => {
    box.rotation.x += 0.01;
    box.rotation.y += 0.01;
    renderer.render(scene, camera);
});

function DashedHiddenEdgesBox(w: number, h: number, d: number, color: THREE.ColorRepresentation) {
    //box base points
    let basePts = [
        [0, 0, 0], [1, 0, 0], [1, 0, 1], [0, 0, 1],
        [0, 1, 0], [1, 1, 0], [1, 1, 1], [0, 1, 1]
    ].map(p => { return new THREE.Vector3(p[0], p[1], p[2]) });

    // more code goes here...

}

function onWindowResize() {
    camera.aspect = innerWidth / innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(innerWidth, innerHeight);
}

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

Question

Any suggestions on resolving this issue?

Edit

├── @types/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1c5d9c3d4d4f1819f8082859f81">[email protected]</a>
├── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e5918d978080a5d5cbd4d6d0cbd5">[email protected]</a>
├── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7703045a1b1816131205374e59455941">[email protected]</a>
├── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="403439302533233229303400746e756e72">[email protected]</a>
├── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93e4f6f1e3f2f0f8bef0fffad3a7bdaabda2">[email protected]</a>
├── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d0a181f0d1c1e165019180b500e180f0b180f3d49534b534d">[email protected]</a>
├── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="413624233120222a6c2c2433262401746f796f71">[email protected]</a>
└── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1f687a7d6f7e7c745f2a31292a312f">[email protected]</a>

Link to my repository which could be taken down in the future.

javascripttypescriptthree.js

Answer №1

Experiment with generating the substance without the specified onBeforeCompile argument.

const material = new THREE.LineDashedMaterial({
  ...
  onBeforeCompile: ()=>{} //<-- remove this
})
material.onBeforeCompile = ()=>{} //<-- include this instead

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

tips for extracting data from C# generic collection lists using TypeScript

This is the code I wrote in my .cshtml file: @ { var myList = (List<MyViewModel>)ViewBag.MyCollection; } <input id="myListHidden" type="hidden" data-my-list="@myList" /> Next, here is the TypeScript code that retrieves the value from ab ...

c#typescriptrazorgeneric-collections

Retrieve documents from MongoDB that were created within the last week and return a count of 0 for any days in which no documents were created

I need to extract documents from the last 7 days stored in my Mongo Database. I have successfully retrieved data in the desired format, where specific dates and the number of tickets created on those dates are returned: { "datesUsed": { ...

javascriptmongodbmongoose

Problem with off-screen canvas performance in Firefox

Currently, I am facing an issue that I suspect is due to a mistake on my end, but I can't seem to pinpoint it. (This issue arises in Firefox 8) Here's what I'm doing - I have a large sprite file, from which I extract a single tile and place ...

javascriptperformancefirefoxcanvas

Exploring arrays by filtering through various options chosen in a dropdown selection

I'm currently in the process of developing a search tool that utilizes the chosen options from a dropdown menu to search through an array associated with those selections and then displays a value on the HTML. I've been attempting to implement a ...

javascriptjquery

JavaScript Invocation

Ajax is used to append data to a php page, functioning like a comment panel where clicking a button loads more comments when scrolled to the bottom. Here's the ajax function for loading more comments: $("#loadmorecomments").click(function(){ $(&apo ...

phpjavascripthtmlajaxmysqli

Typescript - Conditional Type and Optional Arguments

My component has various arguments that can be passed to it: interface Props { label: string; children?: React.ReactNode; withoutActions?: boolean; fieldKey?: KeyProperties; corporate: Corporate; } The withoutActions and fieldKey properties are ...

javascripttypescriptreact-native

Every time I execute my program, it consistently displays a 500 error message when using both the POST and GET

I'm seeking assistance with mvvm as I am new to it. Can anyone help me in displaying details based on the selected date? Upon running my code, I encounter a 500 error with both the post and get methods. Schedule.cshtml <div class="col-lg-8" ng-ap ...

c#angularjsmvvmtypescript

How can I trigger HierarchicalDataSource.read() when the kendoDropDownList's change event is fired?

Currently, I am utilizing the treeview and HierarchicalDataSource features of KendoUI. Additionally, I have included a kendoDropDownList at the top of the page. Each time a user changes the value of the dropdown list, it triggers the 'change' eve ...

javascriptkendo-uikendo-grid

What is the method for displaying data from a JSON file that is associated with the wallet address of the authenticated user in next.js?

I am currently working on a claim page using next.js, where logged in Metamask addresses can perform the following tasks: Access data from a local .json file to check eligibility for claiming an item and display the claim page. Submitting a form to update ...

javascriptjsonnext.jsweb3js

Ways to assign values to an array within an object

I'm attempting to transfer the contents of one array into an array within an object, but I keep encountering this error: Type 'any[]' is not assignable to type '[]'. Target allows only 0 element(s) but source may have more. Here ...

javascriptarraystypescript

Properly maintaining child processes created with child_process.spawn() in node.js

Check out this example code: #!/usr/bin/env node "use strict"; var child_process = require('child_process'); var x = child_process.spawn('sleep', [100],); throw new Error("failure"); This code spawns a child process and immediately ...

javascriptnode.js

Error message when using React styled components: Wrapper component is throwing an error stating "Unsupported use of kebab-case in css properties within objects. Perhaps you meant to use ariaLabel

Exploring the usage of emotion/styled v11 Context To alter the default type of all buttons in my project, I created a wrapper component called WrappedButton for the HTML <button>. In order to apply styling to this new WrappedButton component (styled ...

javascriptreactjstypescriptaccessibility

Unlock the power of TypeScript's inheritance by utilizing static methods for type

In my TypeScript project, I have two classes: BaseModel and HotelModel. The HotelModel extends the BaseModel class, which provides static methods like findById, all, etc. export default class BaseModel { private collection:string _id:string | undefine ...

javascriptnode.jstypescript

Sending optional data in Angular routesIn Angular, you can include additional

In my project utilizing angular 5, I have a lengthy routing file: const homeRoutes: Routes = [ { path: 'home', component: HomeComponent, children: [ { path: 'registration', component: RegistrationCompone ...

javascriptangulartypescriptangular5angular-routing

capture the event when a value is submitted into the input field

One of the challenges I'm facing involves an input field intended for user emails I am trying to capture two specific events from this field using JavaScript The first event is triggered by clicking on the input field itself. The second event I need ...

javascripthtmljquery

Using multer to transfer variables to next handler

Utilizing multer for image uploads involves a specific configuration. Here is an example of how to set up multer: import multer from "multer"; import * as mime from "mime-types"; import path from "path"; export const storage = multer.diskStorage({ dest ...

javascripttypescriptexpressmiddlewaremulter

How can I transfer data from a C# code to a JavaScript file in asp.net?

I am faced with the task of transferring values from a C# class to a JavaScript file. To achieve this, I have generated a string in C# which contains the values of the list as follows: count = 0; JString = "["; for(i=0; i<x; i++) { JString += "{Sou ...

c#javascriptasp.net

Unexpected outcomes can arise from rotating looped meshes

In my current three.js project, I am working with a total of 100 meshes which are organized into 10 different scenes: // Adding 100 meshes to 10 scenes based on an array containing 100 elements for (var i = 0; i < data.length; i++) { mesh = new ...

javascriptthree.js

Having trouble retrieving a value from a .JSON file (likely related to a path issue)

My React component is connected to an API that returns data: class Item extends Component { constructor(props) { super(props); this.state = { output: {} } } componentDidMount() { fetch('http://localhost:3005/products/157963') ...

javascriptjsonreactjs

NodeJS Json file experiencing constant rollback issues

I developed a Discord bot in Node.js that tracks the number of messages sent by each user and stores the data in a JSON file. With only about 20 users on the server, I believed using a database was unnecessary. However, I've encountered an issue where ...

javascriptnode.jsdiscorddiscord.jsbots