Developing perforations in three.js

This excerpt was sourced from a discussion on adding holes to rendered shapes in Three.js, as seen at THREEJS: add hole to rendered Shape. Despite trying the provided code, it is still not functioning as expected.

The encountered error message reads:

three.js:34206 Uncaught TypeError: Cannot read property 'concat' of undefined

var plane, vertices = [], planeShape;
        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xC0C0C0});

        vertices.push(
            new THREE.Vector3(-room_width/2,room_depth/2,0),
            new THREE.Vector3(room_width/2,room_depth/2,0),
            new THREE.Vector3(room_width/2,-room_depth/2,0),
            new THREE.Vector3(-room_width/2,-room_depth/2,0)
        );

        planeShape = new THREE.Shape(vertices);

        plane = new THREE.Mesh( new THREE.ShapeGeometry(planeShape), planeMaterial);

        scene.add(plane);

        var holes = [
            new THREE.Vector3(-room_width/4,room_depth/4,0),
            new THREE.Vector3(room_width/4,room_depth/4,0),
            new THREE.Vector3(room_width/4,-room_depth/4,0),
            new THREE.Vector3(-room_width/4,-room_depth/4,0)
        ],

        hole = new THREE.Path();
        hole.fromPoints(holes);

        var shape = new THREE.Shape(plane.geometry.vertices);
        shape.holes = [hole];
        var points = shape.extractPoints();

        plane.geometry.faces = [];

        var triangles = THREE.ShapeUtils.triangulateShape ( points.vertices, points.holes );

        for( var i = 0; i < triangles.length; i++ ){
            plane.geometry.faces.push( new THREE.Face3( triangles[i][0], triangles[i][1], triangles[i][2] ));
        }

edit::: ANS

        var plane, vertices = [], planeShape;
        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xC0C0C0});

        vertices.push(
            new THREE.Vector3(-150,-150,0),
            new THREE.Vector3(150,-150,0),
            new THREE.Vector3(150,150,0),
            new THREE.Vector3(-150,150,0)
        );

        planeShape = new THREE.Shape(vertices);

        plane = new THREE.Mesh( new THREE.ShapeGeometry(planeShape), planeMaterial);

        scene.add(plane);

        var holes = [
            new THREE.Vector3(-75,-75,0),
            new THREE.Vector3(75,-75,0),
            new THREE.Vector3(75,75,0),
            new THREE.Vector3(-75,75,0)
        ],

        hole = new THREE.Path();
        hole.fromPoints(holes);

        var shape = new THREE.Shape(plane.geometry.vertices);
        shape.holes = [hole];
        var points = shape.extractPoints();

        plane.geometry.faces = [];

        var triangles = THREE.ShapeUtils.triangulateShape ( points.shape, points.holes );

        plane.geometry.vertices.push(
            new THREE.Vector3(-75,-75,0),
            new THREE.Vector3(75,-75,0),
            new THREE.Vector3(75,75,0),
            new THREE.Vector3(-75,75,0)
        );
        for( var i = 0; i < triangles.length; i++ ){
            plane.geometry.faces.push( new THREE.Face3( triangles[i][0], triangles[i][1], triangles[i][2] ));
        }
javascriptthree.js

Answer №1

Discovering this information may benefit those who are new to the process of working with holes in shapes. A more streamlined approach is now available, eliminating the need for the older method that involved using "THREE.ShapeUtils.triangulateShape" and manually creating triangles.

//vertices represents the main shape or outline as a series of THREE.Vector2 instances
//holes is a collection of THREE.Path instances formed from THREE.Vector2 points
//When utilizing THREE.Vector3, the Z value will be disregarded.

var shape = new THREE.Shape(vertices);
shape.holes = holes;

var geometry = new THREE.ShapeBufferGeometry( shape );

...

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

Unable to access a user's public information using Instagram's API

I've spent the past week trying to create a simple Instagram preview application that should show a user's public data such as username, followers, following, and profile picture URL, but unfortunately, I haven't been able to find a solution ...

javascriptnext.jsinstagram-apiinstagram-graph-api

Having trouble binding form data to a React component with the onChange() method?

I've been working on developing an email platform exclusively for myself and encountered a roadblock with this React form not updating state when data is entered. After identifying the issue, it appears that the main problem lies in the React form not ...

javascriptreactjsformsapijsx

Trigger a JavaScript function when a key is pressed down

Hey everyone, I'm trying to figure out how to trigger a JavaScript function when a particular key is pressed. For example, I want the function down() to be executed when the down key is pressed and function left() when the left key is pressed. Is ther ...

javascripthtmlfunctionkeyboard

When using node.js with express, the req.on('end') event is triggered, but the req.on('data') event does not fire

