Three.js - 柱面幾何體

上一個
下一個

要在 Three.js 中建立柱面，可以使用 Three.CylinderGeometry。

  • radiusTop − 柱面的上半徑。預設值為 1。

  • radiusBottom − 柱面的下半徑。預設值為 1。

  • radialSegments − 柱面圓周上的段數。預設值為 8。

  • heightSegments − 沿柱面高度的面數。預設值為 1。

  • openEnded − 此布林值指示柱面的端部是否開放。預設值為 false，表示關閉。

  • thetaStart − 第一段的起始角度，預設為 0。

  • thetaLength − 圓形扇區的中心角，通常稱為 theta。預設值為 2* Math.PI，可形成一個完整的柱面。

const cylinder = new THREE.CylinderGeometry(
   radiusTop, radiusBottom, height,
   radialSegments, heightSegments,
   openEnded,
   thetaStart, thetaLength
)

示例

檢視以下示例。

cylinder.html

現場演示 
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Three.js - cylinder</title>
      <style>
         * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -applesystem, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
               Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
         }
         html,
         body {
            height: 100vh;
            width: 100vw;
         }
         #threejs-container {
            position: block;
            width: 100%;
            height: 100%;
         }
      </style>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.js"></script>
   </head>
   <body>
      <div id="threejs-container"></div>
      <script type="module">
         // Cylinder geometry in Three.js
         // GUI
         const gui = new dat.GUI()
         // sizes
         let width = window.innerWidth
         let height = window.innerHeight
         // scene
         const scene = new THREE.Scene()
         scene.background = new THREE.Color(0x262626)
         // camera
         const camera = new THREE.PerspectiveCamera(30, width / height, 0.1, 100)
         camera.position.set(0, 0, 10)
         const camFolder = gui.addFolder('Camera')
         camFolder.add(camera.position, 'z').min(10).max(60).step(10)
         camFolder.open()
         // cylinder
         const geometry = new THREE.CylinderGeometry()
         const material = new THREE.MeshBasicMaterial({
            color: 0xffffff,
            wireframe: true
         })
         const materialFolder = gui.addFolder('Material')
         materialFolder.add(material, 'wireframe')
         materialFolder.open()
         const cylinder = new THREE.Mesh(geometry, material)
         scene.add(cylinder)
         const cylinderProps = {
            radiusTop: 1,
            radiusBottom: 1,
            height: 1,
            radialSegments: 8,
            heightSegments: 1,
            openEnded: false,
            thetaStart: 0,
            thetaLength: 2 * Math.PI
         }
         const props = gui.addFolder('Properties')
         props
            .add(cylinderProps, 'radiusTop', 1, 50)
            .step(1)
            .onChange(redraw)
            .onFinishChange(() => console.dir(cylinder.geometry))
         props.add(cylinderProps, 'radiusBottom', 0, 50).onChange(redraw)
         props.add(cylinderProps, 'height', 0, 100).onChange(redraw)
         props.add(cylinderProps, 'radialSegments', 1, 50).step(1).onChange(redraw)
         props.add(cylinderProps, 'heightSegments', 1, 50).step(1).onChange(redraw)
         props.add(cylinderProps, 'openEnded').onChange(redraw)
         props.add(cylinderProps, 'thetaStart', 0, 2 * Math.PI).onChange(redraw)
         props.add(cylinderProps, 'thetaLength', 0, 2 * Math.PI).onChange(redraw)
         props.open()
         function redraw() {
            let newGeometry = new THREE.CylinderGeometry(
               cylinderProps.radiusTop,
               cylinderProps.radiusBottom,
               cylinderProps.height,
               cylinderProps.radialSegments,
               cylinderProps.heightSegments,
               cylinderProps.openEnded,
               cylinderProps.thetaStart,
               cylinderProps.thetaLength
            )
            cylinder.geometry.dispose()
            cylinder.geometry = newGeometry
         }
         // responsiveness
         window.addEventListener('resize', () => {
            width = window.innerWidth
            height = window.innerHeight
            camera.aspect = width / height
            camera.updateProjectionMatrix()
            renderer.setSize(window.innerWidth, window.innerHeight)
            renderer.render(scene, camera)
         })
         // renderer
         const renderer = new THREE.WebGL1Renderer()
         renderer.setSize(width, height)
         renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
         // animation
         function animate() {
            requestAnimationFrame(animate)
            cylinder.rotation.x += 0.005
            cylinder.rotation.y += 0.01
            renderer.render(scene, camera)
         }
         // rendecylinder the scene
         const container = document.querySelector('#threejs-container')
         container.append(renderer.domElement)
         renderer.render(scene, camera)
         animate()
      </script>
   </body>
</html>

輸出

threejs_geometries.htm
列印頁面
上一個
下一個
廣告