THREE.js為正方體的6個面貼上圖片

阿新 • • 發佈：2019-02-19

效果圖

這裡寫圖片描述

程式碼

<!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>three</title>
</head> 

<body>


<script src="../learning-threejs-master/libs/three.js"></script>
<script src="../learning-threejs-master/libs/OrbitControls.js"></script>

<script>
    //建立一個renderer , 
    var renderer = new THREE.WebGLRenderer({antialias:true});
    //設定清空顏色，每秒會渲染60次，渲染的時候會使用此顏色先清空 

    renderer.setClearColor( new THREE.Color(0xEEEEEE, 1.0) );
    //設定渲染尺寸
    renderer.setSize( window.innerWidth , window.innerHeight );
    //設定陰影允許
    renderer.shadowMapEnabled = true;
    //將webgl元素新增到body中
    document.body.appendChild( renderer.domElement );


    //建立場景
    var scene = new THREE.Scene();

    //建立一個透視相機，45是相機的視角  ， 寬高比是螢幕的寬高比 ， 最近能看到0.1 ， 最遠能看到10000 

    var camera = new THREE.PerspectiveCamera(45 , window.innerWidth/window.innerHeight , 0.1 , 10000 );
    //將相機放到x:1000 , y:1000 , z:1000的位置
    camera.position.set( 1000 , 1000 , 1000 );
    //設定相機的朝向，可以認為與相機鏡頭垂直的軸線應該和哪一個軸相交
    camera.up.set( 0 , 1 , 0 );
    //將相機的鏡頭對準x:0 , y:0 , z:0的位置 經過這個設定相機就被固定住了
    camera.lookAt({x:0,y:0,z:0});
    //將相機新增到場景中
    scene.add( camera );

    //建立一個自然光，自然光無處不在
    var light1 = new THREE.AmbientLight(0xffffff);
    //設定燈光的位置
    light1.position.set( 1000 , 1000 , 1000 );
    //將燈光加入場景
    scene.add( light1 );


//建立一個長寬高600的立方體
var geometry = new THREE.CubeGeometry( 600 , 600 , 600 );

//建立一個phone材質並且用圖片作為紋理
var material = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('./texture-atlas.jpg') } );



var bricks = [ 
    new THREE.Vector2(0, .666) , 
    new THREE.Vector2(.5, .666), 
    new THREE.Vector2(.5, 1), 
    new THREE.Vector2(0, 1)
];

var clouds = [
    new THREE.Vector2(.5, .666), 
    new THREE.Vector2(1, .666), 
    new THREE.Vector2(1, 1), 
    new THREE.Vector2(.5, 1)
];

var crate  = [
    new THREE.Vector2(0, .333), 
    new THREE.Vector2(.5, .333), 
    new THREE.Vector2(.5, .666), 
    new THREE.Vector2(0, .666)
];

var stone  = [
    new THREE.Vector2(.5, .333), 
    new THREE.Vector2(1, .333), 
    new THREE.Vector2(1, .666), 
    new THREE.Vector2(.5, .666)
];

var water  = [
    new THREE.Vector2(0, 0), 
    new THREE.Vector2(.5, 0), 
    new THREE.Vector2(.5, .333), 
    new THREE.Vector2(0, .333)
];

var wood   = [
    new THREE.Vector2(.5, 0), 
    new THREE.Vector2(1, 0), 
    new THREE.Vector2(1, .333), 
    new THREE.Vector2(.5, .333)
];


// 清除現有的UV對映，geometry物件的faceVertexUvs屬性包含該geometry各個面的座標對映。
geometry.faceVertexUvs[0] = [];

// 立方體的每個面實際上是由2個三角形組成的。所以我們必須單獨對映每個三角形
// 個面的頂點座標的定義順序必須遵循逆時針方向。為了對映底部三角形，我們需要使用的頂點指數0，1和3，
// 而要對映頂部三角形，我們需要使用索引1，2，和頂點的3。
geometry.faceVertexUvs[0][0] = [ bricks[0], bricks[1], bricks[3] ];
geometry.faceVertexUvs[0][1] = [ bricks[1], bricks[2], bricks[3] ];

geometry.faceVertexUvs[0][2] = [ clouds[0], clouds[1], clouds[3] ];
geometry.faceVertexUvs[0][3] = [ clouds[1], clouds[2], clouds[3] ];

geometry.faceVertexUvs[0][4] = [ crate[0], crate[1], crate[3] ];
geometry.faceVertexUvs[0][5] = [ crate[1], crate[2], crate[3] ];

