threejs
/
14planeGeometry.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>Document</title>
  <script text="module" charset="UTF-8" src="./src/Three.js" type="module"></script>
  <style>
    body {
      margin: 0;
      /* overflow: hidden; */
    }
  </style>
</head>

<body>
  <div id="app"></div>
  <div id="myStats"></div>
  <script type="module">
    console.log(window.__THREE__)
    import Stats from "./libs/stats.module.js";
    import Dat from "./libs/lil-gui.module.min.js";
    import * as THREE from './src/Three.js'
    import { GLTFLoader } from './GLTFLoader.js';
    import { OrbitControls } from "./OrbitControls.js";
    import { Lensflare, LensflareElement } from "./jsm/objects/Lensflare.js";
    var scene = new THREE.Scene()
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
    camera.position.x = 0
    camera.position.y = 0
    camera.position.z = 15
    // camera.lookAt(scene.position)

    var render = new THREE.WebGLRenderer()
    render.shadowMap.enabled = true
    render.setSize(window.innerWidth, window.innerHeight)
    document.getElementById("app").appendChild(render.domElement)
    var controls = new OrbitControls(camera, render.domElement)

    var axes = new THREE.AxesHelper(50)

    scene.add(axes)

    var planeGeo = new THREE.PlaneGeometry(6, 8, 6, 8)
    var planeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 })
    planeMaterial.side = THREE.DoubleSide
    planeMaterial.wireframe = true
    var plane = new THREE.Mesh(planeGeo, planeMaterial)
    scene.add(plane)


    var gap = 0
    var stats = addStats()
    var ctrlObj = {
      width: 6,
      height: 8,
      widthLine: 1,
      heightLine: 1,

    }
    var ctrl = new Dat()
    ctrl.add(ctrlObj, "widthLine", 0, 20).onChange(() => {
      scene.remove(plane)
      planeGeo = new THREE.PlaneGeometry(ctrlObj.width, ctrlObj.height, ctrlObj.widthLine, ctrlObj.heightLine)
      planeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 })
      planeMaterial.side = THREE.DoubleSide
      planeMaterial.wireframe = true
      plane = new THREE.Mesh(planeGeo, planeMaterial)
      scene.add(plane)
    })
    ctrl.add(ctrlObj, "heightLine", 0, 100).onChange(() => {
      scene.remove(plane)
      planeGeo = new THREE.PlaneGeometry(ctrlObj.width, ctrlObj.height, ctrlObj.widthLine, ctrlObj.heightLine)
      planeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 })
      planeMaterial.side = THREE.DoubleSide
      planeMaterial.wireframe = true
      plane = new THREE.Mesh(planeGeo, planeMaterial)
      scene.add(plane)
    })
    ctrl.add(ctrlObj, "height", 0, 100).onChange(() => {
      scene.remove(plane)
      planeGeo = new THREE.PlaneGeometry(ctrlObj.width, ctrlObj.height, ctrlObj.widthLine, ctrlObj.heightLine)
      planeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 })
      planeMaterial.side = THREE.DoubleSide
      planeMaterial.wireframe = true
      plane = new THREE.Mesh(planeGeo, planeMaterial)
      scene.add(plane)
    })
    ctrl.add(ctrlObj, "width", 0, 100).onChange(() => {
      scene.remove(plane)
      planeGeo = new THREE.PlaneGeometry(ctrlObj.width, ctrlObj.height, ctrlObj.widthLine, ctrlObj.heightLine)
      planeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 })
      planeMaterial.side = THREE.DoubleSide
      planeMaterial.wireframe = true
      plane = new THREE.Mesh(planeGeo, planeMaterial)
      scene.add(plane)
    })


    var pos = 0
    function renderScene () {
      pos += 0.05


      controls.update()
      stats.update()
      requestAnimationFrame(renderScene)
      render.render(scene, camera)
    }
    renderScene()

    function addStats () {
      var stats = new Stats()
      document.getElementById("myStats").appendChild(stats.domElement)
      return stats
    }
    window.addEventListener("resize", onWindowResize)
    function onWindowResize () {
      camera.aspect = window.innerWidth / window.innerHeight
      camera.updateProjectionMatrix()
      render.setSize(window.innerWidth, window.innerHeight)
    }

  </script>
</body>

</html>