threejs
/
11.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 = 10
    camera.position.y = 15
    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)

    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(e => {
        if (e.isMesh) {
          e.castShadow = true
        }
      })
      scene.add(boomBox)
    })

    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 hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x00ff00, 1)
    scene.add(hemisphereLight)


    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 gap = 0
    var stats = addStats()
    var ctrlObj = {
      show: true,
      color: 0xffffff,
      groundColor: 0xffffff,
      intensity:1

    }
    var ctrl = new Dat()
    ctrl.add(ctrlObj, "show").onChange(e => {
      hemisphereLight.visible = e
    })
    ctrl.addColor(ctrlObj, "color")
    ctrl.addColor(ctrlObj, "groundColor")
    ctrl.add(ctrlObj, "intensity", 0, 5)

    var pos = 0
    function renderScene () {
      pos += 0.05
      hemisphereLight.color = new THREE.Color(ctrlObj.color)
      hemisphereLight.groundColor = new THREE.Color(ctrlObj.groundColor)
      hemisphereLight.intensity = ctrlObj.intensity


      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>