threejs实现一个三维户外山上滑雪运动游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：threejs实现一个三维户外山上滑雪运动游戏代码，键盘左右键操作方向避开石头和树木。

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

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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
@import url('https://fonts.googleapis.com/css?family=Ranchers');

html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-family: 'Ranchers', sans-serif;
}

body {
    background-image: url('//repo.bfw.wiki/bfwrepo/images/ski/snowmountain.jpg');
    background-size: cover;
    background-position: center;
}

canvas {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

div {
    user-select: none;
}

.label-death {
    display: none;
    z-index: 10;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10rem;
    color: white;

    &.active {
        display: block;
    }
}

.label-death-bg {
    content: " ";
    z-index: 9;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 20rem;
    transform: translate(-50%, -50%);
    transition: all 2s ease;
    background-color: black;
    opacity: 0.7;

    &.active {
        top: 50%;
        width: 100%;
        height: 100%;
    }
}

.label-score {
    z-index: 10;
    position: absolute;
    left: 5vw;
    bottom: 5vh;
    font-size: 10rem;
    transition: all 500ms ease;
    color: black;

    &.stopped {
        top: 50%;
        left: 50%;
        bottom: auto;
        font-size: 15rem;
        transform: translate(-50%, -50%);
        color: white;
    }
}

.label-restart {
    display: none;
    z-index: 100;
    position: absolute;
    padding: 1rem 2rem;
    top: 75%;
    left: 50%;
    width: 100%;
    text-align: center;
    font-size: 5rem;
    color: white;
    transform: translate(-50%, -50%);

    &.active {
        display: block;
    }
}
</style>


</head>

<body >
  <div class="label-death">REKT</div>
<div class="label-death-bg"></div>
<div class="label-score"></div>
<div class="label-restart">PRESS ENTER TO PLAY AGAIN</div>
  
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.92.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mountain.plugins.js"></script>
      <script >
class World {
  constructor(wnd) {
    this.window = wnd;
    this.clock = new THREE.Clock();
    this.isLoading = true;
    this.loader = THREE.DefaultLoadingManager;
    this.onLoadedCallbacks = [];
    this.loader.onLoad = () => {
      this.isLoading = false;
      this.onLoadedCallbacks.forEach(cb => cb());
    };
    this.loader.onError = url => console.error(`There was an error loading ${url}`);

    this.setupRenderer();
    this.setupScene();
    this.setupLighting();

    // Auto resize engine
    wnd.addEventListener('resize', () => {
      this.renderer.setSize(wnd.innerWidth, wnd.innerHeight);
    });

    this.onRenderCallbacks = [];
    this.animationMixers = [];
    this.loadedFbx = {};
  }

  drawGridQuadrant(signX, signZ) {
    const GRID_SIZE = 10;
    const GRID_N = 20;

    const sX = signX > 0 ? 1 : -1;
    const sZ = signZ > 0 ? 1 : -1;
    for (let i = 0; i < GRID_N; i++) {
      for (let j = 0; j < GRID_N; j++) {
        const offX = i * GRID_SIZE * sX;
        const offZ = j * GRID_SIZE * sZ;
        const geo = new THREE.BufferGeometry();
        const verts = new Float32Array([
        offX, 0, offZ,
        offX, 0, offZ + GRID_SIZE,
        offX + GRID_SIZE, 0, offZ + GRID_SIZE,
        offX + GRID_SIZE, 0, offZ,
        offX, 0, offZ]);

        geo.addAttribute('position', new THREE.BufferAttribute(verts, 3));
        const mat = new THREE.LineBasicMaterial({ color: 0 });
        const line = new THREE.Line(geo, mat);
        this.scene.add(line);
      }
    }
  }

  setupRenderer() {
    const renderer = new THREE.WebGLRenderer({ alpha: true });
    renderer.setSize(this.window.innerWidth, this.window.innerHeight);
    this.renderer = renderer;
    this.window.document.body.appendChild(r.........完整代码请登录后点击上方下载按钮下载查看