1

我想将从 Cinema 4D 导出的模型添加到 Angular 中的 3D 场景中，我已经编写了下面的代码，但模型没有显示并且场景是黑色的。我需要帮助！！！

从此链接https://stackblitz.com/edit/angular7-playground-j1yzza?file=src%2Fapp%2Fapp.component.ts测试相同的代码，创建的对象工作正常，但加载对象不起作用。

我该怎么办，如何解决这个问题？

import { Component, OnInit } from '@angular/core';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from  'three/examples/jsm/controls/OrbitControls';
@Component({
  selector: 'app-playground',
  templateUrl: './playground.page.html',
  styleUrls: ['./playground.page.scss'],
})
export class PlaygroundPage implements OnInit {
  constructor() { }


  ngOnInit() { 
    // set up scene
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    var renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // controls

    // load headphone model
    var loader = new GLTFLoader();

    loader.load('../../assets/main/headphone.gltf', function (model) {

      model.scene.traverse(c => {
        c.castShadow = true;
      });

      // add model
      scene.add(model.scene);

      // add light
      var ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.8);
      scene.add(ambientLight);

      var pointLight1 = new THREE.PointLight(0xFF0040, 4 ,50);
      scene.add(pointLight1);

      var pointLight2 = new THREE.PointLight(0x0040FF, 3 ,50);
      scene.add(pointLight2);
      
      var pointLight3 = new THREE.PointLight(0x80FF80, 4 ,50);
      scene.add(pointLight3);

      renderer.render(scene, camera);
    },
      undefined, function (error) {
        console.error(error);
      }
    );

    renderer.render(scene, camera);
  }

}
4

1 回答 1

1

该模型在https://gltf-viewer.donmccurdy.com/中正确显示，因此它可以正确导出并在 three.js 中正常加载。看起来您将模型和相机都放在了 0,0,0，也许这就是您看不到它的原因？尝试使用 OrbitControls，如下所示：https ://threejs.org/docs/#examples/en/controls/OrbitControls

于 2020-07-27T01:24:31.800 回答