Three.js：绘制点

Question

对于一个网络项目，我想用 Three.js 绘制随机点。

这是我目前的代码：

<script type="module">

  import * as THREE from 'https://threejs.org/build/three.module.js';

            import { TrackballControls } from 'https://threejs.org/examples/jsm/controls/TrackballControls.js';

            let camera, scene, renderer, controls;

            init();
            animate();

            function init() {

                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( 0xffffff );

                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
                camera.position.set( 0, 0, 500 );

                controls = new TrackballControls( camera, renderer.domElement );
                controls.minDistance = 200;
                controls.maxDistance = 500;

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

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

                //






                //


                const randomPoints = [];

                for ( let i = 0; i < 10; i ++ ) {

                    randomPoints.push( new THREE.Vector3( ( i - 4.5 ) * 50, THREE.MathUtils.randFloat( - 50, 50 ), THREE.MathUtils.randFloat( - 50, 50 ) ) );

                }

                const randomSpline = new THREE.CatmullRomCurve3( randomPoints );

                //

                const extrudeSettings2 = {
                    steps: 120,
                    bevelEnabled: false,
                    extrudePath: randomSpline
                };


                const pts2 = [], numPts = 5;

                for ( let i = 0; i < numPts * 2; i ++ ) {

                    const l = i % 2 == 1 ? 10 : 10;

                    const a = i / numPts * Math.PI;

                    pts2.push( new THREE.Vector2( Math.cos( a ) * l, Math.sin( a ) * l ) );

                }

                const shape2 = new THREE.Shape( pts2 );

                const geometry2 = new THREE.ExtrudeGeometry( shape2, extrudeSettings2 );

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

                const mesh2 = new THREE.Mesh( geometry2, material2 );

                scene.add( mesh2 );


                //

                const materials = [  material2 ];

                const extrudeSettings3 = {
                    depth: 40,
                    steps: 1,
                    bevelEnabled: true,
                    bevelThickness: 2,
                    bevelSize: 4,
                    bevelSegments: 1
                };

                const geometry3 = new THREE.ExtrudeGeometry( shape2, extrudeSettings3 );

                const mesh3 = new THREE.Mesh( geometry3 );

                mesh3.position.set( 150, 100, 0 );


            }

            function animate() {

                requestAnimationFrame( animate );

                controls.update();
                renderer.render( scene, camera );

            }

        </script>

目前，一切都基于样条线。结果不应基于挤压，而应基于随机点。我真的不知道如何获得随机分数。它有什么特殊功能吗？或者可以使用其他功能吗？

我会非常感谢您的帮助！ :)

Answer 1

我认为使用ConvexGeometry 是一个不错的起点。你给它一个点数组/ Vector3（我看到你在变量 randomPoints 下创建）作为参数，它会为你创建一个形状。

我看到你使用了 CatmullRomCurve3，这可能是一个很好的工具来创建你提到的点之间的曲线。我们可以将这两种想法结合起来，创建一个更曲线的模型。

const divisions = 25; // The amount of divisions between points
const catmullPoints = new THREE.CatmullRomCurve3( randomPoints, true, "catmullrom", 0.5 ).getPoints(divisions);
const geometryConvex = new ConvexGeometry( randomPoints );

所以现在你有了一个形状有点随机化的几何图形。关于它的事情是它看起来比您提供的示例形状更“几何”。所以你可以尝试做的是将你的 randomPoints 划分为块，即多个子数组，并执行与上述类似的方法，基本上将创建的几何图形保存到一个单独的数组中，我们称之为 geometries，然后您可以使用 mergeBufferGeometries 从这些几何图形中创建单个几何图形，这将提供更抽象的形状。代码：

  const size = THREE.MathUtils.randInt(2,10); // the number of sub arrays can be another parameter to randomize
  const pointsChunk = chunk([...randomPoints], size); // you can use lodash or other chunk algorithms found online
  
  const geometries = [];
  for ( let i = 0 ; i < pointsChunk.length ; i++) {
     const divisions = 25;
     const catmullPoints = new THREE.CatmullRomCurve3( pointsChunk[i], true, "catmullrom", 0.5 ).getPoints( divisions );
     geometries.push(new ConvexGeometry( catmullPoints ));
  }
  
  const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries( geometries );

可能有更多方法可以解决，但我相信 ConvexGeometry 绝对是一个不错的起点。 这是我的尝试：https://jsfiddle.net/9rc503tn/2