做爰高潮a片〈毛片〉,尤物av天堂一区二区在线观看,一本久久A久久精品VR综合,添女人荫蒂全部过程av

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置： 首頁 - 科技 - 知識百科 - 正文

利用three.js畫一個3D立體的正方體示例代碼

來源：懂視網 責編：小采 時間：2020-11-27 22:25:33
文檔

利用three.js畫一個3D立體的正方體示例代碼

利用three.js畫一個3D立體的正方體示例代碼:簡介 three.js 是一款WebGL框架，WebGL可以讓我們在canvas上實現3D效果。實現3D效果在國內來說還算是比較新的東西，可供查閱的資料也不多。這篇文章僅是一個入門篇，介紹如何繪制一個3D正方體。 Three.js中的基本概念 Three.js包含3個基本概念：場
推薦度：
導讀利用three.js畫一個3D立體的正方體示例代碼:簡介 three.js 是一款WebGL框架，WebGL可以讓我們在canvas上實現3D效果。實現3D效果在國內來說還算是比較新的東西，可供查閱的資料也不多。這篇文章僅是一個入門篇，介紹如何繪制一個3D正方體。 Three.js中的基本概念 Three.js包含3個基本概念：場

簡介

three.js 是一款WebGL框架，WebGL可以讓我們在canvas上實現3D效果。實現3D效果在國內來說還算是比較新的東西，可供查閱的資料也不多。這篇文章僅是一個入門篇，介紹如何繪制一個3D正方體。

Three.js中的基本概念

Three.js包含3個基本概念：場景（Scene）、相機（Camera）和渲染器（Renderer）。

場景就是需要繪制的對象，相機代表取景的視角，渲染器是繪制的載體（可以掛靠到瀏覽器的DOM元素中），

也就是我們通過相機拍攝場景然后繪制到目標介質中去。

創建場景、相機和渲染器

var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); 

var renderer = new THREE.WebGLRenderer(); 
renderer.setSize( window.innerWidth, window.innerHeight ); 
document.body.appendChild( renderer.domElement );

上述代碼首先創建一個場景，然后創建一個PerspectiveCamera（立體感的相機），接著創建了一個WebGL的渲染器（注意Three.js也支持非3D的Canvas 2D的渲染器），然后掛靠為HTML文檔body的DOM子元素。

介紹完畢，首先奉上實現的效果圖：


這就是實現的效果圖，還是挺有立體感的吧？

繪制前的準備

寫代碼前，要先下載最新的three.js框架包，引入自己的頁面。

具體實現過程

準備一個canvas畫布

這個畫布是我們展現整個3D正方形的畫布，也就是上圖那個黑色的方框。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Camera 相機</title>
 <style>
 #canvas {
 width: 400px;
 height: 300px;
 border: 1px solid red;
 margin: 50px auto;
 display:block;
 }
 </style>
</head>
<body>
 <canvas id="canvas"></canvas>
 <script src="./libs/three.min.js"></script>
</body>
</html>

明確繪制思路

接下來的繪制過程會涉及到多個概念：canvas、scene、camera、renderer。

為了能更好理解繪制過程的代碼和有助于記憶，我們先來理解這幾個概念：

假設我們現在正在旅游的途中，看到了一個很唯美的畫面，想把這個3D世界記錄下來

  • 這個唯美的場景就是scene，我們用相機camera拍攝下來形成照片
  • 為了能看清楚這個照片，我們把這個照片放置在一個畫布canvas上
  • 最后，我們再用renderer修飾渲染一下

    • 這樣，我們就能成功展現這個3D世界了。

    【程序還是很貼近生活噠😊】

    通過現實世界的理解，我們接下來開始代碼啦o(￣▽￣)ブ

    準備好canvas、scene、camera、renderer，給一個初始化的方法

    <script>
var camera, scene, renderer, canvas;
init();
function init () {
 canvas = document.getElementById('canvas');
}

    接下來我們要做的就是完善這個init()方法啦。

    創建一個3D場景scene

    場景最簡單了，只需要用Scene聲明一個scene對象。

    scene = new THREE.Scene();

    準備好camera

    我們這里設置的相機是一個透視的相機PerspectiveCamera

    camera有四個參數

  • 第一個參數是視線輻射的角度，這個參數越大，我們能看到的視覺越廣，這個物體看上去會更小。
  • 第二個參數是圖像內容展示的比例：width/height。我們一般把這個比例設置為和畫布的比例一樣，這樣看到的圖片才不會變形。
  • 第三四個參數分別是相機離展示內容（正方體）最近的距離和最遠的距離。
    • camera = new THREE.PerspectiveCamera(45, 400/300, 1, 10);

    接下來給camera設置擺放的位置，并把camera放到場景scene中

    由于我們的世界是3D的，camera的擺放位置也是三維的，涉及三個參數：X軸、Y軸、Z軸。(0, 0, 0)是相機的原點，(1, 1, 5)就是把我們的相機往右和往上移動了1個單位，往后移動了5個單位。

    ps: 這個時候畫布canvas的大小正好是正方體的5倍。

    camera.position.set(1, 1, 5);
