On WebGL I implemented a sphere covered with a textured planet of the earth.

I decided to write a resource loader on promises and how to boot everything up and start the main rendering cycle.

But in the end I see this: (

enter image description here

How to fix this error or how would you write? :)

I use three.js

Here is the js code:

;(function(root,doc){ let _earth = function(material){ let geometry = new THREE.SphereGeometry(200,30,30); return new THREE.Mesh(geometry,material);// СОБСТВЕННО ТУТ ОШИБКА ВЫЛЕТАЕТ, а все предупреждения ещё во время загрузки. }; /* Load all resources */ const resourceLoader = {}; resourceLoader.load = function(_res){//массив ресурсов let _loadRes = function(resource){// load only resource let _resTypes = { texture:function(res,url){// response, url let loader = new THREE.TextureLoader(); loader.load(url, function(texture){ return res(new THREE.MeshBasicMaterial(texture)); }); }, // audio,objects, images }; return new Promise(function(res, rej){ _resTypes[resource.type](res,resource.url); }); } let _resources = map(_res,_loadRes); return Promise.all(_resources);// load all resources } const _init = function(){ /* Windows width and height for WebGL perspective */ const WINDOW_WIDTH = root.innerWidth, WINDOW_HEIGHT = root.innerHeight; /* Canvas DOM element for render frames WebGL */ const CANVAS = doc.getElementById('scene'); /* Set canvas width and height */ CANVAS.setAttribute('width',WINDOW_WIDTH); CANVAS.setAttribute('height',WINDOW_HEIGHT); /* Resources */ const RESOURCES = [ {type:'texture', url:'textures/earth.jpg'}, ]; /* Renderer WebGL */ const renderer = new THREE.WebGLRenderer({canvas:CANVAS}); renderer.setClearColor(0x000000); /* Scena */ const scene = new THREE.Scene(); /* Camera */ const camera = new THREE.PerspectiveCamera(45,WINDOW_WIDTH/WINDOW_HEIGHT, 0.1, 5000); camera.position.set(0,0,1000);//придвинута на 1000 пикселей /* Add basic light */ let light = new THREE.AmbientLight(0xffffff); scene.add(light); /* Load all resources */ resourceLoader.load(RESOURCES).then(function(res){ console.log('All resources load!'); let earth = _earth(res[0]); scene.add(earth); let loop = function(){ renderer.render(scene, camera); earth.rotation.y += 0.01; requestAnimationFrame(loop); }; loop(); }); } _init(); /* Set geometry random color texture */ function setRandomColorTexture(geometry){ let material = new THREE.MeshBasicMaterial({color:0xffffff,vertexColors:THREE.FaceColors}); for(let i = 0; i<geometry.faces.length; i++){ geometry.faces[i].color.setRGB(Math.random(),Math.random(),Math.random()); } } /* Array.map polifill */ function map(array,fn) { var rv = []; for(var i=0, l=array.length; i<l; i++) rv.push(fn(array[i])); return rv; }; })(this,document);

On everyone and html:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>WebGL</title> <style> html,body{ margin:0; padding:0; overflow:hidden; height:100%; } </style> </head> <body> <canvas id="scene"></canvas> <!-- Three js --> <script type="text/javascript" src="vendor/three.min.js"></script> <!-- Index --> <script type="text/javascript" src="js/index.js"></script> </body> </html>

    1 answer 1

    When calling _earth(res[0]) , instead of res[0] transfer an object of the type Material ( MeshBasicMaterial , for example), whose map parameter is a texture based on res[0].url

    In Three.js there is also LoadingManager , which just allows you to first load all the resources and then call the main rendering cycle.

     var manager = new THREE.LoadingManager(); manager.onLoad = function () { loop(); };