three实现加载GLTF模型三维小镇道路车水马龙动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现加载GLTF模型三维小镇道路车水马龙动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Three.js GLTF Animation Example</title>
<style>
    body { 
      margin: 0; 
      overflow: hidden; /* 防止滚动条出现 */
    }
    canvas { 
      display: block; 
      width: 100vw; /* 铺满整个视口的宽度 */
      height: 100vh; /* 铺满整个视口的高度 */
    }
  </style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.128.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.133.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/GLTFLoader.133.js"></script>
</head>
<body>
  <script type="module">


    const canvas = document.createElement('canvas');
    document.body.appendChild(canvas);

    const renderer = new THREE.WebGLRenderer({ canvas });
    renderer.shadowMap.enabled = true;

    const fov = 45;
    const aspect = 2;  // the canvas default
    const near = 0.1;
    const far = 100;
    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    camera.position.set(0, 10, 20);

    const controls = new THREE.OrbitControls(camera, canvas);
    controls.target.set(0, 5, 0);
    controls.update();

    const scene = new THREE.Scene();
    scene.background = new THREE.Color('#DEFEFF');

    {
      const planeSize = 40;

      const loader = new THREE.TextureLoader();
      const texture = loader.load('//repo.bfw.wiki/bfwrepo/threemodel/checker.png');
      texture.wrapS = THREE.RepeatWrapping;
      texture.wrapT = THREE.RepeatWrapping;
      texture.magFilter = THREE.NearestFilter;
      const repeats = planeSize / 2;
      texture.repeat.set(repeats, repeats);

      const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
      const planeMat = new THREE.MeshPhongMaterial({
        map: texture,
        side: THREE.DoubleSide,
      });
      const mesh = new THREE.Mesh(planeGeo, planeMat);
      mesh.rotation.x = Math.PI * -.5;
      scene.add(mesh);
    }

    {
      const skyColor = 0xB1E1FF;  // light blue
      const groundColor = 0xB97A20;  // brownish orange
      const intensity = 1;
      const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
      scene.add(light);
    }

    {
      const color = 0xFFFFFF;
      const intensity = 1;
      const light = new THREE.DirectionalLight(color, intensity);
      light.castShadow = true;
      light.position.set(-250, 800, -850);
      light.target.position.set(-550, 40, -450);

      light.shadow.bias = -0.004;
      light.shadow.mapSize.width = 2048;
      light.shadow.mapSize.height = 2048;

      scene.add(light);
      scene.add(light.target);
      const cam = light.shadow.camera;
      cam.near = 1;
      cam.far = 2000;
      cam.left = -1500;
      cam.right = 1500;
      cam.top = 1500;
      cam.bottom = -1500;

      const cameraHelper = new THREE.CameraHelper(cam);
      scene.add(cameraHelper);
      cameraHelper.visible = false;
      const helper = new THREE.DirectionalLightHelper(light, 100);
      scene.add(helper);
      helper.visible = false;
    }

    function frameArea(sizeToFitOnScreen, boxSize, boxCenter, camera) {
      const halfSizeToFitOnScreen = sizeToFitOnScreen * 0.5;
      const halfFovY = THREE.Math.degToRad(camera.fov * .5);
      const distance = halfSizeToFitOnScreen / Math.tan(halfFovY);
      const direction = (new THREE.Vector3())
        .subVectors(camera.position, boxCenter)
        .multiply(new THREE.Vector3(1, 0, 1))
        .normalize();

      camera.position.copy(direction.multiplyScalar(distance).add(boxCenter));
      camera.near = boxSize / 100;
      camera.far = boxSize * 100;
      camera.updateProjectionMatrix();
      camera.lookAt(boxCenter.x, boxCenter.y, boxCenter.z);
    }

    let curve;
    let curveObject;
    {
      const controlPoints = [
        [1.118281, 5.115846, -3.681386],
        [3.948875, 5.115846, -3.641834],
        [3.960072, 5.115846, -0.240352],
        [3.985447, 5.115846, 4.585005],
        [-3.793631, 5.115846, 4.585006],
        [-3.826839, 5.115846, -14.736200],
        [-14.542292, 5.115846, -14.765865],
        [-14.520929, 5.115846, -3.627002],
        [-5.452815, 5.115846, -3.634418],
        [-5.467251, 5.115846.........完整代码请登录后点击上方下载按钮下载查看