Question

我正在努力做一些应该很容易做的事情，但我一直无法找到解决这个问题的任何例子。基本上我想做的就是沿着矩形路径挤出一个简单的轮廓：

（由于我是新手，我无法发布图片，但可以在论坛上查看这些图片，以解释我应该获得的内容以及我实际生成的内容。 Original Question on ThreeJS Forum）

如果有人能查看下面的代码并告诉我我做错了什么，我将不胜感激：

＆＃39; ------------------------------------------- -------------------------------------------------- -------------------

<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>

Answer 1

尽管从高级的角度来看，从代码角度来看，这个概念看起来可能很简单。

关于您在threejs论坛上发布的原始问题的链接，我的确达到了顶峰，似乎有人确实提供了解决方案，即使不是很接近的情况。

但是，从高层次上讲，我认为该解决方案可以在高层次上完成。

1-查找在同一平面上向外挤出的新点。这可以通过我最近发布的offset 2d polygon points

解决方案来完成

2-在拥有这些新点之后，应该可以使用ShapeGeometry与原始轮廓点一起使用ShapteUtils.triangulateShape（）创建2D形状，以在构建三角形时在形状中定义一个孔。

3-一旦定义了新的2D形状，请使用ExtrudeGeometry为其指定深度。

ThreeJS - 简单挤出问题

1 个答案: