0

Есть объекты на сцене, при на ведении на один из объектов хочу отобразить так сказать "меню", а точнее кнопку на подложке, при нажатии на нее выполнять те или иные действия для этого объекта. Всезнающий гугл выдал пример но здесь как tooltip, и это совсем не то( Возможно ли это? Как? Или пример где то. Спасибо.

if (intersects.length) {
    var intersect = intersects[0].object;
    //TODO: ....
}

jsFiddle

2
  • А где должна располагаться обозначенная "кнопка на подложке"? И когда она должна появляться: сразу при перемещении мыши над объектом или по правому клику мышки? Можно каких-то поясняющих картинок? 18 дек 2017 в 17:23
  • Думал так что бы, при наведении идет некоторая задержка 200-300 миллисекунд и появлялась joxi.ru/5mdYNgOFkzZZb2 просто сверху, или снизу, так как эти объекты я двигаю мышью по сцене. После клика левой кнопкой, на это "меню" оно пропадает, так как событие идет уже на движение(mousemove) По правому клику мышью не думал...
    – Mr.Andrew
    18 дек 2017 в 17:52

1 ответ 1

0

Это скорее концепт и отправная точка. Поэтому финальная реализация может радикально отличаться от того, что представлено здесь.

Если мышь по-над объектом - по правому щелчку выскакивает меню с кнопкой. При нажатии на кнопку - меняется цвет объекта, меню скрывается.

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 10, 50);

var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var geometry = new THREE.TorusKnotGeometry(10, 2, 100, 20);
var material = new THREE.MeshBasicMaterial({
  color: 0xffff00
});
var torusKnot = new THREE.Mesh(geometry, material);
scene.add(torusKnot);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

/////////////////////////////

var mouse = new THREE.Vector2();
var raycaster = new THREE.Raycaster();
var intersect;
var rect = renderer.domElement.getBoundingClientRect();

window.addEventListener('mousemove', onDocumentMouseMove, false);
window.addEventListener('mousedown', onMouseDown, false);
window.addEventListener('resize', onWindowResize, false);
if (document.addEventListener) {
  document.addEventListener('contextmenu', function (e) {
    e.preventDefault();
  }, false);
} else {
  document.attachEvent('oncontextmenu', function () {
    window.event.returnValue = false;
  });
}


function onDocumentMouseMove(event) {
  event.preventDefault();
  
  mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
  mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;

}

function onMouseDown(event) {
  event.preventDefault();
  var rightclick;
    if (!event) var event = window.event;
    if (event.which) rightclick = (event.which == 3);
    else if (event.button) rightclick = (event.button == 2);
  if (!rightclick) return;

  raycaster.setFromCamera(mouse, camera);

  var intersects = raycaster.intersectObjects([torusKnot]);

  if (intersects.length) {
    intersect = intersects[0].object;
    menu.style.left = (event.clientX - rect.left) + "px";
    menu.style.top = (event.clientY - rect.top) + "px";
    menu.style.display = "";
  }
  else{
    intersect = undefined;
  }
}

changeColor.addEventListener("click", function(){
	intersect.material.color.setHex(Math.random() * 0x777777 + 0x777777);
  menu.style.display = "none";
}, false);

function onWindowResize(event) {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}
body {
  background: #fff;
  overflow: hidden;
  margin: 0;
  position: relative;
}
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div id="menu" style="position:absolute;display:none;background-color:red">
  <span color="red">Меню</span>
  <br>
  <button id="changeColor">
    Сменить цвет
  </button>
</div>

2
  • Хоть это и не при hover как в теме, это действительно хороший концепт и отправная точка! Спасибо тебе prisoner849!
    – Mr.Andrew
    18 дек 2017 в 20:56
  • @Mr.Andrew Рад помочь ) 18 дек 2017 в 21:21

Ваш ответ

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

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