three实现一个三维奥运会旗帜随风飘动飘扬动画效果代码-html代码-BFW代码库

three实现一个三维奥运会旗帜随风飘动飘扬动画效果代码

代码语言：html

所属分类：三维

代码描述：three实现一个三维奥运会旗帜随风飘动飘扬动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">

    <style>
        main {
            display: flex;
        }
        .meter {
            display: flex;
            width: 80%;
            margin:15px auto;
        }
        .meter p{
            width: 120px;
            margin: 0;
        }
        .meter span{
            width: 40px;
            margin: 0 15px;
            line-height: 12px;
        }
        #left {
            width: 50%;
        }
        #right {
            width: 50%;
            text-align:center;
        }
        
        h1 {
            width:100%;
            font-size:48px;
            text-align:center;
        }
    </style>



    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.110.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script>
</head>

<body onload="init()">


    <div id="renderArea"></div>




    <script>
        let scene, camera, renderer; 
        const [width, height] = [600, 400]; 
        let flag; 
        let flagColor = "#ffffff";
        
  
            
        let flagTexture = null;
        const [sizeW, sizeH, segW, segH] = [30, 20, 30, 20];
   
        
        const init = () => {
              const canvas = document.querySelector('#renderArea');
  
          scene = new THREE.Scene();
          scene.background = new THREE.Color("#FF6633");
          camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
        
          camera.position.set(0, 0, 40);
        
          camera.lookAt(new THREE.Vector3(0, 0.0));
         
          renderer = new THREE.WebGLRenderer({ antialias: true });
          renderer.setSize(width, height);
   
          document.getElementById("renderArea").appendChild(renderer.domElement);
         
          const light = new THREE.DirectionalLight("#FFFFFF");
          light.position.set(10, 50, 100);
          scene.add(light);
    
          const ambientLight = new THREE.AmbientLight("#999999");
          scene.add(ambientLight);
          
            const controls = new THREE.OrbitControls(camera, canvas);
          controls.target.set(0, 0, 0);
          controls.update();
    
          let geometry = new THREE.CylinderGeometry(0.5, 0.5, 40, 16, 1);
          let material = new THREE.MeshPhongMaterial({
         
            color: "#ffcc99".........完整代码请登录后点击上方下载按钮下载查看