threejs加载gltf三维模型老虎示例代码-html代码-BFW代码库

threejs加载gltf三维模型老虎示例代码

代码语言：html

所属分类：三维

代码描述：threejs加载gltf三维模型老虎示例代码

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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        html, body {
          height: 100%;
          margin: 0;
        }
        #c {
          width: 100%;
          height: 100%;
          display: block;
        }
    </style>


</head>

<body>
    <!-- three.min.js r87 -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.133.js"></script>

    <!-- GLTFLoader.js -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/GLTFLoader.133.js"></script>


    <canvas id="c"></canvas>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.133.js"></script>
    <script>
        'use strict';
        
        function deg(degree) {
          return degree / 180 * Math.PI;
        }
        
        function main() {
          const canvas = document.querySelector('#c');
        
          const renderer = new THREE.WebGLRenderer({ canvas });
          renderer.shadowMap.enabled = true;
        
          const fov = 75;
          const aspect = 2;
          const near = 0.1;
          const far = 100;
          const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
          camera.position.y = 15;
        
          const scene = new THREE.Scene();
          scene.background = new THREE.Color('#B4B4B4');
        
          const controls = new THREE.OrbitControls(camera, canvas);
          controls.target.set(0, 0, 0);
          controls.update();
        
          //add light
          const ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.5);
          scene.add(ambientLight);
        
        
          function createShadowLight(shadowLightAngle, shadowLightRadius) {
            const shadowLight = new THREE.DirectionalLight(0xFFFFFF, 1);
            const shadowLightPositionX = Math.cos(deg(shadowLightAngle)) * shadowLightRadius;
            const shadowLightPositionZ = Math.sin(deg(shadowLightAngle)) * shadowLightRadius;
            shadowLight.position.set(shadowLightPositionX, 3, shadowLightPositionZ);
            shadowLight.target.position.set(0, 0, 0);
            shadowLight.castShadow = true;
            shadowLight.shadow.mapSize.width = 2000;
            shadowLight.shadow.mapSize.height = 2000;
        
            shadowLight.shadow.camera.left = -8;
            shadowLight.shadow.camera.right = 8;
            shadowLight.shadow.camera.far = 30;
        
            scene.add(shadowLight);
            scene.add(shadowLight.target);
        
            return shadowLight;
          }
  .........完整代码请登录后点击上方下载按钮下载查看