three.js: добавить изображение на пол панорамы

Я использую этот код Panorama и хочу добавить изображение на пол этой панорамы. Может ли кто-нибудь подсказать мне, как это сделать. Изображение очень маленькое (256x256)


javascript three.js panoramas
person Saurabh Kathpalia    schedule 12.06.2015    source источник
comment
У вас нет четкого вопроса здесь. Вы хотите повторно использовать ту же картинку с другим этажом? В этом случае вы можете скачать текстуру и заменить часть пола своим изображением. В противном случае вы можете использовать MeshFaceMaterial и определять свои изображения лицом к лицу.   -  person Atrahasis    schedule 12.06.2015
comment
Эй, я хочу добавить изображение, которое занимает часть пола. например, у меня есть пол 1024x1024 с какой-то текстурой на нем. Теперь я хочу добавить изображение 256x256 на часть пола (может быть в центре пола), чтобы я мог видеть текстуру и изображение, при этом изображение занимает некоторое пространство пола.   -  person Saurabh Kathpalia    schedule 15.06.2015
comment
У меня такой же вопрос. Пытаюсь добавить небольшой круг на пол текстуры в панораме. Я попытался ответить ниже, но, похоже, это не дало мне желаемых результатов. У тебя есть решение?   -  person Vad    schedule 08.07.2018

Ответы (1)


arrow_upward
1
arrow_downward

Чтобы добавить изображение на пол, вы должны создать PlaneGeometry, MeshBasicMaterial, а затем применить их к Mesh, а затем изменить положение и вращение OnAxis.

Пример:

var geometry = new THREE.PlaneGeometry( 1, 1 );
var material = new THREE.MeshBasicMaterial( { map : texture, opacity : 1, side : THREE.DoubleSide, transparent : true } );
var sprite = new THREE.Mesh( geometry, material );

где текстура — это изображение, которое вы хотите вставить, добавленное через загрузчик текстур.

Затем вы должны установить положение спрайта с помощью функции position.set.

Для установки спрайта на север:

sprite.position.set(0,-360,0);

Для установки спрайта на юг:

sprite.position.set(0,360,0);

Последний шаг — повернуть спрайт на 90 градусов, чтобы он был виден, иначе он будет отображаться следующим образом | и не [] . Итак, мы должны выполнить rotateOnAxis:

sprite.rotateOnAxis(  new THREE.Vector3( 1, 0, 0 ), THREE.Math.degToRad(90) );

Если изображение слишком маленькое, вы можете использовать:

sprite.scale.set( scaleValue, scaleValue, scaleValue );

Где scaleValue — значение больше 0.

person gadlol    schedule 30.12.2016