Three.js in div

我想把一個THREE.WebGLRenderer放在div中。爲了做一些事情，mouseevents應該工作。我到目前爲止發現的是：http://jsfiddle.net/fek9ddg5/1/Three.js in div

我試圖按如下方式實現此代碼。我的問題：看起來，鼠標點擊幾何（控制檯顯示「命中」），但幾何不顯示。我的錯是什麼？

HTML：

` 測試儀

<title>Jumbotron Template for Bootstrap</title> 

    <!-- Bootstrap core CSS --> 
    <link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> 

    <!-- Custom CSS --> 
    <link href="../bootstrap-3.3.7-dist/css/portfolio-item.css" rel="stylesheet"> 
    <style> 
     .container-main { 
      margin-top: 75px; 
     } 

     .container-canvas { 
      margin: 0 auto; 
      width: 200px; 
     } 

     canvas { 
      border: 1px solid #333; 
      background-color: #000; 
     } 
    </style> 

</head> 
<body> 
    <script src="../build/three.js"></script> 
    <script src="js/libs/stats.min.js"></script> 
    <script src="js/libs/dat.gui.min.js"></script> 
    <script src="js/controls/OrbitControls.js"></script>   
    <script src="js/Detector.js"></script> 

    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="navbar-inner"> 
      <div class="container"> 
       <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="brand" href="#">Project name</a> 
       <div class="nav-collapse collapse"> 
        <ul class="nav"> 
         <li class="active"><a href="#">Home</a></li> 
         <li><a href="#about">About</a></li> 
         <li><a href="#contact">Contact</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="container container-main"> 
     <div class="container-canvas"> 
      <canvas id="mycanvas" width="200" height="200"> 
       This is my fallback content. 
      </canvas> 
     </div> 
    </div> 
     <div class="row"> 

      <div class="col-lg-12"> 
       <h3 class="page-header">Related Projects</h3> 
      </div> 

      <div class="col-sm-3 col-xs-6"> 
       <a href="#"> 
        <img class="img-responsive portfolio-item" src="http://placehold.it/500x300" alt=""> 
       </a> 
      </div> 

      <div class="col-sm-3 col-xs-6"> 
       <a href="#"> 
        <img class="img-responsive portfolio-item" src="http://placehold.it/500x300" alt=""> 
       </a> 
      </div> 

      <div class="col-sm-3 col-xs-6"> 
       <a href="#"> 
        <img class="img-responsive portfolio-item" src="http://placehold.it/500x300" alt=""> 
       </a> 
      </div> 

      <div class="col-sm-3 col-xs-6"> 
       <a href="#"> 
        <img class="img-responsive portfolio-item" src="http://placehold.it/500x300" alt=""> 
       </a> 
      </div> 

     </div>`

的javascript：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script> 
     var container, camera, scene, renderer, mesh, 

      mouse = { x: 0, y: 0 }, 
      objects = [], 

      count = 0, 

      CANVAS_WIDTH = 200, 
      CANVAS_HEIGHT = 200; 

     canvas = document.getElementById('mycanvas'); 

     renderer = new THREE.WebGLRenderer(); 
     renderer.domElement = canvas; 
     renderer.setSize(CANVAS_WIDTH, CANVAS_HEIGHT); 

     scene = new THREE.Scene(); 

     camera = new THREE.PerspectiveCamera(50, CANVAS_WIDTH/CANVAS_HEIGHT, 1, 1000); 
     camera.position.y = 150; 
     camera.position.z = 2000; 
     camera.lookAt(scene.position); 

     mesh = new THREE.Mesh( 
      new THREE.BoxGeometry(200, 200, 200, 1, 1, 1), 
      new THREE.MeshBasicMaterial({ color : 0xff0000, wireframe: true } 
     )); 
     scene.add(mesh); 
     objects.push(mesh); 


     // find intersections 
     var vector = new THREE.Vector3(); 
     var raycaster = new THREE.Raycaster(); 

     // mouse listener 
     document.addEventListener('mousedown', function(event) { 

      // For the following method to work correctly, set the canvas position *static*; margin > 0 and padding > 0 are OK 
      mouse.x = ((event.clientX - renderer.domElement.offsetLeft)/renderer.domElement.width) * 2 - 1; 
      mouse.y = - ((event.clientY - renderer.domElement.offsetTop)/renderer.domElement.height) * 2 + 1; 

      // For this alternate method, set the canvas position *fixed*; set top > 0, set left > 0; padding must be 0; margin > 0 is OK 
      //mouse.x = ((event.clientX - container.offsetLeft)/container.clientWidth) * 2 - 1; 
      //mouse.y = - ((event.clientY - container.offsetTop)/container.clientHeight) * 2 + 1; 

      vector.set(mouse.x, mouse.y, 0.5); 
      vector.unproject(camera); 

      raycaster.set(camera.position, vector.sub(camera.position).normalize()); 

      intersects = raycaster.intersectObjects(objects); 

      if (intersects.length > 0) { 

       console.log("hit"); 
       console.log(renderer); 
      } 

     }, false); 

     function render() { 

      mesh.rotation.y += 0.01; 

      renderer.render(scene, camera); 

     } 

     (function animate() { 

      requestAnimationFrame(animate); 

      render(); 

     })(); 
    </script>

非常感謝您的幫助！

來源

2016-09-26 J. Doe

乍一看，它看起來像你的目是太遠，相機渲染。嘗試使攝像機的「遠」屬性變大：'camera = new THREE.PerspectiveCamera（50，CANVAS_WIDTH/CANVAS_HEIGHT，1,5000）;' – guardabrazo

感謝您的評論。我創建了一個小提琴：[link]（https://jsfiddle.net/8mszqo83/3/）。將該值更改爲5000不會有任何區別。如果您在畫布中間點擊，則會出現交叉點。 –

我改變了相機的位置。你將在大部分畫布區域都有一個交叉點[link] https://jsfiddle.net/8mszqo83/5/但是爲什麼幾何不顯示？ –

Pls follow the following steps to view your geometry. 

1.Try to use div tag instead of canvas. 
<div id="mycanvas" width="200" height="200"> 
    This is my fallback content. 
</div> 
2.To remove the following code 
    renderer.domElement = canvas; 
3.Add the following line in your code  
    canvas.appendChild(renderer.domElement);

這裏是工作提琴：https://jsfiddle.net/8mszqo83/6/

來源

2016-09-26 15:18:59 selvarajmas

非常感謝你！ –

回答

相關問題