美文网首页
使用Three.js的LatheGeometry画一个胶囊

使用Three.js的LatheGeometry画一个胶囊

作者: 思我恋 | 来源:发表于2022-11-07 16:18 被阅读0次

    核心是使用LatheGeometry将一个2D的线扫描成3D物体

     function createObj() {
        // 创建的单个粒子的尺寸为(radius * 2, height + radius * 2, radius * 2)
        const radius = 4;
        const height = 192;
        itemHeight = radius * 2 + height;
        // 存放样条曲线的点集
        const points = [];
        //上半部分四分之一圆弧
        for (let i = Math.PI / 2; i > 0; i -= 0.3) {
          points.push(
            new THREE.Vector2(
              Math.cos(i) * radius,
              Math.sin(i) * radius + height / 2
            )
          );
        }
        //中间直线
        for (let i = height / 2; i > -height / 2; i -= height) {
          points.push(new THREE.Vector2(radius, i));
        }
        //下半部分四分之一圆弧
        for (let i = 0; i <= Math.PI / 2; i += 0.3) {
          points.push(
            new THREE.Vector2(
              Math.cos(i) * radius,
              -Math.sin(i) * radius - height / 2
            )
          );
        }
    
        // 补充一个点,去掉底部的小洞
        points.push(new THREE.Vector2(0, -radius - height / 2));
        console.log(points);
        const geometry = new THREE.LatheGeometry(points);
        const pngec = textureLoader.load(pngUrl);
        // 围绕中心点旋转180度
        // pngec.center = new THREE.Vector2(0.5, 0.5);
        // pngec.rotation = Math.PI;
        // pngec.mapping = THREE.UVMapping;
        const material = new THREE.MeshBasicMaterial({
          transparent: true,
          opacity: 0.6,
          vertexColors: false,
          map: pngec,
          blending: THREE.AdditiveBlending,
          color: new THREE.Color(0xffffff),
        });
        const mesh = new THREE.Mesh(geometry, material);
    
       return mesh;
      }
    

    相关文章

      网友评论

          本文标题:使用Three.js的LatheGeometry画一个胶囊

          本文链接:https://www.haomeiwen.com/subject/kpabtdtx.html