three 打造一款vr三维跑酷游戏效果代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：three 打造一款vr三维跑酷游戏效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

 
  
<style>
html,
body {
  margin: 0;
  padding: 0;
  background: black;
  overflow: hidden;
  height: 100%;
  font-family: "Times";
  font-style: italic;
}
canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.button {
  position: fixed;
  bottom: 20px;
  right: 30px;
  outline: none;
  border: none;
  background: none;
  width: 50px;
  z-index: 100;
}
.button svg {
  width: 100%;
  fill: white;
}
#info {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  color: white;
  z-index: 9999;
  opacity: 0;
}
</style>


</head>

<body >
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/d3.v5.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.123.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/GLTFLoader.js"></script>
<script src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/CSSPlugin.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/EasePack.3.51.js"></script>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/StereoEffect.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
<!-- glowing effect scripts -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/EffectComposer.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/RenderPass.110.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/MaskPass.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ShaderPass.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/CopyShader.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/FXAAShader.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ConvolutionShader.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/LuminosityHighPassShader.js"></script>
<!-- unreal bloom -->

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

    <!-- VR Button -->
    <button id='VR' class='button toggleVR' onclick='toggleVR()' title='Toggle VR Mode for Mobile Devices Only'>
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 62.7 52.375" enable-background="new 0 0 62.7 41.9" xml:space="preserve"><path d="M53.4,5.5h-44c-2.1,0-3.7,1.7-3.7,3.7v22.6c0,2.1,1.7,3.7,3.7,3.7h13.4c1.1,0,2.1-0.6,2.5-1.6l3-7.5c1.2-2.6,4.9-2.5,6,0.1  l2.6,7.3c0.4,1,1.4,1.7,2.5,1.7h13.9c2.1,0,3.7-1.7,3.7-3.7V9.3C57.2,7.2,55.5,5.5,53.4,5.5z M20.4,27c-3.2,0-5.7-2.6-5.7-5.7  s2.6-5.7,5.7-5.7s5.7,2.6,5.7,5.7S23.6,27,20.4,27z M42.4,27c-3.2,0-5.7-2.6-5.7-5.7s2.6-5.7,5.7-5.7s5.7,2.6,5.7,5.7  S45.6,27,42.4,27z"/><text x="0" y="56.9" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Nick Bluth</text><text x="0" y="61.9" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
    </button>

    <div id="info">SUPER!</div>
    <audio id="bflat" src="//repo.bfw.wiki/bfwrepo/sound/5fd2dcf3d275e.mp3"></audio>

  
      <script >
//===================================================== full screen
var requestFullscreen = function (ele) {
  if (ele.requestFullscreen) {
    ele.requestFullscreen();
  } else if (ele.webkitRequestFullscreen) {
    ele.webkitRequestFullscreen();
  } else if (ele.mozRequestFullScreen) {
    ele.mozRequestFullScreen();
  } else if (ele.msRequestFullscreen) {
    ele.msRequestFullscreen();
  } else {
    console.log("Fullscreen API is not supported.");
  }
};
var exitFullscreen = function (ele) {
  if (ele.exitFullscreen) {
    ele.exitFullscreen();
  } else if (ele.webkitExitFullscreen) {
    ele.webkitExitFullscreen();
  } else if (ele.mozCancelFullScreen) {
    ele.mozCancelFullScreen();
  } else if (ele.msExitFullscreen) {
    ele.msExitFullscreen();
  } else {
    console.log("Fullscreen API is not supported.");
  }
};
//===================================================== add canvas
let renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xd8e7ff, 0);
document.body.appendChild(renderer.domElement);
//===================================================== resize
window.addEventListener("resize", function () {
  let width = window.innerWidth;
  let height = window.innerHeight;
  renderer.setSize(width, height);
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
});
//===================================================== add Scene
let scene = new THREE.Scene();
//===================================================== add Camera
let camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
1,
10000);

let cameraTarget = new THREE.Vector3(0, 0, 0);
//===================================================== add Group
group = new THREE.Group();
scene.add(group);
//===================================================== add Controls
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true;
//How far you can orbit vertically, upper and lower limits. The maximum is Pi / 2 (90deg). You wont see below the below the line of the horizon
controls.maxPolarAngle = Math.PI / 2.1;
//===================================================== add VR
renderer.setPixelRatio(window.devicePixelRatio); //VR
effect = new THREE.StereoEffect(renderer); //VR
effect.setSize(window.innerWidth, window.innerHeight); //VR

var VR = false;
function toggleVR() {
  if (VR) {
    VR = false;
    controls = new THREE.OrbitControls(camera, renderer.domElement);
  } else {
    VR = true;
    controls = new THREE.DeviceOrientationControls(camera);
    requestFullscreen(document.documentElement);
  }
  renderer.setSize(window.innerWidth, window.innerHeight);
}
//===================================================== curve points exported from blender using python
var points = [

[1.8117204904556274, 5.987488269805908, 0.29106736183166504],
[6.005367279052734, 1.7647128105163574, -1.5591322183609009],
[1.435487985610962, -6.016839504241943, 2.1336286067962646],
[-4.118395805358887, -6.886471271514893, -0.7294682264328003],
[-4.732693195343018, 3.405961036682129, 3.1304938793182373],
[8.304193496704102, 7.593861103057861, 0.3412821292877197],
[8.038525581359863, -4.391696453094482, 2.687108278274536],
[1.488401174545288, -9.993440628051758, -2.2956111431121826],
[-5.277090549468994, -8.481210708618164, -0.719127893447876],
[-7.250330448150635, -0.9653520584106445, -0.3089699447154999],
[-6.526705741882324, 5.678538799285889, 0.15560221672058105],
[-0.885545015335083, 6.678538799285889, 1.5724562406539917],
[1.614454984664917, 5.678538799285889, 0.24559785425662994],
[1.8117204904556274, 5.987488269805908, 0.29106736183166504]];



var scale = 5;

//Convert the array of points into vertices
for (var i = 0; i < points.length; i++) {
  var x = points[i][0] * scale;
  var y = points[i][1] * scale;
  var z = points[i][2] * scale;
  points[i] = new THREE.Vector3(x, z, -y);
}

//Create a path from the points
var carPath = new THREE.CatmullRomCurve3(points);
var radius = 0.25;

var geometry = new THREE.TubeGeometry(carPath, 600, radius.........完整代码请登录后点击上方下载按钮下载查看