您好,登錄后才能下訂單哦!
怎么在HTML5中使用WebGL實(shí)現(xiàn)一個(gè)垃圾分類系統(tǒng)?相信很多沒有經(jīng)驗(yàn)的人對此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個(gè)問題。
gv.setMovableFunc(() => { return false }) // 禁止拖動 gv.getWireframe = (d) => { d.s('wf.visible', false) } // 隱藏選中邊框 gv.setEye([583, -212, -789]) // 設(shè)置眼睛 gv.setCenter([-76, -654, -133]) // 設(shè)置中心點(diǎn) gv.setFar(100000) // 設(shè)置遠(yuǎn)端位置 gv.setNear(10) // 設(shè)置近端位置 gv.setInteractors([ new ht.graph4d.MapInteractor(gv) ]) // 設(shè)置交互限制 gv.setSkyBox(dm.getDataByTag('skyBox')) // 設(shè)置天空球 window.document.oncontextmenu = () => { return false } // 全局設(shè)置右鍵菜單禁用 gv.scene = { // 復(fù)制初始位置 eye: ht.Default.clone(gv.getEye()), center: ht.Default.clone(gv.getCenter()), far: ht.Default.clone(gv.getFar()), near: ht.Default.clone(gv.getNear()), }
我復(fù)制了一下整個(gè)場景的初始視角情況方便我做稍后的處理,我監(jiān)聽了部分鼠標(biāo)事件來形成自己的操作風(fēng)格(比如雙擊背景還原視角以及雙擊模型拉近視角):
gv.mi(e => { let data = e.data let kind = e.kind if (kind === 'doubleClickBackground') { // 雙擊背景 gv.moveCamera(this.gv.scene.eye, this.gv.scene.center, {duration : 1000}) // 恢復(fù)視角 } else if (kind === 'doubleClickData') { // 雙擊模型 gv.flyTo(data, {animation : {duration : 500}, distance : 800}) // 拉近視角 } })
function mechanicalArmAnim1() { ht.Default.startAnim({ duration: 1000, easing: (t) => { return t }, action: (v, t) => { postbrachium.r3(degrees(0) + (degrees(20) - degrees(0)) * v, postbrachium.r3()[1], postbrachium.r3()[2]) // 后臂向下移 }, finishFunc: () => { setTimeout(() => { mechanicalArmAnim2() }, 300) } }) } function mechanicalArmAnim2() { ht.Default.startAnim({ duration: 1000, easing: (t) => { return t }, action: (v, t) => { postbrachium.p3(-208 + (-184 + 208) * v, postbrachium.p3()[1], postbrachium.p3()[2]) // 后臂前伸 hydraulicRod1.r3(degrees(0) + (degrees(8) - degrees(0)) * v, hydraulicRod1.r3()[1], hydraulicRod1.r3()[2]) // 液壓桿1傾斜 extensionRod1.r3(degrees(0) + (degrees(8) - degrees(0)) * v, extensionRod1.r3()[1], extensionRod1.r3()[2]) // 伸長桿1傾斜 extensionRod1.p3(-169 + (-185 + 169) * v, -516 + (-511 + 516) * v, extensionRod1.p3()[2]) // 伸長桿1伸長 hydraulicRod2.r3(degrees(0) + (degrees(-8) - degrees(0)) * v, hydraulicRod2.r3()[1], hydraulicRod2.r3()[2]) // 液壓桿2傾斜 extensionRod2.r3(degrees(0) + (degrees(-8) - degrees(0)) * v, extensionRod2.r3()[1], extensionRod2.r3()[2]) // 伸長桿2傾斜 extensionRod2.p3(-169 + (-185 + 169) * v, -516 + (-511 + 516) * v, extensionRod2.p3()[2]) // 伸長桿2伸長 }, finishFunc: () => { setTimeout(() => { mechanicalArmAnim3() }, 300) } }) } function mechanicalArmAnim3() { let oldValue = antebrachium.r3()[0] ht.Default.startAnim({ duration: 1000, easing: (t) => { return t }, action: (v, t) => { hydraulicRod1.r3(degrees(8) + (degrees(7) - degrees(8)) * v, hydraulicRod1.r3()[1], hydraulicRod1.r3()[2]) // 液壓桿1傾斜 extensionRod1.r3(degrees(8) + (degrees(7) - degrees(8)) * v, extensionRod1.r3()[1], extensionRod1.r3()[2]) // 伸長桿1傾斜 extensionRod1.p3(-185 + (-186 + 185) * v, -511 + (-507 + 511) * v, extensionRod1.p3()[2]) // 伸長桿1伸長 hydraulicRod2.r3(degrees(-8) + (degrees(-7) - degrees(-8)) * v, hydraulicRod2.r3()[1], hydraulicRod2.r3()[2]) // 液壓桿2傾斜 extensionRod2.r3(degrees(-8) + (degrees(-7) - degrees(-8)) * v, extensionRod2.r3()[1], extensionRod2.r3()[2]) // 伸長桿2傾斜 extensionRod2.p3(-185 + (-186 + 185) * v, -511 + (-507 + 511) * v, extensionRod2.p3()[2]) // 伸長桿2伸長 postbrachium.r3(degrees(20) + (degrees(25) - degrees(20)) * v, postbrachium.r3()[1], postbrachium.r3()[2]) // 后臂向下移 antebrachium.r3(oldValue + (degrees(-40) - oldValue) * v, antebrachium.r3()[1], antebrachium.r3()[2]) // 前臂向下移 claw1.r3(degrees(-20) + (degrees(-60) - degrees(-20)) * v, claw1.r3()[1], claw1.r3()[2]) // 上爪抓取 claw2.r3(degrees(-60) + (degrees(-30) - degrees(-60)) * v, claw2.r3()[1], claw2.r3()[2]) // 下爪抓取 }, finishFunc: () => { mechanicalArmAnim4() } }) }
gv.enableShadow(true, { degreeX : 0, // 投影 x 軸角度 degreeZ : -25, // 投影 z 軸角度 intensity : 0.3, // 陰影強(qiáng)度, 1 為黑色 quality : 'high', // low / medium / high / ultra / 4096數(shù)值, 質(zhì)量 type : 'soft', // none / hard / soft radius : 0.2, // type 為 hard / soft 時(shí),補(bǔ)充的邊緣厚度,用來提供更柔和的邊緣 bias : -0.003 // 深度浮點(diǎn)偏差補(bǔ)足 })
看完上述內(nèi)容,你們掌握怎么在HTML5中使用WebGL實(shí)現(xiàn)一個(gè)垃圾分類系統(tǒng)的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。