Как правильно загрузить текстуру и применить к mesh в threeJS?

Question

[Andrey Dyrkov]

Не понимаю в чём проблема, нужно загрузить текстуру на сферу, но вылетают ошибки.



Вот мой код, в html только canvas(id="scene") :

(function(root,doc){

let SCENE, CAMERA, RENDERER, WIDTH, HEIGHT;

let stats = new Stats();stats.showPanel( 0 );doc.body.appendChild( stats.dom );


function init(){

	WIDTH = root.innerWidth; HEIGHT = root.innerHeight;

	// basic
	SCENE = new THREE.Scene();

	CAMERA = new THREE.PerspectiveCamera( 75, WIDTH/HEIGHT, 0.1, 1000 );
	CAMERA.position.z = 500;

	RENDERER = new THREE.WebGLRenderer({canvas:document.getElementById('scene')});
	RENDERER.setSize( WIDTH, HEIGHT );

	root.addEventListener('resize',resize);

	// НАЧАЛО ПРОБЛЕМЫ >

	let texture = new THREE.TextureLoader().load('textures/earth.jpg');

	let geometry = new THREE.SphereGeometry( 200, 30, 30 ),
			material = new THREE.MeshBasicMaterial( texture ),
			cube = new THREE.Mesh( geometry, material );

	// КОНЕЦ ПРОБЛЕМЫ <

	SCENE.add( cube );

	render();

	function render() {
		stats.begin();


		cube.rotation.x += 0.001;
		cube.rotation.y += 0.01;

		RENDERER.render(SCENE, CAMERA);


		stats.end();
		requestAnimationFrame( render );
	};

	function resize(){

		WIDTH = root.innerWidth; HEIGHT = root.innerHeight;

		RENDERER.setSize( WIDTH, HEIGHT );

		CAMERA.aspect = WIDTH / HEIGHT;

		CAMERA.updateProjectionMatrix();
	}

}

init();

})(this,document);

Можете написать свой код, мне главное чтобы работало хорошо :)

Answer 1

[roswell]

let material = new THREE.MeshBasicMaterial({map: texture});