Question

＆＃13;

$(function() {

  /*global variables*/
  var scene, camera, renderer;
  var controls, guiControls, datGUI;
  var stats;
  var spotLight, hemi;
  var SCREEN_WIDTH, SCREEN_HEIGHT;
  var mouse, raycaster;
  var objects = [];

  function init() {
    $(".popup").hide();


    /*creates empty scene object and renderer*/
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, .1, 500);
    renderer = new THREE.WebGLRenderer({
      antialias: true
    });

    renderer.setClearColor(0xFFFFFF);
    renderer.setSize(window.innerWidth, window.innerHeight * .8);
    renderer.shadowMap.enabled = false;
    renderer.shadowMapSoft = false;

    

    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = 30;
    camera.lookAt(scene.position);


    //hemi light
    hemi = new THREE.HemisphereLight(0xbbbbbb, 0x660066);
    scene.add(hemi);

    /*adds spot light with starting parameters*/
    spotLight = new THREE.SpotLight(0xffffff);
    spotLight.castShadow = false;
    spotLight.position.set(20, 35, 40);
    scene.add(spotLight);




    var loader = new THREE.JSONLoader();
    loader.load('shreeganeshsweets.in/1.json', function(geometry, materials) {
      var mesh8 = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
      mesh8.translation = THREE.GeometryUtils.center(geometry);
      mesh8.position.x = 0;
      mesh8.position.y = 0;
      mesh8.position.z = 0;
      scene.add(mesh8);
    });

    //add raycaster and mouse as 2D vector
    raycaster = new THREE.Raycaster();
    mouse = new THREE.Vector2();

    //add event listener for mouse and calls function when activated
    document.addEventListener('mousedown', onDocumentMouseDown, false);
    document.addEventListener('touchstart', onDocumentTouchStart, false);


    $("#webGL-container").append(renderer.domElement);

  }

  function onDocumentTouchStart(event) {

    event.preventDefault();

    event.clientX = event.touches[0].clientX;
    event.clientY = event.touches[0].clientY;
    onDocumentMouseDown(event);

  }

  function onDocumentMouseDown(event) {

    event.preventDefault();

    mouse.x = (event.clientX / renderer.domElement.width) * 2 - 1;
    mouse.y = -(event.clientY / renderer.domElement.height) * 2 + 1;

    raycaster.setFromCamera(mouse, camera);

    var intersects = raycaster.intersectObjects(objects);

    //var color = (Math.random() * 0xffffff);

    if (intersects.length > 0) {

      //intersects[ 0 ].object.material.color.setHex( color );

      this.temp = intersects[0].object.material.color.getHexString();
      this.name = intersects[0].object.name;

      $(".text").empty();
      $(".popup").append("<div class='text'><p>This is the color <strong>#" + this.temp + "</strong> and the name assigned in Blender is <strong>" + this.name + "</strong></p></div>");
      $(".popup").show();

    }

  }

  function render() {

    scene.rotation.y += .001;
  }

  function animate() {
    requestAnimationFrame(animate);
    render();
    renderer.render(scene, camera);
  }

  init();
  animate();

  $(window).resize(function() {
    SCREEN_WIDTH = window.innerWidth;
    SCREEN_HEIGHT = window.innerHeight;
    camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
    camera.updateProjectionMatrix();
    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<HTML>
<title>Demo Page</title>
<style>
  body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    overflow: hidden;
  }
  .popup {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    color: red;
    background: rgba(1, 1, 0, 0.5);
    position: fixed;
    display: none;
    font-size: 30px;
  }
  .text {
    color: blue;
    background: rgb(1, 1, 1);
    left: 50px;
    top: 20px;
  }
</style>

<body>
  <div class="popup">
    <div class="text"></div>
    <button id="close">&times;close</button>
  </div>
  <div id="webGL-container" style="z-index:-9;"></div>
  <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js"></script>
  <script type="text/javascript" src="OrbitControls.js"></script>
  <script type="text/javascript" src="main.js"></script>
</body>

</html>

＆＃13;

我面临的问题是光线投射功能不起作用，我不知道为什么。我想要的是当我点击场景中的一个角色时，应该出现一个弹出窗口，并且应该显示与该角色相关的信息，并且信息将被预定义。如果有人能帮助我那会很棒。

Answer 1

var intersects = raycaster.intersectObjects(objects);

此处objects数组为空。您必须在此数组中添加mesh8。

使用jsonloader进行光线投射

1 个答案: