THREE.js loading modal with model

问题

What I'm currently trying to do is to load main model and then on click event display modal popup window with different model. I'm using raycaster to detect click and everything is working fine, but I'm not able to perform orbit control and raycast on the model that is displayed in the modal.

raycast code part:


    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 %}

Currently I've jus copied the whole code responsible for loading the main model into new javascript file (modelForModal) with changed canvas element id and model url, know that this is not a good solution, would someone suggest how can I change this?

来源：https://stackoverflow.com/questions/60858748/three-js-loading-modal-with-model

标签

javascript

three.js

bootstrap-modal

.obj