ThreeJS - Simple Extrusion Issue

Question

I am struggling to do something which should be quite easy to do, but I have been unable to find any example which addresses this scenario. Essentially all I want to do is extrude a simple profile along a rectangular path:

(As I am new here I cannot post images, but these can be viewed on the forum to explain what I should be getting and what I am actually generating. Original Question on ThreeJS Forum)

I would appreciate it if someone could look at the code below and tell me what I am doing wrong:

'----------------------------------------------------------------------------------------------------------------

<script>

        var container;

        var camera, scene, renderer, controls;

        init();
        animate();

        function init() {
            //SCENE SETUP
            renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

            scene = new THREE.Scene();
            scene.background = new THREE.Color( 0x222222 );

            camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
            camera.position.set( -250, 150, 200 );
            camera.lookAt(new THREE.Vector3(0, -50, 0))
            controls = new THREE.TrackballControls( camera, renderer.domElement );
            controls.minDistance = 200;
            controls.maxDistance = 500;

            scene.add( new THREE.AmbientLight( 0x222222 ) );

            var light = new THREE.PointLight( 0xffffff );
            light.position.copy( camera.position );
            scene.add( light );


            //PROFILE SHAPE
            var spts = [];
            spts.push(new THREE.Vector2(0, 0));
            spts.push(new THREE.Vector2(10, 0));
            spts.push(new THREE.Vector2(10, 25));
            spts.push(new THREE.Vector2(-5, 25));
            spts.push(new THREE.Vector2(-5, 20));
            spts.push(new THREE.Vector2(0, 20));


            //PATH POINTS
            var ppth = []
            ppth.push(new THREE.Vector3(0,0,10));
            ppth.push(new THREE.Vector3(100, 0,10));
            ppth.push(new THREE.Vector3(100, 200,10));
            ppth.push(new THREE.Vector3(0, 200,10));

            //-----------------------------------------------EXTRUSION PATH AS A CURVEPATH 
            var cpth = new THREE.CurvePath()

            //THE FOLLOWING STATEMENT APEARS TO CREATE NO NEW CURVES
            //cpth.createGeometry(ppth)

            //ADD CURVES EXPLICITELY
            var v1 = new THREE.LineCurve(new THREE.Vector3(0,0,0), new THREE.Vector3(100,0,0));
            var v2 = new THREE.LineCurve(new THREE.Vector3(100,0,0), new THREE.Vector3(100,200,0));
            var v3 = new THREE.LineCurve(new THREE.Vector3(100, 200, 0), new THREE.Vector3(0, 200, 0));
            var v4 = new THREE.LineCurve(new THREE.Vector3(0, 200, 0), new THREE.Vector3(0, 0, 0));

            cpth.add(v1);
            cpth.add(v2);
            cpth.add(v3);
            cpth.add(v4);
            cpth.autoClose = true;
            //cpth.update;

            //SET EXTRUSION PATH TO CURVEPATH 
            expth = cpth

            //EXTRUSION SETTINGS
            var extrudeSettings = {
                steps: 200,
                bevelEnabled: false,
                extrudePath: expth
            };

            // GENERATE SCENE GEOMETRY
            var shape = new THREE.Shape( spts );

            var geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);


            var material2 = new THREE.MeshLambertMaterial( { color: 0xff8000, wireframe: false } );

            var mesh = new THREE.Mesh( geometry, material2 );
            mesh.position.x = -50;
            mesh.position.y = -100;

            scene.add( mesh );
        }

</script>

score 0 · Answer 1 · answered Jun 21 '18 at 18:57

Although at a high level, the concept may look simple, code wise, it may not be so.

I did peak at your link regarding the original question posted on the threejs forum and seems like someone did provid somewhat the solution, if not something close.

But at a high level, I believe the solution can be done in high level steps.

1 - find the new points extruded outward staying on the same plane. This can be done with the solution to a recent post of mine offset 2d polygon points

2 - Once you have those new points, you should be able to create the 2D shape with ShapeGeometry in conjunction with the original profile points using ShapteUtils.triangulateShape() to define a hole in the shape when building the triangles.

3 - Once you have your new defined 2D shape, use ExtrudeGeometry to give it depth.

ThreeJS - Simple Extrusion Issue

1 Answers1