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();
        });
        
        function init() {
          grid = floorplan[0][0].length;
          monumentSquareSize = blockSize * grid;
          monumentHeight = blockSize * floorplan.length;
        
          // Scene Setting
          renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
          renderer.setPixelRatio(window.devicePixelRatio);
          renderer.setSize(width, height);
          renderer.shadowMap.enabled = true;
          renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        
          // Create the scene.
          scene = new THREE.Scene();
        
          // Camera Setting
          if (settings.perspectiveCamera) {
            // Perspective Camera
            camera = new THREE.PerspectiveCamera(fieldOfView, aspectRatio, nearView, farView);
            camera.position.set(800, -800, 800);
            camera.up = new THREE.Vector3(0, 0, 1);
          } else {
            // Orthographic Camera
            camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, -1000, 5000);
            camera.position.set(20, -20, 20);
            camera.up = new THREE.Vector3(0, 0, 1);
          }
        
          // Point Light Setting
          light = new THREE.PointLight(`rgb(${settings.globalLight})`, 12, 1000);
          light.position.set(600, -200, 250 + monumentHeight);
          light.castShadow = true;
        
          scene.add(light, new THREE.AmbientLight(`rgb(${settings.ambientLight})`));
        
          // Floor Setting
          // const floorGeometry = new THREE.CircleGeometry(600, 600)
          // floorGeometry.translate(0, 0, -200).........完整代码请登录后点击上方下载按钮下载查看