資訊專欄INFORMATION COLUMN
摘要：入門本文引用需對三維圖形學(xué)有一定的認知，掌握基礎(chǔ)了解物體場景相機渲染器開始常量定義創(chuàng)建場景創(chuàng)建遠景相機創(chuàng)建一個盒子創(chuàng)建材質(zhì)轉(zhuǎn)換成網(wǎng)孔對象的基類將物體放入場景內(nèi)創(chuàng)建渲染器將我們定義的場景和相機渲染出來如上會繪制一個正方體在頁面，我們讓他動起來
threejs入門
本文引用https://cdn.bootcss.com/three...
需對三維圖形學(xué)有一定的認知， 掌握javascript
基礎(chǔ)了解物體
場景（scene）
相機（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)建遠景相機
camera.position.z = 1;
let geometry = new THREE.BoxGeometry(0.2,0.2,0.2); // 創(chuàng)建一個盒子
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); // 將我們定義的場景和相機渲染出來
如上 會繪制一個正方體在頁面， 我們讓他動起來
function render(){
requestAnimationFrame(render)
mesh.rotation.x += 0.01
mesh.rotation.y += 0.01
renderer.render(scene, camera)
}
render()
我們刷新頁面， 會看到一個多色的正方體
你可以嘗試去切換材質(zhì) 看看會發(fā)生什么
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/96557.html
摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現(xiàn)在已經(jīng)一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現(xiàn)將已經(jīng)寫好的文章整理一個目錄，方便更多的小伙伴去學(xué)習(xí)。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理 從最開始萌生寫文章的想法，到著手...
摘要：入門這部分內(nèi)容的目標是簡單地介紹，我們首先講如何用來實現(xiàn)一個旋轉(zhuǎn)的立方體。具體的實例將會給出，以防你卡住或者需要幫助。透視投影照相機的構(gòu)造函數(shù)是，其中是可視角度為，通常是容器的寬高比是近斷距離，是遠端距離。 入門 這部分內(nèi)容的目標是簡單地介紹three.js，我們首先講如何用three.js來實現(xiàn)一個旋轉(zhuǎn)的立方體。具體的實例將會給出，以防你卡住或者需要幫助。 在html文件中引入thr...
摘要：而是一款框架，由于其易用性被廣泛應(yīng)用。如果要學(xué)習(xí)，拋棄那些復(fù)雜的原生接口從這款框架入手是一個不錯的選擇。需要相機，演員這里是地球，場景，導(dǎo)演。最后拍好了戲交給渲染器來制片，發(fā)布。狀態(tài)也在不停的更新。 WebGL入門demo three.js入門 開場白 哇哦，繪制氣球耶，在網(wǎng)頁上？對??！厲害了！3D效果圖也能在網(wǎng)頁上繪制出來啊，這么好玩的事情，趕緊來看看！ 這里是屬于WebGL的應(yīng)用，...
摘要：本文是一篇簡單的構(gòu)建三維視圖的入門教程，你可以了解到利用創(chuàng)建簡單的三維圖形，并且控制圖形運動。然后將其加入到中。三創(chuàng)建對象大多數(shù)時候，我們需要講繪制的圖形整合到一起進行控制。在軸上運動的完整代碼這個入門教程就到這里了，感謝閱讀。 本文是一篇簡單的webGL+threejs構(gòu)建web三維視圖的入門教程，你可以了解到利用threejs創(chuàng)建簡單的三維圖形，并且控制圖形運動。若有不足，歡迎指出...
閱讀 1814·2021-11-25 09:43
閱讀 2740·2019-08-30 15:53
閱讀 1881·2019-08-30 15:52
閱讀 2971·2019-08-29 13:56
閱讀 3383·2019-08-26 12:12
閱讀 630·2019-08-23 17:58
閱讀 2212·2019-08-23 16:59
閱讀 1019·2019-08-23 16:21
