Fix GLTF loader from three.js

Reviewed By: mikearmstrong001 Differential Revision: D7823251 fbshipit-source-id: 172efd61d736326331ec5a104643b9e5dbc5a503
facebookarchive · May 2, 2018 · eb59b72 · eb59b72
1 parent 0b971cd
commit eb59b72
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 9 deletions.
diff --git a/Libraries/Mesh/Entity.js b/Libraries/Mesh/Entity.js
@@ -19,7 +19,7 @@ import type {ViewProps} from 'ViewPropTypes';
 
 type EntitySource =
   | {
-      uri: string,
+      gltf2: string,
     }
   | {
       obj: string | number,

diff --git a/React360/js/Loaders/GLTF2ModelLoader.js b/React360/js/Loaders/GLTF2ModelLoader.js
@@ -106,7 +106,7 @@ class GLTF2MeshInstance {
     // loadList[this.url] = [onLoad];
 
     // $FlowFixMe
-    const loader = new THREE.GLTF2Loader();
+    const loader = new THREE.GLTFLoader();
     loader.load(
       this.url,
       gltf => {

diff --git a/Samples/MultiRoot/ModelView.js b/Samples/MultiRoot/ModelView.js
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import {Animated, View} from 'react-360';
-import Model from 'Model';
+import Entity from 'Entity';
 import AmbientLight from 'AmbientLight';
 import PointLight from 'PointLight';
 import {connect} from './Store';
 
-const AnimatedModel = Animated.createAnimatedComponent(Model);
+const AnimatedEntity = Animated.createAnimatedComponent(Entity);
 
 /**
  * Renders the actual model in 3D space, rotating it a full 360 degrees to show
@@ -34,10 +34,9 @@ class ModelView extends React.Component {
           intensity={0.4}
           style={{transform: [{translate: [0, 4, -1]}]}}
         />
-        <AnimatedModel
-          lit={true}
+        <AnimatedEntity
           style={{transform: [{rotateY: this.rotation}]}}
-          source={{obj: source.root.url, mtl: source.resources[0].url}}
+          source={{gltf2: source.root.url}}
         />
       </View>
     );

diff --git a/Samples/MultiRoot/Store.js b/Samples/MultiRoot/Store.js
@@ -26,7 +26,7 @@ export function initialize(apiKey) {
   // Fetch the top 5 posts from Google Poly
   const options = {
     curated: true,
-    format: 'OBJ',
+    format: 'GLTF2',
     key: apiKey,
     pageSize: 5,
   };
@@ -38,7 +38,7 @@ export function initialize(apiKey) {
     .then(body => {
       const entries = body.assets.map(asset => {
         const objSource = asset.formats.filter(
-          format => format.formatType === 'OBJ'
+          format => format.formatType === 'GLTF2'
         )[0];
         return {
           id: asset.name,