three加载fbx三维刀具模型切动画效果代码-html代码-BFW代码库

three加载fbx三维刀具模型切动画效果代码

代码语言：html

所属分类：三维

代码描述：three加载fbx三维刀具模型切动画效果代码

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

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

<head>

  <meta charset="UTF-8">
  
  
  
  
  
<style>
html { overflow: hidden; }

body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	color: #333;
	background: #feab4f;
}
</style>


</head>

<body>
  <div id="container"></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/FBXLoader.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/tween.min.js"></script>
      <script >
var container = document.getElementById('container');

var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor(0xfeab4f, 1);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);

renderer.domElement.style.cursor = 'pointer';

var camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 100000);
camera.position.set(3.8, 3.9, 8.6);

var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target.set(-2.3, 4.6, -1.4);

var scene = new THREE.Scene();

var aLight = new THREE.AmbientLight(0x888888);
scene.add(aLight);

var dLight = new THREE.DirectionalLight(0xffffff, 0.5);
dLight.position.set(0.5, 0.2, 1.0).normalize();
scene.add(dLight);

// -----------------------------------------------------------------

var swordGroup = new THREE.Group();
scene.add(swordGroup);

var sword = new THREE.Group();
swordGroup.add(sword);

var fbxLoader = new THREE.FBXLoader();


fbxLoader.load( '//repo.bfw.wiki/bfwrepo/threemodel/sword.fbx', function (fbx) {
  var mesh = fbx.children[0];

  mesh.material = new THREE.MeshPhongMaterial({
    vertexColors: THREE.VertexColors });


  sword.add(mesh);
});

// -----------------------------------------------------------------

var isTweening = false;

var moves = {
  chop: function () {

    var windUp = new TWEEN.Tween(swordGroup.rotation).
    to({ z: -Math.PI / 4 }, 100).
    easing(TWEEN.Easing.Cubic.Out).
    onComplete(function () {

      var chop = new TWEEN.Tween(swordGroup.rotation).
      to({ z: Math.PI / 2 }, 100).
      easing(TWEEN.Easing.Cubic.In).
      onComplete(function () {

        var reset = new TWEEN.Tween(swordGroup.rotation).
        to({ z: 0 }, 400).
        delay(100).
        easing(TWEEN.Easing.Exponential.InOut).
        onComplete(function () {
          isTweening = false;
          renderer.domElement.style.cursor = 'pointer';
        }).
        start();

      }).
      start();

    }).
    start();

  },
  poke: function () {

    var windUpP = new TWEEN.Tween(swordGroup.position).
    to({ x: 2, y: -2 }, 100).
    easing(TWEEN.Easing.Cubic.Out).
    start();

    var windUpR = new TWEEN.Tween(swordGroup.rotation).
    to({ z: Math.PI / 4 }, 100).
    easing(TWEEN.Easing.Cubic.Out).
    onComplete(function () {

      var pokeGP = new TWEEN.Tween(swordGroup.position).
      to({ x: 0, y: 0 }, 100).
      easing(TWEEN.Easing.Back.In).
      start();

      var poke = new TWEE.........完整代码请登录后点击上方下载按钮下载查看