成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Object / 1616人閱讀

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

threejs入門

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

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

基礎(chǔ)了解

物體

場景（scene）

相機(jī)（camera）

渲染器（rander）

開始 
// 常量定義
const dom = document.getELementById("mycanvas");
let scene = new THREE.Scene(); // 創(chuà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)孔對象的基類
scene.add(mesh); // 將物體放入場景內(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); // 將我們定義的場景和相機(jī)渲染出來

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

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

    renderer.render(scene, camera)
}

render()

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96557.html

相關(guān)文章

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

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

    madthumb 評論0 收藏0

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

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

    ephererid 評論0 收藏0

  • WebGL入門demo

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

    lijinke666 評論0 收藏0

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

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

    Profeel 評論0 收藏0

發(fā)表評論

0條評論

Object

男|高級講師

TA的文章

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