geometry.faceVertexUvs[0][6] = [ stone[0], stone[1], stone[3] ];
geometry.faceVertexUvs[0][7] = [ stone[1], stone[2], stone[3] ];

geometry.faceVertexUvs[0][8] = [ water[0], water[1], water[3] ];
geometry.faceVertexUvs[0][9] = [ water[1], water[2], water[3] ];

geometry.faceVertexUvs[0][10] = [ wood[0], wood[1], wood[3] ];
geometry.faceVertexUvs[0][11] = [ wood[1], wood[2], wood[3] ];

mesh = new THREE.Mesh(geometry,  material);

scene.add( mesh );


    var orbitCtl = new THREE.OrbitControls( camera );
    orbitCtl.autoRotate = false ;


    var clock = new THREE.Clock();

    function threeStart(){
        var delta = clock.getDelta();
        orbitCtl.update( delta );


        renderer.clear();
        renderer.render( scene , camera );
        requestAnimationFrame( threeStart );
    };

    threeStart();


</script>
</body>
</html>

註釋

這裡寫圖片描述

//此程式碼所描述的就是上圖中坐上角的那個圖，座標系的原點是左下角，（0 , 0.666）表示的是x軸是0y軸是距離原點2/3的地方
//（0.5 , 0.666）表示x軸是0.5 y軸是距離原點2/3的地方，也就是上圖中左上那個圖的右下方那個點，紋理座標是逆時針
var bricks = [
  new THREE.Vector2(0, .666),
  new THREE.Vector2(.5, .666),
  new THREE.Vector2(.5, 1),
  new THREE.Vector2(0, 1)
];

geometry物件的faceVertexUvs屬性包含該geometry各個面的座標對映。既然我們對映到一個多維資料集，你可能會疑惑為什麼陣列中有12個面。原因是在ThreeJS模型中，立方體的每個面實際上是由2個三角形組成的。所以我們必須單獨對映每個三角形。上述場景中，ThreeJS將為我們載入單一材料貼圖，自動分拆成三角形並對映到每個面。

這裡要注意每個面的頂點座標的定義順序必須遵循逆時針方向。為了對映底部三角形，我們需要使用的頂點指數0，1和3，而要對映頂部三角形，我們需要使用索引1，2，和頂點的3。
這裡寫圖片描述

geometry.faceVertexUvs[0] = [];  //清除現有的UV對映

//重新設定UV對映
geometry.faceVertexUvs[0][0] = [ bricks[0], bricks[1], bricks[3] ];
geometry.faceVertexUvs[0][1] = [ bricks[1], bricks[2], bricks[3] ];

geometry.faceVertexUvs[0][2] = [ clouds[0], clouds[1], clouds[3] ];
geometry.faceVertexUvs[0][3] = [ clouds[1], clouds[2], clouds[3] ];

geometry.faceVertexUvs[0][4] = [ crate[0], crate[1], crate[3] ];
geometry.faceVertexUvs[0][5] = [ crate[1], crate[2], crate[3] ];

geometry.faceVertexUvs[0][6] = [ stone[0], stone[1], stone[3] ];
geometry.faceVertexUvs[0][7] = [ stone[1], stone[2], stone[3] ];

geometry.faceVertexUvs[0][8] = [ water[0], water[1], water[3] ];
geometry.faceVertexUvs[0][9] = [ water[1], water[2], water[3] ];

geometry.faceVertexUvs[0][10] = [ wood[0], wood[1], wood[3] ];
geometry.faceVertexUvs[0][11] = [ wood[1], wood[2], wood[3] ];

THREE.js為正方體的6個面貼上圖片

效果圖程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie

three.js入門——先跑個旋轉的正方體

WebGl中文網看了幾篇教程，又百度了幾篇文章，頓時感覺手癢，開啟編輯器，寫個demo玩玩。 demo是寫在vue專案中的，所以首先： npm install three --save; npm install tween --save; 安裝依賴包（目前階段tween用不上，但是先一起

WebGL three.js學習筆記 6種類型的紋理介紹及應用

透視投影 qdt 高度我們幾何區別 set 亮度 cubemap WebGL three.js學習筆記 6種類型的紋理介紹及應用本文所使用到的demo演示：高光貼圖Demo演示反光效果Demo演示（因為是加載的模型，所以速度會慢）（一）普通紋理計算機圖形學中

74 - three.js 筆記 - 通過透明渲染設定背景圖片

1、示例示例 http://ithanmang.com/threeJs/home/201809/20180910/01-canvas-background-image.html 效果 2、實現步驟 2.1、背景圖 2.2、設定背景此處是給body元素設定了背景

