three实现一个三维遗迹建筑效果代码-html代码-BFW代码库

three实现一个三维遗迹建筑效果代码

代码语言：html

所属分类：三维

代码描述：three实现一个三维遗迹建筑效果代码

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

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

<head>

    <meta charset="UTF-8">





    <style>
        html, 
        body {
          background: black;
        }
        
        body {
          height: 100vh;
        	display: flex;
        	justify-content: center;
        }
        
        #world {
        	position: absolute;
        	width: 100%;
        	height: 100%;
          overflow: hidden;
          cursor: move;
          opacity: 0;
          animation: fadein 1s ease-out 3s forwards;
        }
        
        @keyframes fadein {
          from { 
            opacity: 0;
          }
          to  { 
            opacity: 1; 
          }
        }
    </style>




</head>

<body>
    <div id="world"></div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.123.js"></script>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.126.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/LegacyJSONLoader.js"></script>
    <script>
        /* 
         * The purpose is to easily create building structures. The building style was inspired by the Monument Valley game https://www.monumentvalleygame.com/mv2
         *
         * Floorplan coordinates and building settings are at the very bottom of the page.
         */
        
        let scene,
        renderer,
        controls,
        camera,
        floorplan,
        settings,
        light,
        grid,
        monumentSquareSize,
        monumentHeight,
        container;
        
        const width = window.innerWidth;
        const height = window.innerHeight;
        const aspectRatio = width / height;
        const fieldOfView = 25;
        const nearView = 1;
        const farView = 10000;
        const assetPath = '//repo.bfw.wiki/bfwrepo/json/model';
        const blockSize = 20; // Value need to remain 20 in order to match assets ratio exported from Blender
        
        window.addEventListener('load', () => {
          settings = data.settings;
          document.body.style.background = `rgb(${settings.background})`;
          floorplan = data.floorplan;
          init();
          animate();
        });
        
.........完整代码请登录后点击上方下载按钮下载查看