本文已参与「新人创作礼」活动,一起开启创作之路。

520节日怎么过?用代码把女朋友感动哭吧~~

这朵花是去年520之前写的,但是忙过头了,没有来得及发出来博客,就被我遗忘了,今年又到了这个日子,作为单身贵族的我,有必要把这朵花拿出来送给非单身的小哥哥们~~

希望路过的小哥哥们给我点点关注哇~~

我可是熬夜到凌晨一点多,给大html是什么意思家写得数组词这个文章哦~~

这里补充一下我的代码地址吧

  • 码云:gitee.com/tangdd36909…
  • github: github.com/tangiteegdou3690…
  • 还有我做的一些案例展示:(包括但不限于 自动漫游,手动控制键盘鼠标漫游,获取数据报警,鼠标滑过显示当前物体名称,等等功能)
  • www.bilibili.com/video/BV1r6…

520节日怎么过?用代码把女朋友感动哭吧~~

  • 碎碎念,数组随着three.js的版html标签属性大全本升级,换汤不换药,需要修改的代码还是很少的,大家可gitee以放心学习three.js哦~~

话不多说了,直接上代码,我注释写得还是很详细的哦~~

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "',
            h: item.h,
            radius: item.radius,
          },
          renderOrder
        )
        myGroup.renderOrder = renderOrder++
        item.segment % 2 === 1
          ? textureXDown.push(myTexture)
          : textureXDown02.push(myTexture)
        scene.add(myGroup)
      }
    }
    function getTexture(url) {
      // 创建一个纹理
      let texture = new THREE.TextureLoader().load(url)
      // 设置uv重复包裹方式
      texture.wrapS = THREE.RepeatWrapping
      texture.wrapT = THREE.RepeatWrapping
      // 设置重复次数
      texture.repeat.set(1, 1)
      texture.needsUpdate = true
      return texture
    }
    /**
     * 创建一些贝塞尔曲线
     * @param {Object} Vector3Arr
     * @param {Object} conf 配置
     * @param {String} conf.url 曲线贴图
     * @param {Number} conf.h 控制曲线中间那个点的高度
     * @param {Number} conf.radius 控制曲线的粗细
     * @param {THREE.Group} group 群组
     */
    function addFlyLine(Vector3Arr, conf, renderOrder = 100) {
      let group = new THREE.Group()
      const texture = getTexture(conf.url)
      Vector3Arr.forEach((_) => {
        let fromV3 = _.from.clone().add(_.to.clone()).divideScalar(2)
        fromV3.y = conf.h // 曲线中间的那个点高度
        let quadraticBezier3 = new THREE.QuadraticBezierCurve3(_.from, fromV3, _.to) // 三维二次贝塞尔曲线起点,中间的控制点,终点
        let pointMeshArr = quadraticBezier3.getPoints(80)
        let pointArr = []
        pointMeshArr.forEach(function (point) {
          return pointArr.push([point.x, point.y, point.z])
        })
        let myMaterial = new THREE.MeshBasicMaterial({
          map: texture,
          side: THREE.BackSide,
          transparent: true,
          color: _.color,
        })
        let animateLine = createVector3Line({
          pointList: pointArr,
          material: myMaterial,
          number: 100,
          radius: conf.radius ? conf.radius : 1, // 控制管道的宽度
        })
        animateLine.renderOrder = renderOrder++
        group.add(animateLine)
      })
      return { group, texture }
    }
    /**
     * 由两点之间连线成贝塞尔曲线
     * @param {Object} option 配置项
     * @param {Object} option.number 管道面数
     * @param {Object} option.radius 管道粗细程度--直径
     */
    function createVector3Line(option) {
      const l = []
      option.pointList.forEach(e => l.push(new THREE.Vector3(e[0], e[1], e[2])))
      const curve = new THREE.CatmullRomCurve3(l) // 曲线路径
      const tubeGeometry = new THREE.TubeGeometry(
        curve,
        option.number || 50,
        option.radius || 1,
        option.radialSegments
      )
      return new THREE.Mesh(tubeGeometry, option.material)
    }
    /**
     * 生成围绕一个中心向四周发散的飞线数组
     * @param {Object} conf 配置项
     * @param {Number} conf.size 控制范围大小(圆形大小)
     * @param {Number} conf.segment 控制生成多少条线
     * @param {Number} conf.fromy 起点的位置的y高度
     * @param {Number} conf.toy 终点的位置的y高度
     * @param {Object} conf.position 位置
     * @param {String} conf.color 颜色
     */
    function makeFlyLine(conf) {
      const arr = getWorldPosition({
        size: conf.size,
        segment: conf.segment,
        position: conf.position,
      })
      console.log(arr)
      const vector3Arr = []
      arr.forEach((_, i) => {
        if (i > 0) {
          vector3Arr.push({
            from: new THREE.Vector3(
              arr[0].x,
              conf.fromy ? conf.fromy : 0,
              arr[0].y
            ),
            to: new THREE.Vector3(
              Math.floor(arr[i].x * 100) / 100,
              conf.toy ? conf.toy : 0,
              Math.floor(arr[i].y * 100) / 100
            ),
            color: conf.color,
          })
        }
      })
      return vector3Arr
    }
    /**
    * 获取正多边形每个顶点的坐标数组
    * 可以用于飞线制作
    * @param {Object} conf 配置项
    * @param {Number} conf.size 控制范围大小(圆形大小)
    * @param {Number} conf.segment 控制生成多少个点
    * @param {Object} conf.position 位置
    * @return {Array} worldPositionArr 多边形的顶点位置数组
    */
    function getWorldPosition(conf) {
      const worldPositionArr = []
      const geometry = new THREE.CircleGeometry(conf.size, conf.segment)
      var material = new THREE.MeshBasicMaterial({ color: 0xf37b1d })
      var vertexCoordinates = new THREE.Mesh(geometry, material)
      vertexCoordinates.position.set(
        conf.position && conf.position.x ? conf.position.x : 0,
        conf.position && conf.position.y ? conf.position.y : 0,
        conf.position && conf.position.z ? conf.position.z : 0
      )
      scene.updateMatrixWorld(true)
      var worldPosition = new THREE.Vector3()
      vertexCoordinates.getWorldPosition(worldPosition)
      vertexCoordinates.geometry.vertices.forEach((el) => {
        var vector = el.clone()
        vector.applyMatrix4(vertexCoordinates.matrixWorld)
        worldPositionArr.push(vector)
      })
      return worldPositionArr
    }
  </script>
</body>
</html>

欢迎大家指出文章需要改正之处~
学无止境,合作共赢

520节日怎么过?用代码把女朋友感动哭吧~~

欢迎路过的小哥哥小姐姐们提出更好的意见哇~~