避免在 Three 中空检查加载的 .obj 模型.js

Question

我在Angular项目中使用三.js。我想加载一个简单的.obj文件并将其移动到画布上。

代码工作正常;但是，我必须在我的animate（）-函数中显式执行空检查，以查看模型是否已加载。如果不进行空值检查，控制台将记录以下内容：

类型错误：无法在 TestComponent.animate 上读取 null 的属性“位置”（test.component.ts：71）

我想这是因为实例引用尚未设置，因为此时 OBJLoader 仍在忙于加载资源。

最小可验证示例：

import * as THREE from 'three';

import { OBJLoader2 } from 'three/examples/jsm/loaders/OBJLoader2.js';

import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js';

import { MtlObjBridge } from 'three/examples/jsm/loaders/obj2/bridge/MtlObjBridge.js';

@Component({

  selector: 'app-test',

  templateUrl: './test.component.html',

  styleUrls: ['./test.component.css'],

})

export class TestComponent implements AfterViewInit {

  @ViewChild('rendererContainer') rendererContainer: ElementRef;

  renderer: THREE.WebGLRenderer;

  scene = null;

  camera = null;

  mesh = null;

  loader = null;

  female = null;

  constructor() {}

  ngAfterViewInit() {

    this.init();

    this.animate();

  }

  init() {

    this.renderer = new THREE.WebGLRenderer();

    this.renderer.setPixelRatio(window.devicePixelRatio);

    this.renderer.setSize(window.innerWidth, window.innerHeight);

    this.rendererContainer.nativeElement.appendChild(this.renderer.domElement);

    this.scene = new THREE.Scene();

    this.scene.add(new THREE.AmbientLight(0xffffff));

    this.camera = new THREE.PerspectiveCamera(

      75,

      window.innerWidth / window.innerHeight,

      1,

      10000

    );

    this.camera.position.z = 500;

    this.loader = new OBJLoader2();

    new MTLLoader().load('./../../assets/models/female02.mtl', (mtl) => {

      this.loader.setModelName('female02');

      this.loader.setLogging(true, true);

      this.loader.addMaterials(

        MtlObjBridge.addMaterialsFromMtlLoader(mtl),

        true

      );

      this.loader.load(

        './../../assets/models/female02.obj',

        (object3d) => {

          this.female = object3d;

          this.scene.add(object3d);

        },

        null,

        null,

        null

      );

    });

  }

有没有更好的方法来操作动画循环中的对象，而不必每次都执行空检查？

Answer 1

一种解决方案是在加载模型后立即开始动画处理。这意味着在将模型添加到场景后立即调用回调。animate()onLoad()

Answer 2

如果需要在加载任何内容之前触发动画循环，另一种方法是将引用替换为虚拟对象：const nullObject= new Object3D()let female = nullObjectlet male = nullObjectlet child = nullObject//...function onLoad( trueObject ) {  female = trueObject}这样，您可以期望存在所有方法和成员，但它们将是noops。