three+oimo实现三维打保龄球代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three+oimo实现三维打保龄球代码，点击按钮发球。

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
html,
    body {
        background: black;
        margin: 0;
        padding: 0;
        font-family: verdana;
        overflow: hidden;
    }
    *,
    *:before,
    *:after {
        box-sizing: inherit;
    }
    canvas{
        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;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        color:white;
        text-align: center;
        border: 3px solid white;
        border-radius: 3px;
        padding: 10px 20px;
    }
    #info:hover{
      cursor: pointer;
    }
</style>


  
  
</head>

<body translate="no">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.124.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/DeviceOrientationControls.126.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/Projector.126.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jsonloader.126.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/GLTFLoader.128.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/oimo.1.0.9.js"></script>


<div id="info">Click Me</div>
    <canvas id="container"></canvas>
<!--     <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>
   -->
  
      <script >
var player = { height: 75, speed: 3, turnSpeed: Math.PI * 0.02, canShoot: 0 };

//===================================================== canvas
var canvas = document.getElementById("container");
var renderer = new THREE.WebGLRenderer({ canvas: canvas, precision: "mediump", antialias: true });
renderer.setSize(canvas.getBoundingClientRect().width, canvas.getBoundingClientRect().height);
renderer.shadowMapEnabled = true; //Shadow
renderer.shadowMapSoft = true; // Shadow
renderer.shadowMapType = THREE.PCFShadowMap; //Shadow




//===================================================== camera
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.set(0, player.height, -525);
camera.lookAt(new THREE.Vector3(0, player.height, 0));




//=========================================================================================== add VR
renderer.setPixelRatio(window.devicePixelRatio); //VR
var effect = new THREE.StereoEffect(renderer); //VR
effect.setSize(window.innerWidth, window.innerHeight); //VR
var VR = false;
function toggleVR() {
  if (VR) {
    VR = false;
    camera.rotation.reorder('ZYX');
    camera.lookAt(0, 0, 0);
  } else {
    VR = true;
    controls = new THREE.DeviceOrientationControls(camera);
    requestFullscreen(document.documentElement);
  }
  renderer.setSize(window.innerWidth, window.innerHeight);
}



//===================================================== resize
window.addEventListener("resize", function () {
  let width = canvas.getBoundingClientRect().width;
  let height = canvas.getBoundingClientRect().height;
  renderer.setSize(width, height);
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
});



//=========================================================================================== light

var sphereLight = new THREE.SphereGeometry(.05);
var sphereLightMaterial = new THREE.MeshBasicMaterial({
  color: new THREE.Color("white") });

var sphereLightMesh = new THREE.Mesh(sphereLight, sphereLightMaterial);
sphereLightMesh.castShadow = true;
sphereLightMesh.position.set(0, 2.5, 0);
//scene.add(sphereLightMesh);


var distance = 300;
var intensity = 1;



var pointLight2 = new THREE.PointLight(new THREE.Color('white'), intensity, distance);
pointLight2.position.set(0, 100, -50);
/*pointLight2.castShadow = true;*/
scene.add(pointLight2);


var spotLight2 = new THREE.SpotLight(new THREE.Color('white'), intensity, distance);
spotLight2.position.set(0, 150, 25);
spotLight2.castShadow = true;
scene.add(spotLight2);


var pointLight3 = new THREE.PointLight(new THREE.Color('blue'), intensity / 1.25, distance);
pointLight3.position.set(0, 100, 0);
scene.add(pointLight3);





//===================================================== shapes
var buffgeoSphere = new THREE.BufferGeometry();
buffgeoSphere.fromGeometry(new THREE.SphereGeometry(1, 20, 10));

var buffgeoBox = new THREE.BufferGeometry();
buffgeoBox.fromGeometry(new THREE.BoxGeometry(1, 1, 1));

var matSphere = new THREE.MeshPhongMaterial({ color: new THREE.Color('blue'), side: THREE.DoubleSide });
var matBox = new THREE.MeshPhongMaterial({ color: new THREE.Color('#333'), side: THREE.DoubleSide, transparent: true, opacity: 1 });
var matHit = new THREE.MeshPhongMaterial({ color: new THREE.Color('red'), side: THREE.DoubleSide, transparent: true, opacity: 0 });



//===================================================== physics
world = new OIMO.World({ info: true, worldscale: 100 });
meshs = [];
bodys = [];


//add ground
var ground = world.add({ size: [225, 40, 1000], pos: [0, -20, -300] });
var cube = new THREE.Mesh(new THREE.BoxGeometry(225, 1, 1000), new THREE.MeshPhongMaterial({ color: new THREE.Color('#111'), side: THREE.DoubleSide }));
cube.receiveShadow = true;
scene.add(cube);






var bball = new THREE.Group();
bball.position.z =.........完整代码请登录后点击上方下载按钮下载查看