0

Не понимаю почему не подгружается текстура на куб. В консоли ошибок нет, путь к текстуре правильный. Как это пофиксить?

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    body {
        margin: 0;
    }

    canvas {
        width: 100%;
        height: 100%
    }
</style>
</head>
<body>
<script src="three.min.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material;

var textureLoader=new THREE.TextureLoader();

textureLoader.load('bubble_texture.jpg', texture =>{
    console.log(texture);
    material = new THREE.MeshPhongMaterial({
        map:texture
    });
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

var geometry2 = new THREE.PlaneGeometry(1, 1);
var material2 = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
var plane = new THREE.Mesh( geometry2, material2 );

scene.add( plane );



camera.position.z = 5;

var animate = function () {
    requestAnimationFrame(animate);

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

    plane.rotation.x += 0.01;
    plane.rotation.y += 0.01;

    renderer.render(scene, camera);
};

animate();
</script>
</body>
</html>
0

1 ответ 1

1

В общем-то, с текстурами все в порядке, просто, когда используете материалы, отличные от THREE.MeshBasicMaterial() или THREE.MeshNormalMaterial(), то добавляйте в сцену источники света.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x404040);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshPhongMaterial({
  map: new THREE.TextureLoader().load('https://threejs.org/examples/textures/UV_Grid_Sm.jpg')
});

var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

/*// работает и такой вариант:

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshPhongMaterial();
var cube = new THREE.Mesh(geometry, material);
var textureLoader=new THREE.TextureLoader();

textureLoader.load('https://threejs.org/examples/textures/UV_Grid_Sm.jpg', texture =>{
    console.log(texture);
    material.map = texture;
    material.needsUpdate = true; // важный момент - нужно для перекомпилирования материала
});

*/

var geometry2 = new THREE.PlaneGeometry(1, 1);
var material2 = new THREE.MeshBasicMaterial({
  color: 0xffff00,
  side: THREE.DoubleSide
});
var plane = new THREE.Mesh(geometry2, material2);

scene.add(plane);



camera.position.z = 5;

var animate = function() {
  requestAnimationFrame(animate);

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

  plane.rotation.x += 0.01;
  plane.rotation.y += 0.01;

  renderer.render(scene, camera);
};

animate();
body {
  overflow: hidden;
  margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>

9
  • то есть получаетсья это без сервака можно запустить ?
    – Randall
    Commented 18 сент. 2018 в 13:41
  • @Избытоксусликов локально? можно попытаться, но, скорее всего текстуры не загрузятся. Особенно они не загрузятся в хроме. Commented 18 сент. 2018 в 13:45
  • Да локально..но вы же тут запустили?
    – Randall
    Commented 18 сент. 2018 в 13:45
  • @Избытоксусликов code snippet`ы как раз тут для того и есть, чтобы запускать примеры кода можно было на SO. Commented 18 сент. 2018 в 13:47
  • @prisoner849 Благодарю за пример, но косяк был не в освещении, а в этом: new THREE.TextureLoader().load('threejs.org/examples/textures/UV_Grid_Sm.jpg') Моим способом текстура грузиться не хотела(
    – Zenderg
    Commented 18 сент. 2018 в 15:38

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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