未定义的纹理以使用MaterialLoader加载JSON材质

时间:2018-08-30 08:38:18

标签: javascript three.js

我有一个来自API的对象和纹理,可以应用于我的对象。我正在使用ObjectLoader加载JSON对象,并且一切正常。 否则,要加载JSON纹理/材料,我正在使用MaterialLoader,它会给出警告:

  

THREE.MaterialLoader:未定义的纹理E0C0F117-56BD-4B63-983A-081E086FA617

这是具有以下纹理的JSON文件:https://jsonblob.com/4af185bb-aaa8-11e8-9316-331e2397d779

我也将代码留在这里:

import React from 'react';
const THREE = require('three');
const OrbitControls = require("three-orbit-controls")(require("three"));

const url = 'myUrlAPI';

export class ThreeScene extends React.Component {

constructor(props) {
    super(props);
    this.rootRef = React.createRef();
}

componentDidMount() {
    const { width, height, json, texture } = this.props; 

    //CREATE SCENE
    var scene = new THREE.Scene();

    //CAMERA
    var camera = new THREE.OrthographicCamera(window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 1, 2000);
    camera.position.set(0, 10, 200);
    scene.add(camera);

    //LIGHTS
    var light = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);
    scene.add(light);

    //RENDERER
    var renderer = new THREE.WebGLRenderer({
        alpha: true
    });
    renderer.setSize(width, height);
    renderer.setClearColor(0x000000, 0);
    this.rootRef.current.appendChild(renderer.domElement);

    //OBJECT LOADER
    var loader = new THREE.ObjectLoader();
    loader.load(url + json, verLoad);

    function verLoad(obj) {
        obj.position.z = -10;
        scene.add(obj);
        obj.scale.set = (2, 1, 1);

        //TEXTURE
        var textureLoader = new THREE.MaterialLoader();

        textureLoader.load(
            url + texture, function (material) {
                obj.material = material;
            }
        );
    }

    //CONTROLS
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableZoom = true;
    controls.maxDistance = 500;
    controls.minDistance = 100;
    controls.maxPolarAngle = Math.PI / 2;

    //ANIMATION
    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        controls.update();
    }
    animate();
}


render() {

    return (
        <div ref={this.rootRef} id="ImagemSofa"></div>
    )

}
}

0 个答案:

没有答案