three实现一个360度游戏场景代码-html代码-BFW代码库

three实现一个360度游戏场景代码

代码语言：html

所属分类：三维

代码描述：three实现一个360度游戏场景代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
#c {
  width: 100%;
  height: 100%;
  display; block;
}
</style>



</head>

<body>
  <canvas id="c"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.115.js"></script>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/inflate.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/FBXLoader.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script>
  
      <script>


var mixers = [];
var clock = new THREE.Clock();

function init() {
  const canvas = document.querySelector('#c'); // define place to draw
  const renderer = new THREE.WebGLRenderer({ canvas }); // render to canvas
  renderer.autoClearColor = false;
  // for shadow casting
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;

  const fov = 75; // field of view
  const aspect = window.innerWidth / window.innerHeight; // default to canvas
  const near = 0.1; // near plane
  const far = 100; // far plane
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(0, 0, 3); // x, y, z

  // orbit controls
  const controls = new THREE.OrbitControls(camera, canvas);
  controls.target.set(0, 0, 0); // x, y, z
  ///*
  // additional control params #1
  controls.enableDamping = true; // damping 
  controls.dampingFactor = 0.25; // damping inertia
  controls.enableZoom = true; // zooming
  controls.autoRotate = true; // rotation
  // vertical upper and lower limits
  controls.minPolarAngle = 0; // radians
  controls.maxPolarAngle = Math.PI / 1; // radians
  // horizontal upper and lower limits
  controls.minAzimuthAngle = -Infinity; // radians
  controls.maxAzimuthAngle = Infinity; // radians
  controls.keys = {
    LEFT: 37, //left arrow
    UP: 38, // up arrow
    RIGHT: 39, // right arrow
    BOTTOM: 40 // down arrow
  };
  controls.update();
  const scene = new THREE.Scene(); // general scene

  // OBJECT
  // create a texture
  var loader = new THREE.FBXLoader();
  loader.load(
  "//repo.bfw.wiki/bfwrepo/threemodel/Ghost_Long_mjxsfu.fbx",
  function (object) {
    object.scale.set(.01, .01, .01);
    object.position.set(0, 0, -20);
    object.rotation.set(0, 0, 0);

    object.mixer = new THREE.AnimationMixer(object);
    mixers.push(object.mixer);

    var action = object.mixer.clipAction(object.animations[0]);
    action.play();

    object.traverse(function (child) {
      if (child.isMesh) {
        child.castShadow = true;
        child.receiveShadow = true;
      }
    });
    scene.add(object);
    console.log(object);
  });


  // LIGHTING
  // .........完整代码请登录后点击上方下载按钮下载查看