computeVertexNormals throws error - Uncaught TypeError: computeVertexNormals is not a function

Questions
,
1

I’m trying to get computeVertexNormals() to work but I get the error: Uncaught TypeError: computeVertexNormals is not a function. I included the entire code for my html. Does anyone have an idea of why I’m getting this error?

<!DOCTYPE html>
<html lang="en" class="js">
<script type="text/javascript"></script>
<head>
    <title>set surface normal</title>
    <style>
    </style>
</head>
<body>
    <canvas id="c"></canvas>
    <script type="module">
        import * as THREE from "https://cdnjs.cloudflare.com/ajax/libs/three.js/r118/three.module.js";
        import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three@v0.108.0/examples/jsm/controls/OrbitControls.js";
        import { GUI } from "https://cdn.jsdelivr.net/npm/three@v0.108.0/examples/jsm/libs/dat.gui.module.js";

        // query canvas ID
        var canvas = document.getElementById("c");

        // assign the renderer
        var renderer = new THREE.WebGLRenderer({
            canvas: canvas,
            antialias: true,
            alpha: true
        });

        // document body assignment
        const body = document.body;

        // define the main function; purpose is to initialize the scene.
        function main() {

            document.body.appendChild(renderer.domElement);
            var scene = new THREE.Scene();

            var camera = new THREE.PerspectiveCamera(48, 1, 0.1, 100000);
            camera.position.z = 10;
            scene.add(camera);

            if (
                /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
                    navigator.userAgent
                )
            ) {
                renderer.setSize(300, 300); // sets render size for mobile devices
            } else {
                renderer.setSize(800, 800); // sets render size for PCs
            }

            renderer.setPixelRatio(devicePixelRatio);

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

// create a plane 2sided material
										
var geometry1 = new THREE.PlaneBufferGeometry( 5, 5, 32 );
var material1 = new THREE.MeshBasicMaterial( {color:("rgb(100, 100, 255)"), side: THREE.DoubleSide} );
var plane1 = new THREE.Mesh( geometry1, material1 );
scene.add( plane1 );
plane1.geometry1.computeVertexNormals();


var geometry2 = new THREE.PlaneBufferGeometry( 5, 5, 32 );
var material2 = new THREE.MeshBasicMaterial( {color:("rgb(255, 100, 100)"), side: THREE.DoubleSide} );
var plane2 = new THREE.Mesh( geometry2, material2 );
scene.add( plane2 );
plane2.rotation.x = Math.PI*0.5;

// create face normal helpers
var helperPlane1 = new VertexNormalsHelper( plane1, 2, 0x00ff00, 1 );
scene.add(helperPlane1);


    var axesHelper = new THREE.AxesHelper( 5 );
    scene.add( axesHelper );

            function animate() {
                controls.update();

                renderer.render(scene, camera);

                requestAnimationFrame(animate);

            } // end function animate

            animate();

        } // close function main

        main();

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

You can’t create an instance of VertexNormalsHelper without importing it first.

Besides, please ensure to use examples files from the same release as the main lib. Meaning OrbitControls should be from r118, too.

3

Ah. Understand its a Helper and needs an Import statement.
And yes, get your point about mixing release versions. Temporary approach until I can get a node js server setup.

Thanks Mugen87!

4

Can I get a follow up question on topic?
I setup a local server, and can now load VertexNormalsHelper. Works great with one caveat. Is there a reason .computeVertexNormals throws an undefined error if applied to parent THREE.Mesh? Works if applied to the THREE.PlaneBufferGeometry directly.

Blockquote
var geometry1 = new THREE.PlaneBufferGeometry( 5, 5, 32 );
geometry1.computeVertexNormals();
var material1 = new THREE.MeshBasicMaterial( {color:(“rgb(100, 100, 255)”), side: THREE.DoubleSide} );
var plane1 = new THREE.Mesh( geometry1, material1 );
scene.add( plane1 );
//plane1.geometry1.computeVertexNormals(); // returns undefined

Blockquote

5

plane1 does not have a property called geometry1. Try it with just geometry.

6

Yup. That worked! Thanks again!

Blockquote
plane1.geometry.computeVertexNormals();
Blockquote