When using body parser, you have the option of either: application/x-www-form-urlencoded body parser or json body parser Both options yield the same results. This is how the API is being called: $.ajax({ type:'post', url:'/ ...

javascriptnode.jsexpress

Determining the successful completion of an ajax request using jQuery editable plugin

I recently started using Jeditable to enable inline editing on my website. $(".video_content_right .project_description").editable(BASE_URL+"/update/description", { indicator: "<img src='" + BASE_URL + "/resources/assets/front/images/indicator ...

javascriptjqueryajaxjeditable

When the collapsed navbar is displayed, elements are pushed beyond the boundaries of their parent container (Bootstrap 5)

Introduction Utilizing Bootstrap 5 (included with webpack 5), I am implementing the grid system and collapse function to design the homepage of this website, featuring 2 sidebars that collapse into a top bar. On mobile devices, the navigation collapses a ...

javascripthtmlbootstrap-5

How to create a blinking effect for buttons in an Angular app with ng-if or ng-show

I've come across the same issue in two separate angular projects I've been involved with, but have not been able to find any discussion on this particular problem. This leads me to believe that there may be something I am overlooking. Let's ...

javascriptangularjsangularjs-scope

Encountering the "Not all code paths return a value" TypeScript error when attempting to manipulate a response before returning it, however, returning the response directly works without any issues

Encountering an issue where manipulating/process response and return triggers an error in TypeScript with the message "Not all code paths return a value.". Data is fetched from a backend API using RxJS lastValueFrom operator, along with lodash functions as ...

javascriptangulartypescriptasync-awaitrxjs

Are elements in React Native PanResponder capable of being clicked?

While I have movable panresponders, I also require the ability to click on one for an onPress event. Is it achievable? At present, they are <View> elements. If I attempt to switch them to <TouchableOpacity> or a similar element, it results in ...

javascriptiosreactjsreact-nativeanimated

Guide on utilizing angularjs $q.all() method with a dynamically generated set of promises

I am currently facing an issue with using $q.all() to wait for multiple promises to be resolved. I have created an array of promises and passed it to the all() method, but it doesn't seem to be working as expected. The promises in the array are gener ...

javascriptangularjsangular-promiseangular-resource

Ways to implement two functions within a single onclick event

Is it possible to call two functions with onclick event? <input id = "test" onclick="func1()"> Can I add another function as well? How would I go about doing that? ...

javascripthtml

Using AngularJS Material's mdDialog to show locally stored data in a template

In the controller, the section responsible for spawning mdDialog appears as follows: $scope.removeAttendee = function(item) { console.log(item); $mdDialog.show({ controller: DialogController, templateUrl: 'views/removeMsg.tm ...

javascriptangularjsangularjs-controllerasangularjs-material

Encountering an 'error' event during installation of the Meteorite router package with the command 'mrt add router'

Encountering an issue with mrt add router, I am receiving the following exception/error message: events.js:74 throw TypeError('Uncaught, unspecified "error" event.'); ^ TypeError: Uncaught, unspecified "error" event. at ...

javascriptnode.jsmeteormeteorite

CSS styling doesn't take effect until the page is reloaded due to the failure of cssText

After generating a new list item, it appears that the CSS styling is not being inherited until the page is reloaded. Even though I have added styling using cssText dynamically, it doesn't seem to be working as expected. I've attempted using cssT ...

javascriptcss

using getJSON method in jQuery to retrieve input value

Is it possible for users to input their ID number into an <input> box and retrieve the corresponding name from a MySQL database using JSON in JavaScript? I am having trouble figuring out how to send the ID value through JavaScript or jQuery. Here is ...

javascriptphpjquerymysqljson

How can I showcase array elements using checkboxes in an Ionic framework?

Having a simple issue where I am fetching data from firebase into an array list and need to display it with checkboxes. Can you assist me in this? The 'tasks' array fetched from firebase is available, just looking to show it within checkboxes. Th ...

javascriptangulartypescriptionic2ionic3

Ways to invoke external jQuery functions within Angular applications

In the midst of working on an Angular CLI Project, I find myself needing to incorporate some jQuery functionalities. To accomplish this task, I have added the necessary JavaScript files in the angular.json configuration: "scripts": [ "node_modules/jq ...

javascriptjqueryangularangular5

What is the best way to access a variable from one JavaScript file in a different file?

Currently, I have a simple cube scene set up in Three.js Now, my goal is to add camera movement using perlin noise. To achieve this, I found and incorporated the Perlin noise library into my project: https://github.com/josephg/noisejs I then included th ...

javascriptthree.js

Changing the state with alternative values is ineffective

To help illustrate my issue, I have created a simple sandbox environment: https://codesandbox.io/s/wizardly-fermat-egww0?file=/src/App.js Problem description: In my e-commerce application, there are 2 products, each with 2 different color variants. At t ...

javascriptreactjsobjectdynamicreact-hooks

Manipulating child elements in XML, JavaScript, and jQuery – the possibilities are endless!

I have a good grasp on how to extract elements and write them to a document in JavaScript using the HttpXMLRequest object. However, I am struggling to find resources that explain how to modify it further. I believe part of the issue is that I am unsure of ...

javascripthtmlxml