“This is the 20th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

ShapeThe shape of

  • Draw a two-dimensional shape plane by path. In simple terms, a graph is formed by connecting irregular lines on a plane.
  • Want to be inthree.jsThe display needs to be usedExtrudeGeometry, ShapeGeometryTo generate geometry.
  • It has one.holesProperty to make holes in the shape plane..holesValue is aTHREE.Path()Array that defines a two-dimensional path.

Common plotting function

  1. moveTo(x, y)Moves the drawing point to the specified x or y coordinates.
  2. lineTo(x, y)Creates a line from the current position to the x and y coordinates.
  3. quadricCurveTo(cpx, cpy, x, y)Create a conic to the x and y coordinates.
  4. bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y)Create a Bezier curve to the x and y coordinates.
  5. splineThru(points)Draws a smooth spline curve along the set of coordinates specified by the argument.

ShapeGeometryShape buffer geometry

  • Creates a single-sided polygon geometry from one or more path shapes.
  • new THREE.ShapeGeometry(shapes, curveSegments)Two parameters:
  1. shapesOne or more shapes(THREE.Shape object).
  2. curveSegmentsThe number of segments of the shape.

ExtrudeGeometryExtrude buffer geometry

  • Stretch a two-dimensional figure into a three-dimensional figure.
  • new THREE.ExtrudeGeometry(shapes, options)Two parameters:
  1. shapesOne or more shapes(THREE.Shape object).
  2. optionsConfiguration parameters for stretching into 3d graphics.

Draw irregular graph

  • Based on the code
<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>learning</title>
  </head>
  <body>
    <canvas id="c2d" class="c2d" width="1000" height="500"></canvas>
    <script type="module">
      import * as THREE from './file/three.js-dev/build/three.module.js'
      import { OrbitControls } from './file/three.js-dev/examples/jsm/controls/OrbitControls.js'

      const canvas = document.querySelector('#c2d')
      / / the renderer
      const renderer = new THREE.WebGLRenderer({ canvas })

      const fov = 40 // Scope of view
      const aspect = 2 // The camera defaults to the width ratio of the canvas
      const near = 0.1 / / nearly flat
      const far = 10000 / / far plane
      // Perspective projection camera
      const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
      camera.position.set(0.10.10)
      camera.lookAt(0.0.0)
      // Control the camera
      const controls = new OrbitControls(camera, canvas)
      controls.update()

      / / the scene
      const scene = new THREE.Scene()

      / / rendering
      function render() {
        renderer.render(scene, camera)
        requestAnimationFrame(render)
      }
      requestAnimationFrame(render)
    </script>
  </body>
</html>
Copy the code
  • Draw a heart-shaped path.
      // Create a heart-shaped path
      const heartShape = new THREE.Shape()
      heartShape.moveTo(0.1.5)
      heartShape.bezierCurveTo(2.3.5.4.1.5.2, -0.5)
      heartShape.lineTo(0, -2.5)
      heartShape.lineTo(-2, -0.5)
      heartShape.bezierCurveTo(-4.1.5, -2.3.5.0.1.5)
Copy the code

Heart-shaped plane

  • use.ShapeGeometryDraw the plane.
      // Heart-shaped plane
      const geometry = new THREE.ShapeGeometry(heartShape)
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00.side: THREE.DoubleSide })
      const mesh = new THREE.Mesh(geometry, material)
      scene.add(mesh)
Copy the code

Tensile 3d figure

  • use.ExtrudeGeometryDraw 3d graphics.
  • Enhance the three-dimensional feeling, add lights above and below the geometry.
  {
    / / light
    const color = 0xffffff
    const intensity = 1
    const light = new THREE.DirectionalLight(color, intensity)
    light.position.set(-1.10.4)
    scene.add(light)
  }
  {
    / / light
    const color = 0xffffff
    const intensity = 1
    const light = new THREE.DirectionalLight(color, intensity)
    light.position.set(-1, -10, -4)
    scene.add(light)
  }
Copy the code
  • Configure parameters.
  const extrudeSettings = {
    steps: 2.depth: 3
  }
Copy the code
  • use.ExtrudeGeometry, stretched into a three-dimensional graph.
  const geometry = new THREE.ExtrudeGeometry(heartShape, extrudeSettings)
  const material = new THREE.MeshPhongMaterial({ color: 0x00ff00.side: THREE.DoubleSide })
  const mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)
Copy the code

Dig a hole

  • use.PathCreate a path. Put into shape.holesIn the.
      const shape_c = new THREE.Path()
      shape_c.moveTo(-1.1)
      shape_c.lineTo(-1, -1)
      shape_c.lineTo(1, -1)
      shape_c.lineTo(1.1)
      shape_c.lineTo(-1.1)
      heartShape.holes.push(shape_c)
Copy the code

  • .ExtrudeGeometryThere are a lot of configuration parameters, need to understand the details can be viewed in the official website after their own use.