Hover на объект и отображение кнопки three js

243

19 декабря 2017, 20:02

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

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

jsFiddle

Answer 1

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

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

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>