threejs
/
9ambientlight.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 {
      Scene, Vector2, SpotLight, PerspectiveCamera, Color, OrthographicCamera,
      AmbientLight, PlaneGeometry, MeshLambertMaterial, SpotLightHelper,
      WebGLRenderer, AxesHelper, Mesh, BoxGeometry, MeshBasicMaterial,
      Fog, FogExp2, TorusGeometry, CylinderGeometry, BufferGeometry, BufferAttribute,
      DoubleSide, WireframeGeometry, LineSegments, CameraHelper
    } from "./src/Three.js";
    var scene = new Scene()
    var camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
    camera.position.x = -30
    camera.position.y = 45
    camera.position.z = 35
    camera.position.z = 65
    camera.lookAt(scene.position)
    // var camera = new OrthographicCamera(
    //   window.innerWidth / -16, window.innerWidth / 16,
    //   window.innerHeight / 16, window.innerHeight / -16, -200, 500,)
    // camera.position.set(-30, 45, 35)
    // camera.lookAt(scene.position)

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

    var axes = new AxesHelper(50)
    // axes.setColors(0xff2299, 0x00ff99, 0x0000ff)
    scene.add(axes)
    // scene.fog = new Fog(0xffffff, 0.01, 100) //雾化效果
    // scene.fog = new FogExp2(0xffffff, 0.02) //雾化效果
    // scene.overrideMaterial = new MeshLambertMaterial({color: 0x0000ff})
    // scene.overrideMaterial = new MeshBasicMaterial({color: 0x0000ff})

    // var geometry = new BoxGeometry(8, 8, 8)
    // var material = new MeshLambertMaterial({ color: 0xff2299 })
    // var cube = new Mesh(geometry, material)
    // cube.castShadow = true
    // cube.position.x = 4
    // cube.position.y = 10
    // cube.position.z = 20
    // cube.rotation.x = 0.8
    // cube.rotation.y = 0.8
    // scene.add(cube)

    var geometry = new BoxGeometry(2, 2, 2)
    var material = new MeshLambertMaterial({ color: 0xff2299 })
    var cube = new Mesh(geometry, material)
    cube.castShadow = true
    cube.position.y = 5
    scene.add(cube)


    var geometry2 = new BoxGeometry(4, 4, 4)
    var material2 = new MeshLambertMaterial({ color: 0xaa7711 })
    var cube2 = new Mesh(geometry2, material2)
    cube2.castShadow = true
    cube2.position.x = -10
    cube2.position.y = 10
    cube2.position.z = 0
    cube2.name = "cube2"
    // scene.add(cube2)
    // console.log(scene.children.length)
    var cube2Target = scene.getObjectByName("cube2", false)
    // console.log(cube2Target)
    // var ctrlObj = new function () {
    //   this.removeFindCube = function () {
    //   }
    // }

    // var torusgeo = new TorusGeometry(7, 1, 7, 6)
    // var torusmaterial = new MeshLambertMaterial({color: 0xff2288})
    // var torus = new Mesh(torusgeo, torusmaterial)
    // torus.position.y = 20
    // scene.add(torus)

    // var cylindergeo = new CylinderGeometry(4, 4, 14)
    // var cylindermaterial = new MeshLambertMaterial({color: 0xf34356})
    // var cylinder = new Mesh(cylindergeo, cylindermaterial)
    // cylinder.position.x = -10
    // cylinder.position.y = 20
    // scene.add(cylinder)

    var geometry = new BufferGeometry()
    var vertices = new Float32Array([
      // X面
      0, 0, 0,
      10, 0, 0,
      10, 0, 10,
      0, 0, 0,
      0, 0, 10,
      10, 0, 10,
      // X对面
      0, 10, 0,
      10, 10, 0,
      10, 10, 10,
      0, 10, 0,
      0, 10, 10,
      10, 10, 10,
      // Y面
      0, 0, 0,
      0, 10, 0,
      0, 10, 10,
      0, 0, 0,
      0, 0, 10,
      0, 10, 10,
      // Y对面
      10, 0, 0,
      10, 10, 10,
      10, 10, 0,
      10, 0, 0,
      10, 10, 10,
      10, 0, 10,
      // 底面
      0, 0, 0,
      10, 0, 0,
      10, 10, 0,
      0, 0, 0,
      10, 10, 0,
      0, 10, 0,
      // 顶面
      0, 0, 10,
      10, 10, 10,
      10, 0, 10,
      0, 0, 10,
      10, 10, 10,
      0, 10, 10,
      // 顶一
      10, 0, 10,
      0, 10, 0,
      5, 25, 5,
      // 顶二
      0, 10, 0,
      0, 0, 10,
      5, 25, 5,
      // 顶三
      0, 10, 10,
      10, 10, 10,
      5, 25, 5,
      // 顶四
      10, 10, 0,
      10, 10, 10,
      5, 25, 5,

    ])
    var attribue = new BufferAttribute(vertices, 3)
    geometry.attributes.position = attribue
    var material = new MeshBasicMaterial({
      color: 0x0000ff,
      side: DoubleSide,
    })
    var mesh = new Mesh(geometry, material)
    // scene.add(mesh)
    var wireFrame = new WireframeGeometry(geometry)
    var line = new LineSegments(wireFrame)
    // line.material.depthTest = false
    line.material.transparent = false
    line.material.opacity = true
    // scene.add(line)


    var planeGeometry = new PlaneGeometry(100, 50)
    var planeMaterial = new MeshLambertMaterial({ color: 0xcccccc }) //这个材质可以接收并反射场景中的各种光源
    // lamber需要lamber光源,基础材料不需要光源就能显示
    var plane = new Mesh(planeGeometry, planeMaterial)
    plane.rotation.x = -0.5 * Math.PI
    // plane.position.set(15, 0, 0)
    plane.position.set(15, 0, 0)
    plane.receiveShadow = true
    scene.add(plane)

    var spotLight = new SpotLight(0xFFFFFF)
    spotLight.position.set(-60, 40, -65)
    spotLight.castShadow = true
    spotLight.shadow.mapSize = new Vector2(1024, 1024)
    spotLight.shadow.camera.far = 130
    spotLight.shadow.camera.near = 40
    scene.add(spotLight)

    var lightHelper = new SpotLightHelper(spotLight)
    // scene.add(lightHelper) //灯光辅助工具

    var shadowCameraHelper = new CameraHelper(spotLight.shadow.camera)
    scene.add(shadowCameraHelper)

    var ambientLight = new AmbientLight("red") // 会应用到整个场景中的对象，没有特殊的来源方向，不会生成阴影
    // scene.add(ambientLight)


    // render.render(scene, camera)
    var gap = 0
    var stats = addStats()
    function changeCamera (e) {
      if (camera instanceof PerspectiveCamera) {
        camera = new OrthographicCamera(
          window.innerWidth / -16, window.innerWidth / 16,
          window.innerHeight / 16, window.innerHeight / -16, -200, 500,)
        camera.position.set(-30, 45, 35)
        camera.lookAt(scene.position)
      } else {
        camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
        camera.position.x = -30
        camera.position.y = 45
        camera.position.z = 35
        camera.position.z = 65
        camera.lookAt(scene.position)
      }
    }
    var ctrlObj = {
      ambientLight: {
        intensity: 1,
        color: 0xe5e5ff,
      },
      spotLight: {
        intensity: 1,
        color: 0xdedede,
        distance: 0,
        angle: Math.PI / 3,
        penumbra: 0,
        decay: 0

      },
      changeCamera: changeCamera,

    }
    var ctrl = new Dat()
    const ambientLightMsg = ctrl.addFolder('ambientLight');
    ambientLightMsg.add(ctrlObj.ambientLight, "intensity", 0, 5)
    ambientLightMsg.addColor(ctrlObj.ambientLight, "color")
    const spotLightMsg = ctrl.addFolder('spotLight');
    spotLightMsg.add(ctrlObj.spotLight, "intensity", 0, 5)
    spotLightMsg.add(ctrlObj.spotLight, "distance", 0, 1000)
    spotLightMsg.add(ctrlObj.spotLight, "angle", 0, Math.PI)
    spotLightMsg.add(ctrlObj.spotLight, "penumbra", 0, 1)
    spotLightMsg.add(ctrlObj.spotLight, "decay", 0, 5)
    spotLightMsg.addColor(ctrlObj.spotLight, "color")

    function drawCube () {
      var planeWidth = planeGeometry.parameters.width
      var planeheight = planeGeometry.parameters.height
      for (let i = 0; i < planeheight / 5; i++) {
        for (let j = 0; j < planeWidth / 5; j++) {
          var geometry = new BoxGeometry(4, 4, 4)
          var material = new MeshLambertMaterial()
          material.color = new Color(0, Math.random() * 0.25 + .5, 0)
          var cube = new Mesh(geometry, material)
          cube.position.x = -(planeWidth / 2) + 15 + 2.5 + (j * 5)
          cube.position.z = -(planeheight / 2) + 2 + (i * 5)
          scene.add(cube)
        }
      }
    }
    // drawCube()
    function renderScene () {
      lightHelper.update()
      shadowCameraHelper.update()
      stats.update()
      // cube.scale.set(ctrlObj.long, ctrlObj.wide, ctrlObj.high)
      // cube.visible = (ctrlObj.visible)
      ambientLight.intensity = ctrlObj.ambientLight.intensity
      ambientLight.color = new Color(ctrlObj.ambientLight.color)

      spotLight.intensity = ctrlObj.spotLight.intensity
      spotLight.color = new Color(ctrlObj.spotLight.color)
      spotLight.distance = ctrlObj.spotLight.distance
      spotLight.angle = ctrlObj.spotLight.angle
      spotLight.penumbra = ctrlObj.spotLight.penumbra
      spotLight.decay = ctrlObj.spotLight.decay

      // cube.rotation.x += .01
      // cube.rotation.y += .01
      // cube.rotation.z += .01
      // cube.rotation.x += ctrlObj.rotationSpeed
      // cube.rotation.y += ctrlObj.rotationSpeed
      // cube.rotation.z += ctrlObj.rotationSpeed
      // gap += 0.02
      // gap += ctrlObj.jumpSpeed
      // cube.position.x = (20 * Math.sin(gap))
      camera.lookAt(cube.position)
      // cube.position.y = 6 + (20 * Math.abs(Math.cos(gap)))
      requestAnimationFrame(renderScene)
      render.render(scene, camera)
      // scene.traverse(o => {
      //   if (o instanceof Mesh && o !== plane) {
      //     o.rotation.x += 0.01
      //     o.rotation.y += 0.01
      //     o.rotation.z += 0.01
      //   }
      // })
    }
    renderScene()

    function addStats () {
      var stats = new Stats()
      // stats.domElement.style.position = "absolute"
      // stats.domElement.style.left = "0px"
      // stats.domElement.style.top = "0px"
      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>