3D-модель не загружается на устройство android - PullRequest
Новая
       42

3D-модель не загружается на устройство android

0 голосов
/ 16 января 2020

У меня есть страница на моем (очень недавнем, только 2дневному) веб-сайте, которая содержит 3D-модель. Модель была сделана в Blender и была экспортирована в формате .glb с использованием glTF-Blender-IO от KhronosGroup. Загружается с THREE.GLTFLoader. Все отлично работает на настольном компьютере и на устройствах iOS, но не на устройствах Android. Модель просто не появляется. Я получаю сообщение об ошибке: 

Three.WebGlShader: Shader couldn't compile
Three.WebGlProgram: shader error:1282 35715 false
gl.getProgramInfoLog invalid shaders WARNING:0:1:'GL_OES_standard_derivatives':extension is not supported


'use strict';		

window.onload = function() {
	main();
}

function main() {
	var canvas = document.querySelector('#canvasExpo58');
	
	var renderer = new THREE.WebGLRenderer({canvas, antialias:true, alpha:true}); 
	var fov = 45;
	var aspect = window.innerWidth/window.innerHeight;
	var near = 1;
	var far = 1000;
	var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
	camera.position.set(10, 2, 5);				//Zou moeten de initiële positie van de camera zijn bij opstarten: dus wat je als eerste ziet vooraleer je de muis beweegt
	
	var controls = new THREE.OrbitControls(camera, canvas);
	controls.target.set(10, 25, 10);			
	controls.update();
	
	var scene = new THREE.Scene();
	scene.background = renderer.setClearColor(0x000000, 0);				//Deze geeft, samen met de alpha:true in de WebGLRenderer, een transparante achtergrond
	
	
	{
	var light1 = new THREE.DirectionalLight(new THREE.Color(0xFFFFFF), 0.8);
	light1.position.set(-5, -5, 25);
	scene.add(light1);
	scene.add(light1.target);			
	}
	
	{
	var light2 = new THREE.DirectionalLight(new THREE.Color(0xFFFFFF), 1);
	light2.position.set(-40, -10, 4);
	scene.add(light2);
	scene.add(light2.target);			
	}
	{
	var light3 = new THREE.AmbientLight(new THREE.Color(0xCBC9D3), 0.9);
	scene.add(light3);
	scene.add(light3.target);				
	}
	

	
	{
		var loader = new THREE.GLTFLoader();
		loader.load(
			'images/Dressoir.glb',
			(gltf) => {
				var root = gltf.scene;
				scene.add(root);
				
				var box = new THREE.Box3().setFromObject(root);
				var boxSize = box.getSize(new THREE.Vector3()).length();
				var boxCenter = box.getCenter(new THREE.Vector3());
				
				//frameArea(boxSize * 0.5, boxSize, boxCenter, camera);
				
				controls.maxDistance = boxSize * 10;
				controls.target.copy(boxCenter);
				controls.update();
			}
		);
	}
	
	function resizeRendererToDisplaySize(renderer) {
		var canvas = renderer.domElement;
		var width = canvas.clientWidth;
		var height = canvas.clientHeight;
		var needResize = canvas.width !== width || canvas.height !== height;
		if (needResize) {
			renderer.setSize(width, height, false);
		}
		return needResize;
	}
	
	function render() {
		if (resizeRendererToDisplaySize(renderer)) {
			var canvas = renderer.domElement;
			camera.aspect = canvas.clientWidth/canvas.clientHeight;
			camera.updateProjectionMatrix();
		}
		
		renderer.render(scene, camera);
		
		requestAnimationFrame(render);
	}
	
	requestAnimationFrame(render);
	
}

Веб-страница Live Server

Я попытался найти ответ в Интернете, но нашел ничего актуального.

...