當畫布不是全屏時點擊three.js中的對象r74

我真的找不到在r74版本中如何在三個JS中使用raycaster的好例子。

這似乎是很多版本，R55和R76 ......和許多論壇之間變化的談論，並把三個次要版本的例子..

任何人都可以給我們怎樣做榜樣它？

進出口使用的角度和引導的方式

這是我嘗試：

我查看

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

我的CSS（使用手寫筆）

.canvas-zonas 
    height 67vh

我的控制器

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); 
    }

所以，當我點擊我的畫布和打印Intersects變量，有時我得到[]一個空數組即使單擊對象，有時我得到[對象]即使我點擊以外物體。

我想告訴你的傢伙我的相機配置了一點點：

我的相機

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();

這是我的攝像頭的配置，並且還具有記住，我使用WEBGL爲渲染

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

而且，有一點，我有一個resize事件回事：

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(); 
    }); 
}

最後，我會後發生了什麼事的形象：

圖片1

圖片2

非常感謝你很多和原諒我的最後一篇文章。我已經更新了！

來源

2016-04-27 Daniel Henao

到目前爲止，您的嘗試是什麼？可以幫助發佈代碼或在codepen.io上創建示例 http://threejs.org/examples/#webgl_interactive_cubes本示例使用最新版本。儘管畫布完整。 – escapedcat

我已經更新了！非常感謝你！ –

嘗試http://stackoverflow.com/questions/13542175/three-js-ray-intersect-fails-by-adding-div/13544277#13544277 – WestLangley

我和你有完全一樣的問題。共度兩天，潛伏在互聯網之後，我終於發現了良好的效果測試此：

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;

來源：THREE.js Ray Intersect fails by adding div

學分：

Y座標 - 「克里斯Roofe」回答。
X座標 - 「Beepscore」誰評論了Kris Roofe的答案。

我希望它能幫助像我這樣的人。

來源

2018-02-13 20:30:07

對我來說是作品，我一直都在爲這件事而頭疼！ –

你能接受我的答案嗎？ :) –

我會如果我能！但是，唉，我不是這個問題的主人。絕對upvoted雖然！ –

當畫布不是全屏時點擊three.js中的對象r74

回答

相關問題