three.js入門練習 (1)

Object 發布于2019-08-23 10:39 / 1613人閱讀

摘要：入門本文引用需對三維圖形學有一定的認知，掌握基礎了解物體場景相機渲染器開始常量定義創建場景創建遠景相機創建一個盒子創建材質轉換成網孔對象的基類將物體放入場景內創建渲染器將我們定義的場景和相機渲染出來如上會繪制一個正方體在頁面，我們讓他動起來

threejs入門

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

需對三維圖形學有一定的認知，掌握javascript

基礎了解

物體

場景（scene）

相機（camera）

渲染器（rander）

開始

// 常量定義
const dom = document.getELementById("mycanvas");
let scene = new THREE.Scene(); // 創建場景
let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 10); // 創建遠景相機
camera.position.z = 1;
let geometry = new THREE.BoxGeometry(0.2,0.2,0.2); // 創建一個盒子
let material = new THREE.MeshNormalMaterial(); // 創建材質
let mesh = new THREE.Mesh(geometry, material); // 轉換成網孔對象的基類
scene.add(mesh); // 將物體放入場景內
let renderer = new THREE.WebGLRenderer({ 
    antialias: true, 
    canvas: dom
}); // 創建渲染器
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()

我們刷新頁面，會看到一個多色的正方體
你可以嘗試去切換材質看看會發生什么

GPU云服務器云服務器 three.js three.js極客 three.js教程 three.js cdn

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

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

【連載】前端個人文章整理-從基礎到入門

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

madthumb 2019-08-23 14:15 評論0 收藏0
three.js筆記——（1）入門

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

ephererid 2019-08-20 14:36 評論0 收藏0
WebGL入門demo

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

lijinke666 2019-08-21 11:52 評論0 收藏0
threejs構建web三維視圖入門教程

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

Profeel 2019-08-21 10:43 評論0 收藏0