長度最多為6個漢字或12個字母數字JS驗證

<!DOCTYPE html><html> <head> <title>長度最多為6個漢字或12個字母數字</title> <script type="text/javascript" src="h

8個節點，每個節點上布置6個ROS，組裝都用250，讀出都用251,事例率為645.3Hz

所在 ros mage images alt 黃色節點網段 cnblogs 組裝都用250網段，讀出都用251網段。除了黃色部分以外的節點都是cmm03節點。平均事例率為：645.26Hz, ros所在節點的cpu idle 為17%。 8個節點，每個節點上

用three.js制作一個旋轉的正方體

() end ont 幾何體 style ctype 分別是 document camera <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

01-THREE.JS第一個場景

添加 width ear scene mode lan oot itl set THREE.JS第一個場景 <!DOCTYPE html> <html> <head> <meta charset="UTF-

three.js實現螢幕座標轉化為模型的世界座標

three.js實現螢幕座標轉化為模型的世界座標基礎：three.js中座標系統.doc 方法.project 通過Vector3物件的方法project，方法的引數是相機物件，語句worldVector.project(camera)

three.js 合併多個模型

方法一：THREE.Geometry.merge()合併多個模型為一個關鍵點：通過THREE.Geometry.merge()函式，你可以將多個幾何體合併起來建立一個聯合體參考部落格：63 Three.js 將多個網格合併成一個網格

three.js 多面幾何體進行多面貼圖 (貼圖後需要再次渲染才能顯現出來）

let materials = []; for (var i = 0; i < 6; ++i) { materials.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('../

stof()、atoi()、atol()、strtod()、strtol()、strtoul() 共6個可以將字串轉換為數字的函式

標頭檔案：#include <stdlib.h> atoi() 函式用來將字串轉換成整數(int)，其原型為： int atoi (const char * str); 【函式說明】atoi() 函式會掃描引數 str 字串，跳過前面的空白字元（例如空格，tab縮排等，可以通過

關於js物件中兩個函式互相呼叫，其中一個為定時器宣告，定時器迴圈報錯問題（記錄一次嘗試新寫法的報錯經歷）附帶無縫輪播圖程式碼

先上之前的錯誤程式碼吧，注意計時器這個方法（是想把之前寫的的輪播圖演示重構一下） var obj = { sleepTime: 2000,//輪播延時 cont: 0,//第幾張 origin: document.getElementsByClassName('main-

JS為變速移動新增任意多個屬性值包括回撥函式

//封裝新增任意多個屬性的函式 //fn這個引數是為這個函式新增的回撥函式 function changeAll(ele,json,fn){ //每次都清除一次定時器 clearInterval(ele.timed); //設定定時器 ele.timed=se

three.js 一幅圖片多個精靈

https://blog.csdn.net/zhulx_sz/article/details/79105359 核心程式碼 // 把一幅外部圖片中包含的5種精靈存入一個精靈材質陣列 var spriteMaterials = []; var loader = new THREE.TextureLoader

three.js入門系列之旋轉的圓臺、球體、正方體

先來張圖：一、調整機位和輔助線由上述程式碼可知，現在的機位是三維座標軸上的點（2,2,2），方框的那一句很重要，有了這一句，你將獲得上帝視角！！！接下來新增輔助線（立體空間三軸）：這樣就添加了一個軸輔助線，由於我們是站在（2,2,2），所以看到的輔助線是這樣的：這是一個標

node.js 6個常用核心模組介紹

一、HTTP模組作用：處理網路客戶端的請求二、URL模組作用：處理客戶端請求過來的url 三、Query Strings模組作用：處理客戶端通過get/post請求傳遞過來的引數四、File System模組作用：在服務端操作檔案,可能是需要將瀏

THREE.JS第二個框架

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Three框架</title>

在程式設計競賽中，有6個評委為參賽選手打分，分數為0-100的整數分。選手的最後得分為：去掉一個最高分和一個最低分的4個評委平均值 * 請寫程式碼實現（不考慮小數部分）

import java.util.Scanner; /* * 需求：在程式設計競賽中，有6個評委為參賽選手打分，分數為0-100的整數分。 * 選手的最後得分為：去掉一個最高分和一個最低分的4個評委平均值 * 請寫程式碼實現（不考慮小數部分） * *

EditText 限制輸入為中文，個數為6個

et_real_name.setFilters(new InputFilter[]{new InputChineseFilter(6)});  class InputChineseFilter implements InputFilter { private final

THREE.js為正方體的6個面貼上圖片

效果圖

程式碼

註釋

相關推薦