scene.add(camera);

    在場景中添加一個立方體

    每個形狀都是一個mesh，geometry可以理解為物體的骨骼， material可以理解為物體的皮囊

    再創建一個可填充的形狀cube

    這樣就構成了完整的實物

    我們再將這個形狀放入場景scene中

    CubeGeometry參數設置為1：1：1表示這是一個正方體，當然可以自行修改比例，變成不一樣的立方體

    var geometry = new THREE.CubeGeometry(1, 1, 1);
// 添加three自帶的最簡單的一種材質
var material = new THREE.MeshBasicMaterial({
 color: 0xff0000,
});
var cube = new THREE.Mesh(geometry, material); 
var cube = new THREE.Mesh(geometry, material);

    最后，創建renderer對圖像進行渲染

    將canvas交給renderer，也就是一個渲染的容器

    antialias: true 平滑，抗鋸齒，輸出的畫面會進行優化，不會帶毛邊

    renderer = new THREE.WebGLRenderer({
 canvas: canvas,
 antialias: true
});
// 設置renderer的樣式
renderer.setSize(canvas.width, canvas.height);
renderer.render(scene, camera);

    經過以上步驟，我們的的正方體就成功創建好了。


    以下是本例完整代碼：

    <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Camera 相機</title>
 <style>
 #canvas {
 width: 400px;
 height: 300px;
 border: 1px solid red;
 margin: 50px auto;
 display:block;
 }
 </style>
</head>
<body>
 <canvas id="canvas"></canvas>
 <script src="./libs/three.min.js"></script>
 <script>
 var camera, scene, renderer, canvas;
 init();
 function init () {
 canvas = document.getElementById('canvas');
 scene = new THREE.Scene();
 camera = new THREE.PerspectiveCamera(45, 400/300, 1, 10);
 camera.position.set(1, 1, 5);
 scene.add(camera);

 var geometry = new THREE.CubeGeometry(1, 1, 1);
 var material = new THREE.MeshBasicMaterial({
 color: 0xff0000,
 });
 // cube 是一個可以填充的形狀
 var cube = new THREE.Mesh(geometry, material);
 scene.add(cube);

 renderer = new THREE.WebGLRenderer({
 // 將canvas交給renderer 一個渲染的容器
 canvas: canvas,
 // 平滑， 抗鋸齒
    輸出的畫面會進行優化，不會帶毛邊 antialias: true }); // 設置renderer的樣子 renderer.setSize(canvas.width, canvas.height); renderer.render(scene, camera); } </script> </body> </html>

    總結

    聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

    文檔

    利用three.js畫一個3D立體的正方體示例代碼

    利用three.js畫一個3D立體的正方體示例代碼:簡介 three.js 是一款WebGL框架，WebGL可以讓我們在canvas上實現3D效果。實現3D效果在國內來說還算是比較新的東西，可供查閱的資料也不多。這篇文章僅是一個入門篇，介紹如何繪制一個3D正方體。 Three.js中的基本概念 Three.js包含3個基本概念：場
    推薦度：
    標簽： 代碼 立體 繪制
    • 熱門焦點

    最新推薦

    猜你喜歡

    熱門推薦

    專題
    Top
    主站蜘蛛池模板： 威海市| 元朗区| 教育| 长武县| 比如县| 湟源县| 胶南市| 拉萨市| 芦山县| 永川市| 开江县| 筠连县| 商南县| 牟定县| 英德市| 大新县| 运城市| 正镶白旗| 故城县| 视频| 江川县| 宾阳县| 嘉兴市| 新巴尔虎右旗| 阿城市| 鱼台县| 桐乡市| 通海县| 泗水县| 林西县| 英超| 依兰县| 屯昌县| 太保市| 深水埗区| 洪湖市| 河北区| 邛崃市| 新巴尔虎右旗| 长子县| 饶阳县|