国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Three.js 選擇拾取對象學習總結

elina / 2381人閱讀

摘要：選擇對象的本質是從點擊位置發射光線，但屏幕坐標系與坐標系是不同的，而把屏幕的二維坐標轉化為三維坐標就是關鍵，做一步換算后交由的方法即可。

Three.js 選擇對象的本質是從點擊位置發射光線，但屏幕坐標系與webgl坐標系是不同的，而把屏幕的二維坐標轉化為三維坐標就是關鍵，做一步換算后交由Raycaster的setFromCamera方法即可。
所以思路如下：
1.獲取屏幕坐標(x, y)
2.換算至webgl坐標中的(x2,y2)，此時長度仍為像素單位下的長度
3.由于webgl坐標軸的范圍為(-1,1)，做個比值，稱為標準化
4.Raycaster.setFromCamera(mouse, camera)發射射線
5.Raycaster.intersectObjects獲取射得的所有對象,再按需要操作

先對比下各坐標軸，再按代碼分析步驟

代碼中使用了我封裝的方法，threeConf對象包含three.js的基本組件，但不影響拾取對象的邏輯，拾取的代碼于此

一、坐標軸 1.屏幕坐標軸

即我們的屏幕的二維坐標，矩形為我們的屏幕，左上角就是(0, 0)，長度即是以px為單位

2.世界坐標系

即webgl中的坐標系，屏幕中心為(0, 0, z)，第三個坐標為從屏幕指向我們的z軸。三個坐標的大小范圍為(-1,1)，如圖

這里其實還有個相機坐標系，因為還沒有學習webgl或者opengl怕胡說八道，我覺得一篇很棒的blog貼于文末
但是我們實現選擇拾取功能時，但單純從three.js角度來看可以不需要相關知識

二、代碼思路

全部代碼請看上方地址

1.坐標標準化 
//1.獲取屏幕坐標(x, y)
//2.換算至webgl坐標中的(x2,y2)，此時長度單位仍為像素
//3.由于webgl坐標軸的范圍為(-1,1)，做個比值，稱為標準化
//這三步后化簡的式子如下，這里我們three.js的窗口為整個瀏覽器
let rayRaster = new THREE.Raycaster();
let mouse = new THREE.Vector2();
function onMouseMove(event) {
    mouse.x = (event.clientX/window.innerWidth) * 2 - 1;
    mouse.y =  1 -(event.clientY/window.innerHeight) * 2 ;
}
window.addEventListener("mousemove", onMouseMove, false);

x1 = event.clientX，y1 = event.clientY，即點擊位置，換算過程如下（這里默認畫布寬高為瀏覽器寬高）

根據式子帶入x1與y1即可得到代碼中相同的式子

2.發射射線，獲取對象

這里截取射線代碼

function render() {
    //射線射出
    rayRaster.setFromCamera(mouse, threeConf.camera);
    //射線上的物體
    let intersects = rayRaster.intersectObjects(threeConf.scene.children);
    //選中另一物體的情況，仍為同一物體則不更新，這里我們只拿第一個物體
    if(selectedObj !== intersects[0]){
        selectedObj && selectedObj.object.material.color.set(0x87CEEB); //復原
        intersects.length && intersects[0].object.material.color.set(0xff0000);
        selectedObj = intersects[0];
        document.body.style.cursor = "pointer";
    }
    //未選中物體情況
    if(intersects[0] === undefined){
        document.body.style.cursor = "auto";
    }
    threeConf.stats.update();
    threeConf.renderer.render(threeConf.scene, threeConf.camera);
    requestAnimationFrame(render);
}

即可

三、參考資料

OpenGL.坐標系統的介紹與坐標變換的實現(此篇blog包含相機坐標軸)
https://blog.csdn.net/stringN...

ThreeJS中的點擊與交互——Raycaster的用法
https://segmentfault.com/a/11...

Three.js Raycaster官方文檔
https://threejs.org/docs/#api...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100202.html

相關文章

  • WebVR開發教程——交互事件（三）Cardboard與注視

    摘要：開發傳送門開發教程交互事件一頭顯與手柄開發教程交互事件二使用開發教程深度剖析關于的開發調試方案以及原理機制開發教程標準入門使用開發場景的入門教程 showImg(https://segmentfault.com/img/remote/1460000011814846?w=1240&h=587); Cardboard可以說是手機VR頭顯的元老了，狹義上指的是Google推出的一個帶有雙凸...

    Allen 評論0 收藏0

  • SegmentFault 技術周刊 Vol.35 - WebGL：打開網頁看大片

    摘要：在文末，我會附上一個可加載的模型方便學習中文藝術字渲染用原生可以很容易地繪制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說是 HTML5 技術生態鏈中最為令人振奮的標準之一，它把 Web 帶入了 3D 的時代。 初識 WebGL 先通過幾個使用 Web...

    objc94 評論0 收藏0

  • three.js 入門詳解(一)

    摘要：一般說來，對于制圖建模軟通常使正交投影，這樣不會因為投影而改變物體比例而對于其他大多數應用，通常使用透視投影，因為這更接近人眼的觀察效果。 showImg(https://segmentfault.com/img/remote/1460000012581680?w=1920&h=1080); 1. 概述 1.1 什么是WebGL？ WebGL是在瀏覽器中實現三維效果的一套規范 想要使用...

    Jacendfeng 評論0 收藏0

  • 【three.js學習筆記】渲染器

    摘要：使用將能夠利用硬件加速從而提高渲染性能。這個渲染器比渲染器有更好的性能。聲明構造器是一個可選對象，包含用來定義渲染器行為的屬性。所用的渲染上下文對象。設置背景色和背景色透明度渲染器渲染器不使用來繪制場景，而使用相對較慢的。 渲染器api WebGL渲染器（WebGLRenderer） WebGL渲染器使用WebGL來繪制您的場景，如果您的設備支持的話。使用WebGL將能夠利用GPU硬...

    劉玉平 評論0 收藏0

發表評論

0條評論

elina

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<