1

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/

2 ответа 2

2

Обновите библиотеку до 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>

1
  • 1
    Или добавить источник света в сцену. В зависимости от того, какой эффект нужно достичь. 26 мар 2018 в 12:35
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>

1
  • огромнейшее спасибо)) В оригинале у меня на локалке как раз 3 параметра. А то, что выше - просто нашла в гугле готовую сферу jsfiddle.net, чтобы сформулировать вопрос для этого форума))
    – Natalya
    26 мар 2018 в 12:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.