从Cinema 4D导出的.gltf模型未在Angular threejs中加载

时间:2020-07-25 08:29:09

标签: angular three.js gltf cinema-4d

我想将从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);
  }

}

1 个答案:

答案 0 :(得分:1)

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