ThreeHelper.js 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. class ThreeHelper {
  2. constructor() {
  3. this.mixers = [];
  4. this.scene = new THREE.Scene();
  5. this.scene.add(new THREE.AmbientLight(0xFFFFFF));
  6. this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
  7. this.camera.lookAt(new THREE.Vector3(0, 0, 0));
  8. this.camera.position.set(-30, 30, 25);
  9. this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  10. this.renderer.setSize(window.innerWidth, window.innerHeight);
  11. this.renderer.domElement.setAttribute('class', 'mainCanvas');
  12. document.body.appendChild(this.renderer.domElement);
  13. this.clock = new THREE.Clock();
  14. this.mixers = [];
  15. window.addEventListener('resize', () => {
  16. this.camera.aspect = window.innerWidth / window.innerHeight;
  17. this.camera.updateProjectionMatrix();
  18. this.renderer.setSize(window.innerWidth, window.innerHeight);
  19. }, false);
  20. this.control = new THREE.OrbitControls(this.camera, this.renderer.domElement);
  21. this.control.update();
  22. this.render();
  23. }
  24. render() {
  25. this.renderer.render(this.scene, this.camera);
  26. for (const mixer of this.mixers) {
  27. mixer.update(this.clock.getDelta());
  28. }
  29. window.requestAnimationFrame(() => {
  30. this.render();
  31. });
  32. }
  33. loadObject(setting) {
  34. const loader = new THREE.FBXLoader();
  35. loader.load(setting.model, (object) => {
  36. object.scale.setScalar(setting.scale);
  37. object.position.set(setting.position[0], setting.position[1], setting.position[1]);
  38. this.scene.add(object);
  39. if (object.animations.length > 0) {
  40. object.mixer = new THREE.AnimationMixer(object);
  41. this.mixers.push(object.mixer);
  42. object.mixer.clipAction(object.animations[0]).play();
  43. }
  44. });
  45. }
  46. }
  47. //# sourceMappingURL=ThreeHelper.js.map