threejs
/
10.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";
    var scene = new THREE.Scene()
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
    camera.position.x = -30
    camera.position.y = 45
    camera.position.z = 35

    camera.position.x = 10
    camera.position.y = 15
    camera.position.z = 15
    // camera.position.z = 65
    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)
    // axes.setColors(0xff2299, 0x00ff99, 0x0000ff)
    scene.add(axes)

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

    var cube2Target = scene.getObjectByName("cube2", false)


    var planeGeometry = new THREE.PlaneGeometry(100, 50)
    var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xcccccc }) //这个材质可以接收并反射场景中的各种光源
    // lamber需要lamber光源,基础材料不需要光源就能显示
    var plane = new THREE.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 THREE.SpotLight(0xFFFFFF)
    spotLight.position.set(-60, 40, -65)
    spotLight.castShadow = true
    spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024)
    spotLight.shadow.camera.far = 130
    spotLight.shadow.camera.near = 40
    // scene.add(spotLight)

    var pointLight = new THREE.PointLight(0xffffff, 3, 60)
    pointLight.position.set(0, 1, 10)
    // scene.add(pointLight)

    var sphereGeo = new THREE.SphereGeometry(0.3)
    var sphereMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 })
    var sphereMesh = new THREE.Mesh(sphereGeo, sphereMaterial)
    sphereMesh.castShadow = true
    sphereMesh.position.copy(pointLight.position)
    scene.add(sphereMesh)

    var directionalLight = new THREE.DirectionalLight(0xffffff, 1)
    directionalLight.castShadow = true
    directionalLight.shadow.mapSize.width = 2048
    directionalLight.shadow.mapSize.height = 2048
    directionalLight.position.set(10, 30, 10)
    scene.add(directionalLight)
    var directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight, 5)
    scene.add(directionalLightHelper)
    var directionalCameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera)
    scene.add(directionalCameraHelper)


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

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

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

    var gap = 0
    var stats = addStats()
    function changeCamera (e) {
      if (camera instanceof PerspectiveCamera) {
        camera = new THREE.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 THREE.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

      },
      pointLight: {
        color: 0xffffff,
        intensity: 1,
        distance: 0,
        decay: 1
      },
      directionalLight: {
        color: 0xffffff,
        intensity: 1
      },
      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")
    const pointLightMsg = ctrl.addFolder("pointLight")
    pointLightMsg.addColor(ctrlObj.pointLight, "color")
    pointLightMsg.add(ctrlObj.pointLight, "intensity", 0, 5)
    pointLightMsg.add(ctrlObj.pointLight, "distance", 0, 1000)
    pointLightMsg.add(ctrlObj.pointLight, "decay", 0, 100)
    const directionalLightMsg = ctrl.addFolder("directionalLight")
    directionalLightMsg.addColor(ctrlObj.directionalLight, "color")
    directionalLightMsg.add(ctrlObj.directionalLight, "intensity", 0, 5)


    const gltfLoader = new GLTFLoader();
    gltfLoader.load('./BoomBox.glb', function (gltf) {
      const boomBox = gltf.scene;
      boomBox.position.set(0, 5, 0);
      boomBox.scale.set(200, 200, 200);
      boomBox.traverse((obj) => {
        if (obj.isMesh) {
          obj.castShadow = true
        }
      })
      scene.add(boomBox);
    });
    var pos = 0
    function renderScene () {
      pos += 0.05
      pointLight.position.y = Math.abs(Math.sin(pos) * 20) - 5
      sphereMesh.position.copy(pointLight.position)
      pointLight.color = new THREE.Color(ctrlObj.pointLight.color)
      pointLight.intensity = ctrlObj.pointLight.intensity
      pointLight.distance = ctrlObj.pointLight.distance
      pointLight.decay = ctrlObj.pointLight.decay

      directionalLight.color = new THREE.Color(ctrlObj.directionalLight.color)
      directionalLight.intensity = ctrlObj.directionalLight.intensity

      controls.update()
      lightHelper.update()
      shadowCameraHelper.update()
      stats.update()

      ambientLight.intensity = ctrlObj.ambientLight.intensity
      ambientLight.color = new THREE.Color(ctrlObj.ambientLight.color)

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

      camera.lookAt(cube.position)
      requestAnimationFrame(renderScene)
      render.render(scene, camera)
    }
    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>