te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - Clicking Objects in three.js when the canvas is not full screen r74 - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - Clicking Objects in three.js when the canvas is not full screen r74 - Stack Overflow

    javascript - Clicking Objects in three.js when the canvas is not full screen r74 - Stack Overflow

    programmeradmin3浏览0评论

    thank you for taking your time to answer my question.

    I really can't find a good example on how to use raycaster in three JS in the version r74.

    It seems to be a lot of changes between the versions r55 and r76... and many forums are talking and putting examples of minor versions of three..

    can anyone give us an example of how to do it?

    Im using angular and bootstrap by the way

    this is what i've try:

    My View

    <div class="col-md-11">
  <div class="container">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Title</h3>
      </div>
      <div class="panel-body" style="padding: 0px">
        <div class="canvas-zonas" ng-click="zonas.click($event)">
        </div>
      </div>
    </div>
  </div>
</div>

    My Css (using stylus)

    .canvas-zonas
  height 67vh

    My Controller

    var = mouse = new THREE.Vector3();
var = raycaster = new THREE.Raycaster();
var = canvas = document.querySelector(".canvas-zonas");

function clickObject(event) {
      event.preventDefault();
      mouse.x= ((event.clientX - canvas.offsetLeft)/canvas.clientWidth) * 2 - 1;
      mouse.y=-((event.clientY - canvas.offsetTop)/canvas.clientHeight) * 2 + 1;
      mouse.z = 0.5;
      raycaster.setFromCamera( mouse, camera );
      var intersects = vm.raycaster.intersectObjects(scene.children);
      console.info(intersects);
    }

    So when I click my canvass and print the Intersects variable, sometimes I get [] an empty array even if a click the object and sometimes I get [object] even if I click outside the object.

    I would like to show you guys a little bit of my camera config:

    My camera

    var camera = new THREE.PerspectiveCamera(30, canvas.clientWidth / canvas.clientHeight, 0.10, 1000)
camera.position.y = 20;
camera.position.z = 50;
camera.lookAt(scene.position);
camera.updateProjectionMatrix();

    That's my camera config, and also, have in mind that I use a WEBGL as renderer

    var renderer = new THREE.WebGLRenderer({antialias: true});

    Also, have in mind that I have a resize event going on:

    function listenResize() {
  window.bind('resize', function () {
    canvas = document.querySelector(".canvas-zonas");
    renderer.setSize(canvas.clientWidth, canvas.clientHeight);
    camera.aspect = (canvas.clientWidth / canvas.clientHeight);
    camera.updateProjectionMatrix();
  });
}

    And finally, I'll post an image of what's going on:

    Image 1

    Image 2

    thank you very much and excuse my last post. i've updated it!!!

    thank you for taking your time to answer my question.

    I really can't find a good example on how to use raycaster in three JS in the version r74.

    It seems to be a lot of changes between the versions r55 and r76... and many forums are talking and putting examples of minor versions of three..

    can anyone give us an example of how to do it?

    Im using angular and bootstrap by the way

    this is what i've try:

    My View

    <div class="col-md-11">
  <div class="container">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Title</h3>
      </div>
      <div class="panel-body" style="padding: 0px">
        <div class="canvas-zonas" ng-click="zonas.click($event)">
        </div>
      </div>
    </div>
  </div>
</div>

    My Css (using stylus)

    .canvas-zonas
  height 67vh

    My Controller

    var = mouse = new THREE.Vector3();
var = raycaster = new THREE.Raycaster();
var = canvas = document.querySelector(".canvas-zonas");

function clickObject(event) {
      event.preventDefault();
      mouse.x= ((event.clientX - canvas.offsetLeft)/canvas.clientWidth) * 2 - 1;
      mouse.y=-((event.clientY - canvas.offsetTop)/canvas.clientHeight) * 2 + 1;
      mouse.z = 0.5;
      raycaster.setFromCamera( mouse, camera );
      var intersects = vm.raycaster.intersectObjects(scene.children);
      console.info(intersects);
    }

    So when I click my canvass and print the Intersects variable, sometimes I get [] an empty array even if a click the object and sometimes I get [object] even if I click outside the object.

    I would like to show you guys a little bit of my camera config:

    My camera

    var camera = new THREE.PerspectiveCamera(30, canvas.clientWidth / canvas.clientHeight, 0.10, 1000)
camera.position.y = 20;
camera.position.z = 50;
camera.lookAt(scene.position);
camera.updateProjectionMatrix();

    That's my camera config, and also, have in mind that I use a WEBGL as renderer

    var renderer = new THREE.WebGLRenderer({antialias: true});

    Also, have in mind that I have a resize event going on:

    function listenResize() {
  window.bind('resize', function () {
    canvas = document.querySelector(".canvas-zonas");
    renderer.setSize(canvas.clientWidth, canvas.clientHeight);
    camera.aspect = (canvas.clientWidth / canvas.clientHeight);
    camera.updateProjectionMatrix();
  });
}

    And finally, I'll post an image of what's going on:

    Image 1

    Image 2

    thank you very much and excuse my last post. i've updated it!!!

    • javascript
    • three.js
    Share Improve this question edited Apr 27, 2016 at 16:50 Daniel Henao asked Apr 27, 2016 at 3:59 Daniel HenaoDaniel Henao 836 silver badges23 bronze badges 4
    • What is your try so far? Might help to post code or to create an example on codepen.io threejs/examples/#webgl_interactive_cubes This example is working with the latest version. Full canvas though. – escapedcat Commented Apr 27, 2016 at 7:04
    • I have updated it! thank you very much! – Daniel Henao Commented Apr 27, 2016 at 16:52
    • Try stackoverflow./questions/13542175/… – WestLangley Commented Apr 28, 2016 at 3:58
    • I've tried that before... doesn't work, besides that's a post from 3 years ago, and I'm using the r74 of Three JS – Daniel Henao Commented Apr 28, 2016 at 4:31
    Add a ment  | 

    2 Answers 2

    Reset to default 17

    I had exactly the same problem as you. After spending two days lurking around internet I finally found and tested this with good results:

    let canvasBounds = this.renderer.context.canvas.getBoundingClientRect();
this.mouse.x = ( ( event.clientX - canvasBounds.left ) / ( canvasBounds.right - canvasBounds.left ) ) * 2 - 1;
this.mouse.y = - ( ( event.clientY - canvasBounds.top ) / ( canvasBounds.bottom - canvasBounds.top) ) * 2 + 1;

    Source: THREE.js Ray Intersect fails by adding div

    Credits:

    • Y coordinate - "Kris Roofe" answer.
    • X coordinate - "beepscore" who mented Kris Roofe's answer.

    I hope it helps many folks like me.

    Maybe things have changed in the intervening years ... this mapping from mouse to (-1, 1) coordinates works for me despite responsive canvas shrinkage:

    mouseVector.x = 2 * (e.x / canvas.offsetWidth) - 1;
mouseVector.y = 1 - 2 * ( (e.y - canvas.offsetTop) / canvas.offsetHeight );
mouseVector.z = 0.5 ;

    Note that offsetHeight is NOT the same as height! same for width.

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论