ТРИ. js модальная загрузка с моделью - PullRequest
Новая
       37

ТРИ. js модальная загрузка с моделью

0 голосов
/ 26 марта 2020

То, что я сейчас пытаюсь сделать, это загрузить основную модель, а затем щелкнуть модальное всплывающее окно отображения событий с другой моделью. Я использую raycaster для определения щелчка, и все работает нормально, но я не могу выполнить управление орбитой и raycast на модели, отображаемой в модальном режиме.

часть кода raycast: 


    raycaster = new THREE.Raycaster();
    renderer.domElement.addEventListener( 'click', raycast, false );

    function raycast ( e ) {

    //1. sets the mouse position with a coordinate system where the center
    //   of the screen is the origin
    var rect = renderer.domElement.getBoundingClientRect();
    mouse.x = ( ( e.clientX - rect.left ) / rect.width ) * 2 - 1;
    mouse.y = - ( ( e.clientY - rect.top ) / rect.height ) * 2 + 1;

    //2. set the picking ray from the camera position and mouse coordinates
    raycaster.setFromCamera( mouse, camera );

    //3. compute intersections
    var intersects = raycaster.intersectObjects( model.children );
    var inter = intersects[0].object;
    console.log(inter);
    console.log(inter.name)
    if (inter.name === "Top_gum_LP_retopo_asym1_mid" ) {
        $("#modal-visit").modal("show");
    }
}

. html file 

{%extends 'base_layout.html' %} {% load static %}

{% block content %}
<!-- Page content holder -->

<div class="page-content p-5" id="content">

 <h1 class="page-header">Visits</h1>

    <div>
     <div class="modal fade" id="modal-visit">
    <div class="modal-dialog">
      <div class="modal-content">
<div class="modal-header">
      <h4 class="modal-title">Create a new patient</h4>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <canvas id="scene2"></canvas>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/127738/OBJLoader.js"></script>
    <script src="{% static 'js/Libraries/OrbitControls.js' %}"></script>
     <script src="{% static 'js/Libraries/MTLLoader.js' %}"></script>
<script src="{% static 'js/modelForModal.js' %}"></script>

  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="submit" class="btn btn-primary" id="submit">Create patient</button>
  </div>

      </div>
    </div>
  </div>
</div>

    <canvas id="scene"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/127738/OBJLoader.js"></script>
    <script src="{% static 'js/Libraries/OrbitControls.js' %}"></script>
     <script src="{% static 'js/Libraries/MTLLoader.js' %}"></script>
<script src="{% static 'js/model.js' %}"></script>


</div>

{% endblock %}

{% load static %}

В настоящее время я скопировал весь код, отвечающий за загрузку основной модели, в новый файл javascript (modelForModal) с измененными идентификатором элемента canvas и моделью url, знайте, что это не очень хорошее решение, кто-нибудь подскажет, как я могу это изменить?

...