three.js: Custom built shapes

Question

three.js: Custom built shapes

I have been attempting to create a custom THREE.Geometry from scratch. However, when I try to use it with a THREE.Mesh, I encounter the following error:

TypeError: faces3 is undefined @ three.js:20426

The geometry is successfully created and displayed on the screen, although I am faced with this error message.

Below is the code snippet that I am currently using:

makePlane = function(width, height)
{
    var geom = new THREE.Geometry();

    var v0 = new THREE.Vector3(0, 0, 0);
    var v1 = new THREE.Vector3(width, 0, 0);
    var v2 = new THREE.Vector3(width, height, 0);

    geom.vertices.push(v0);
    geom.vertices.push(v1);
    geom.vertices.push(v2);

    var face = new THREE.Face3(0, 1, 2);

    geom.faces.push(face);

    return geom;
};

Can anyone provide insight into what additional steps may be required for proper functionality?

Update: The issue persists in version R62. This problem is not exclusive to custom geometries as it also occurs with geometry generated by three.js' built-in PlaneGeometry class. It's possible that this is a bug within three.js, and I intend to report it accordingly.

I must clarify that contrary to my previous statement, execution does not actually stop. I simply receive the error message and believe there should be no errors if everything is set up correctly.

Update 2: A related issue has been documented here, however, it appears to have been resolved and closed.

javascript three.js

Answer 1

Answer №1

In order to ensure accurate results in subsequent computation steps, it is recommended to incorporate the following lines prior to returning the geom-Object:

geom.computeCentroids();
geom.computeFaceNormals();
geom.computeVertexNormals();

Answer 2

In order to ensure accurate results in subsequent computation steps, it is recommended to incorporate the following lines prior to returning the geom-Object:

geom.computeCentroids();
geom.computeFaceNormals();
geom.computeVertexNormals();

Answer 3

Answer №2

To start off, ensure that you have the most recent version of the three.js library installed.

For geometry to function properly, it is important to have certain elements in place. You will need a renderer, camera, scene, and the actual geometry.

According to the documentation for Geometry, you should include methods like computeCentroids() and computeBoundingBox() to process the geometry data.

Avoid returning values as it can prevent your object from appearing correctly. Here is a functional code snippet based on your requirements. Just double-check your reference to three.js:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Custom Geometry</title>
</head>
<body>
    <script src="three.min.js"></script>
    <script>

        var container,
            camera,
            scene,
            renderer,
            geom;

        init();

        function init() {
            container = document.createElement('div');
            document.body.appendChild(container);

	//renderer
            renderer = new THREE.CanvasRenderer(); //Using CanvasRenderer with simple geometry
            renderer.setSize(window.innerWidth, window.innerHeight);
	    //scene
            scene = new THREE.Scene();
            //camera
            camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 2000);
            camera.position.z = 500;

            //Your custom geometry creation goes here
            makePlane(200, 300);

            container.appendChild(renderer.domElement);

            renderer.render(scene, camera);

        }

        function makePlane(width, height) {

            var material = new THREE.MeshBasicMaterial({ color: 0x297bbb });
            geom = new THREE.Geometry()

            geom.vertices.push(new THREE.Vector3(0, 0, 0));
            geom.vertices.push(new THREE.Vector3(width, 0, 0));
            geom.vertices.push(new THREE.Vector3(width, height, 0));

            geom.faces.push(new THREE.Face3(0, 1, 2));

            //return geom; //This line is not needed

            geom.computeBoundingSphere(); //<--Include necessary calculations here

            geoMesh = new THREE.Mesh(geom, material); //Adding custom geometry to a mesh using a particular material
            geoMesh.position.y = -50;

            scene.add(geoMesh);
        };

    </script>
</body>
</html>

Answer 4

To start off, ensure that you have the most recent version of the three.js library installed.

For geometry to function properly, it is important to have certain elements in place. You will need a renderer, camera, scene, and the actual geometry.

According to the documentation for Geometry, you should include methods like computeCentroids() and computeBoundingBox() to process the geometry data.

Avoid returning values as it can prevent your object from appearing correctly. Here is a functional code snippet based on your requirements. Just double-check your reference to three.js:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Custom Geometry</title>
</head>
<body>
    <script src="three.min.js"></script>
    <script>

        var container,
            camera,
            scene,
            renderer,
            geom;

        init();

        function init() {
            container = document.createElement('div');
            document.body.appendChild(container);

	//renderer
            renderer = new THREE.CanvasRenderer(); //Using CanvasRenderer with simple geometry
            renderer.setSize(window.innerWidth, window.innerHeight);
	    //scene
            scene = new THREE.Scene();
            //camera
            camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 2000);
            camera.position.z = 500;

            //Your custom geometry creation goes here
            makePlane(200, 300);

            container.appendChild(renderer.domElement);

            renderer.render(scene, camera);

        }

        function makePlane(width, height) {

            var material = new THREE.MeshBasicMaterial({ color: 0x297bbb });
            geom = new THREE.Geometry()

            geom.vertices.push(new THREE.Vector3(0, 0, 0));
            geom.vertices.push(new THREE.Vector3(width, 0, 0));
            geom.vertices.push(new THREE.Vector3(width, height, 0));

            geom.faces.push(new THREE.Face3(0, 1, 2));

            //return geom; //This line is not needed

            geom.computeBoundingSphere(); //<--Include necessary calculations here

            geoMesh = new THREE.Mesh(geom, material); //Adding custom geometry to a mesh using a particular material
            geoMesh.position.y = -50;

            scene.add(geoMesh);
        };

    </script>
</body>
</html>

three.js: Custom built shapes

Answer №1

Answer №2

Similar questions

Creating immersive 3D graphics using Three.js

Refresh and storing canvas after submitting form

Main.js in Electron cannot find the NODE_ENV environment variable

I am interested in discovering the optimal method for loading a vehicle to its maximum capacity by exploring various combinations

Is the "supports" feature supported by the browser?

The vertical navigation pills in Bootstrap 4 are not functioning properly as anticipated

Use a for loop to iterate through elements and retrieve input values using getElementById()

Starting up a React application with the constructor

Moving Image Progress Indicator

Unable to establish connection between Router.post and AJAX

Modify an element in an array seamlessly

Issues with Async Ajax functionality are being reported specifically in Safari browsers when a redirect

How can I restrict the number of input data to 10 on a single page in a TodoList application?

The error message "global.HermesInternal - Property 'HermesInternal' is not found in the type 'Global & typeof globalThis'" appeared

Time picker in Bootstrap - Ensuring end time is not earlier than start time validation

Struggling with a straightforward issue in Ajax that is proving to be a challenge to resolve

What is the best way to ensure that a specific number of XHR callbacks have successfully completed before proceeding with further actions?

Having difficulty interpreting the date

Avoid repeating the same options in a dropdown menu

Utilizing the Flex property on the parent div ensures that all child elements receive an equal width