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

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

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看