亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

three.js入門練習(xí) (1)

Object / 1666人閱讀

摘要：入門本文引用需對(duì)三維圖形學(xué)有一定的認(rèn)知，掌握基礎(chǔ)了解物體場(chǎng)景相機(jī)渲染器開(kāi)始常量定義創(chuàng)建場(chǎng)景創(chuàng)建遠(yuǎn)景相機(jī)創(chuàng)建一個(gè)盒子創(chuàng)建材質(zhì)轉(zhuǎn)換成網(wǎng)孔對(duì)象的基類將物體放入場(chǎng)景內(nèi)創(chuàng)建渲染器將我們定義的場(chǎng)景和相機(jī)渲染出來(lái)如上會(huì)繪制一個(gè)正方體在頁(yè)面，我們讓他動(dòng)起來(lái)

threejs入門

本文引用https://cdn.bootcss.com/three...

需對(duì)三維圖形學(xué)有一定的認(rèn)知， 掌握javascript

基礎(chǔ)了解

物體

場(chǎng)景（scene）

相機(jī)（camera）

渲染器（rander）

開(kāi)始 
// 常量定義
const dom = document.getELementById("mycanvas");
let scene = new THREE.Scene(); // 創(chuàng)建場(chǎng)景
let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 10); // 創(chuàng)建遠(yuǎn)景相機(jī)
camera.position.z = 1;
let geometry = new THREE.BoxGeometry(0.2,0.2,0.2); // 創(chuàng)建一個(gè)盒子
let material = new THREE.MeshNormalMaterial(); // 創(chuàng)建材質(zhì)
let mesh = new THREE.Mesh(geometry, material); // 轉(zhuǎn)換成網(wǎng)孔對(duì)象的基類
scene.add(mesh); // 將物體放入場(chǎng)景內(nèi)
let renderer = new THREE.WebGLRenderer({ 
    antialias: true, 
    canvas: dom
}); // 創(chuàng)建渲染器
renderer.setClearColor(0xf3f5f9);
renderer.setSize(window.innerWidth, window.innerHeight);

renderer.render(scene, camera); // 將我們定義的場(chǎng)景和相機(jī)渲染出來(lái)

如上 會(huì)繪制一個(gè)正方體在頁(yè)面， 我們讓他動(dòng)起來(lái)

function render(){
    requestAnimationFrame(render)
    
    mesh.rotation.x += 0.01
    mesh.rotation.y += 0.01

    renderer.render(scene, camera)
}

render()

我們刷新頁(yè)面， 會(huì)看到一個(gè)多色的正方體
你可以嘗試去切換材質(zhì) 看看會(huì)發(fā)生什么

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/96557.html

相關(guān)文章

  • 【連載】前端個(gè)人文章整理-從基礎(chǔ)到入門

    摘要：個(gè)人前端文章整理從最開(kāi)始萌生寫(xiě)文章的想法，到著手開(kāi)始寫(xiě)，再到現(xiàn)在已經(jīng)一年的時(shí)間了，由于工作比較忙，更新緩慢，后面還是會(huì)繼更新，現(xiàn)將已經(jīng)寫(xiě)好的文章整理一個(gè)目錄，方便更多的小伙伴去學(xué)習(xí)。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個(gè)人前端文章整理 從最開(kāi)始萌生寫(xiě)文章的想法，到著手...

    madthumb 評(píng)論0 收藏0

  • three.js筆記——（1）入門

    摘要：入門這部分內(nèi)容的目標(biāo)是簡(jiǎn)單地介紹，我們首先講如何用來(lái)實(shí)現(xiàn)一個(gè)旋轉(zhuǎn)的立方體。具體的實(shí)例將會(huì)給出，以防你卡住或者需要幫助。透視投影照相機(jī)的構(gòu)造函數(shù)是，其中是可視角度為，通常是容器的寬高比是近斷距離，是遠(yuǎn)端距離。 入門 這部分內(nèi)容的目標(biāo)是簡(jiǎn)單地介紹three.js，我們首先講如何用three.js來(lái)實(shí)現(xiàn)一個(gè)旋轉(zhuǎn)的立方體。具體的實(shí)例將會(huì)給出，以防你卡住或者需要幫助。 在html文件中引入thr...

    ephererid 評(píng)論0 收藏0

  • WebGL入門demo

    摘要：而是一款框架，由于其易用性被廣泛應(yīng)用。如果要學(xué)習(xí)，拋棄那些復(fù)雜的原生接口從這款框架入手是一個(gè)不錯(cuò)的選擇。需要相機(jī)，演員這里是地球，場(chǎng)景，導(dǎo)演。最后拍好了戲交給渲染器來(lái)制片，發(fā)布。狀態(tài)也在不停的更新。 WebGL入門demo three.js入門 開(kāi)場(chǎng)白 哇哦，繪制氣球耶，在網(wǎng)頁(yè)上？對(duì)??！厲害了！3D效果圖也能在網(wǎng)頁(yè)上繪制出來(lái)啊，這么好玩的事情，趕緊來(lái)看看！ 這里是屬于WebGL的應(yīng)用，...

    lijinke666 評(píng)論0 收藏0

  • threejs構(gòu)建web三維視圖入門教程

    摘要：本文是一篇簡(jiǎn)單的構(gòu)建三維視圖的入門教程，你可以了解到利用創(chuàng)建簡(jiǎn)單的三維圖形，并且控制圖形運(yùn)動(dòng)。然后將其加入到中。三創(chuàng)建對(duì)象大多數(shù)時(shí)候，我們需要講繪制的圖形整合到一起進(jìn)行控制。在軸上運(yùn)動(dòng)的完整代碼這個(gè)入門教程就到這里了，感謝閱讀。 本文是一篇簡(jiǎn)單的webGL+threejs構(gòu)建web三維視圖的入門教程，你可以了解到利用threejs創(chuàng)建簡(jiǎn)單的三維圖形，并且控制圖形運(yùn)動(dòng)。若有不足，歡迎指出...

    Profeel 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Object

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<