要连接什么库以便可以使用 JSONLoader、OrbitControls、AnimationAction？答案

【问题标题】：What library to connect so that you can use JSONLoader, OrbitControls, AnimationAction?要连接什么库以便可以使用 JSONLoader、OrbitControls、AnimationAction？
【发布时间】：2022-02-02 00:45:04
【问题描述】：

有几个不同的库，并不是所有的库都同时提供三个函数（JSONLoader、OrbitControls、AnimationAction）。 JSONLoader、OrbitControls、AnimationAction选哪三个js好用？这是我的代码：

<!DOCTYPE html> <!--&quot;-->
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Skelet Animation</title>
<style>
body {
  margin: 0;
}
canvas {
  width: 100vw;
  height: 100vh;
  display: block;
}
</style>
</head>

<body translate="no" >
  <div id="webGL-container"></div>
  
//https://threejsfundamentals.org/threejs/resources/threejs/r98/three.min.js

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js'></script>
<script src="threejs/resources/threejs/r98/three.min.js"></script>
<script src="js/dat.gui.min.js"></script>
<script src="threejs/resources/threejs/r98/js/controls/OrbitControls.js"></script>
<canvas></canvas>
      <script id="rendered-js" >
      
$(function () {


const renderer = new THREE.WebGLRenderer({
  antialias: true,
  canvas: document.querySelector('canvas'),
});

renderer.setClearColor(new THREE.Color(0xCCCCCC));
renderer.setSize(window.innerHTML, window.innerHeight);




const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(7, 35, 15);

camera.lookAt(new THREE.Vector3(18,0,0));

const orbit = new THREE.OrbitControls(camera, renderer.domElement);
var ambientLight,grid, mesh, action = {}, mixer, fadeAction;
var bool1 = false;
var directionalLight = new THREE.DirectionalLight(0xFFFFFF);
directionalLight.position.set(-2,10,15);
directionalLight.lookAt(new THREE.Vector3(10,0,0));
scene.add(directionalLight);




const loader = new THREE.JSONLoader();
var finger;
var material;


loader.load("./models/Marine.json", (geometry) =>
{

material = new THREE.MeshLambertMaterial ({
    color: 0xFE9A2E,
    wireframe: false,
    skinning: true
  });
  
  

  mesh = new THREE.SkinnedMesh(geometry, material);
  scene.add(mesh);
  //*****************
  //animation
  //*****************
  action.run   = new THREE.AnimationAction( geometry.animations[ 0 ] );
  action.run.weight   = 1;
  mixer = new THREE.AnimationMixer( mesh );
  mixer.addAction( action.run );
  //*****************
  //end animation
  //*****************
  redraw();
});

function showWireframe( visibility ) {
    material.wireframe = visibility;
}


var redraw = function() {
  

  requestAnimationFrame(function(){
    renderer.render(scene,camera)
  })
};



function resizeRendererToDisplaySize(renderer) {
  const canvas = renderer.domElement;
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;
  const needResize = canvas.width !== width || canvas.height !== height;
  if (needResize) {
    renderer.setSize(width, height, false);
  }
  return needResize;
}




function render(time) {
  if (resizeRendererToDisplaySize(renderer)) {
    const canvas = renderer.domElement;
  }

  renderer.render(scene, camera);
  requestAnimationFrame(render);
};
requestAnimationFrame(render);
});

    </script>
</body>

</html>

另附文件，带有角色动画。动画来自 Blender，所以运动可能无法很好地显示。

https://e1.pcloud.link/publink/show?code=XZykbFZCyr8y4KHTxJ843vWw7CdCyghM3ek

用于工作：three.min.js r98 和OrbitControls 同版本。

控制台中对应的错误是：“Uncaught TypeError: THREE.AnimationAction is not a constructor”

【问题讨论】：

标签： javascript module three.js

【解决方案1】：

我建议使用 React 3、React 3 Fiber 和 React 3 Drei。它为几乎每个用例提供了自定义钩子，您仍然可以在其中使用原生 ThreeJs。创建动画并触发它们要容易得多。

查看文档！ https://docs.pmnd.rs/react-three-fiber/getting-started/introduction

【讨论】：