Three.js не накладывается структура

167

27 марта 2018, 02:53

https://threejs.org/docs/index.html#api/loaders/TextureLoader Сделала по документации

var geometry = new THREE.SphereGeometry(3, 50, 50, 0, Math.PI * 2, 0, Math.PI * 2);
//var material = new THREE.MeshNormalMaterial();
    texture = new THREE.TextureLoader().load( 'https://images1.popmeh.ru/upload/img_cache/ddd/dddb20cea383bbef1201c12e50bff211_ce_1277x799x0x0_cropped_800x427.jpg' );
    material = new THREE.MeshPhongMaterial({ map: texture});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

(При загрузке локального файла та же беда, меняла форматы на jpg, png, gif) Заранее большое спасибо

http://jsfiddle.net/Nata_Hamster/SF9tX/1408/

Answer 1

Обновите библиотеку до r91: http://jsfiddle.net/SF9tX/1450/

и замените MeshPhongMaterial на MeshBasicMaterial

var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera(50, 500 / 400, 0.1, 1000); 
 
var renderer = new THREE.WebGLRenderer(); 
renderer.setSize(500, 400); 
document.body.appendChild(renderer.domElement); 
 
var geometry = new THREE.SphereGeometry(3, 50, 50, 0, Math.PI * 2, 0, Math.PI * 2); 
 
 
var texture = new THREE.TextureLoader().load('https://images1.popmeh.ru/upload/img_cache/ddd/dddb20cea383bbef1201c12e50bff211_ce_1277x799x0x0_cropped_800x427.jpg'); 
var material = new THREE.MeshBasicMaterial({map: texture}); 
var cube = new THREE.Mesh(geometry, material); 
scene.add(cube); 
     
 
 
camera.position.z = 10; 
var render = function () { 
    requestAnimationFrame(render); 
    cube.rotation.y += 0.01; 
    renderer.render(scene, camera); 
}; 
 
render();

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.js"></script>

Answer 2

Не претендуя на всяческие лавры: если создавать сферу, то параметры для задания углов и секторов лучше вообще пропускать. Если последний параметр будет равен 2 * Math.PI, то результат будет странный. Как показано для сравнения ниже.

var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera(50, 500 / 400, 0.1, 1000); 
 
var renderer = new THREE.WebGLRenderer(); 
renderer.setSize(500, 400); 
document.body.appendChild(renderer.domElement); 
 
var geometry = new THREE.SphereGeometry(3, 50, 50, 0, Math.PI * 2, 0, Math.PI * 2); 
 
 
var texture = new THREE.TextureLoader().load('https://images1.popmeh.ru/upload/img_cache/ddd/dddb20cea383bbef1201c12e50bff211_ce_1277x799x0x0_cropped_800x427.jpg'); 
var material = new THREE.MeshBasicMaterial({ 
  map: texture 
}); 
 
var sphere = new THREE.Mesh(geometry, material); 
sphere.position.x = -4; 
scene.add(sphere); 
 
 
var sphere2 = new THREE.Mesh(new THREE.SphereGeometry(3, 50, 50, 0, Math.PI * 2, 0, Math.PI), material); 
sphere2.position.x = 4; 
scene.add(sphere2); 
 
 
 
camera.position.z = 20; 
var render = function() { 
  requestAnimationFrame(render); 
  sphere.rotation.y += 0.01; 
  sphere2.rotation.y += 0.01; 
  renderer.render(scene, camera); 
}; 
 
render();

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.js"></script>

Answer 3

@lampa огромнейшее спасибо. Была мысль, что библиотека устарела.

Можете еще подсказать, может, сталкивались - локальный файл в мозиле отображается, а вот в хроме только ссылка со стороннего ресурса, что не очень хорошо, с чужих серверов картинки и убираются....