three.js學習筆記（三）-camera.up屬性探索

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script>
    var scene=new THREE.Scene();
    scene.background = new 
 THREE.CubeTextureLoader()
        .setPath('skyboxCameraTest/')
        .load(['right.jpg','left.jpg','up.jpg','down.jpg','near.jpg','far.jpg']);//設定天空盒

    var camera = new THREE.PerspectiveCamera(80,window.innerWidth/window.innerHeight,1,1000);
    camera.position.set(0,0,500);
    camera.up.x=0;
    camera.up.y=0 
;
    camera.up.z=1；

    var geometry=new THREE.BoxGeometry(300,300,300);
    var texturecube=scene.background;
    var material=new THREE.MeshBasicMaterial({envMap:texturecube});
    var mesh=new THREE.Mesh(geometry,material);
    scene.add(mesh);

    var renderer=new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth,window.innerHeight);
    document.body.appendChild(renderer.domElement);
    renderer.render(scene,camera);
    function 
 render(){
        renderer.render(scene,camera);
    }

    render();
    var controls=new THREE.OrbitControls(camera);//加入相機控制
    controls.addEventListener('change',render);


    function animate(){                                          
    //貼圖（使用圖片）的3D模型需要不斷渲染才能顯示。
        requestAnimationFrame(animate);
        render();
    }
    animate();

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

通過調整整個程式中的camera.up引數，發現相機預設up軸與y軸同方向（0，1，0），up軸方向與向量（camera.up.x,camera.up.y,camera.up.z）同方向。即（1，1，0）表示相機右轉45度。（-1，1，0）左轉45度。

（0，1，0）時執行效果圖為：
這裡寫圖片描述

（1，0，0）時執行效果圖為：
這裡寫圖片描述

關於z,此程式中改變沒有什麼變化。

three.js學習筆記（三）-camera.up屬性探索

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <

vue.js學習筆記（三）--父子元件通訊總結

部落格地址：https://fisher-zh.github.io 在使用Vue的過程中，如果需要進行父子元件間的通訊，通過查閱官方文件我們可以瞭解到只需要在子元件要顯式地用 props選項宣告它期待獲得的資料，同時在其使用過程中傳入相應的資料即可，例如： Vu

d3.js學習筆記（三）餅圖示例

d3.testPies = function () { originalData = [30, 10, 43, 55, 13]; width = 1200; height = 200; radius = 240;

149.Node.js學習筆記（三）2018.12.03

1. 知識點模組系統核心模組第三方模組自己寫的模組載入規則以及載入機制迴圈載入 npm package.json Express 第三方web開發框架

d3.js學習筆記（三）餅圖示例

d3.testPies = function () { originalData = [30, 10, 43, 55, 13]; width = 1200; height = 200; radius = 2

Javascript高階程式設計學習筆記（三）—— JS中的資料型別（1）

前一段時間由於事情比較多，所以筆記耽擱了一段時間，從這一篇開始我會盡快寫完這個系列。文章中有什麼不足之處，還望各位大佬指出。 JS中的資料型別上一篇中我寫了有關JS引入的Script標籤相關的東西。那麼這一篇，我們可以正式進入JS的世界了，emmm 前面的東西應該比較基礎，大佬們不

js學習記錄（三）《js高階程式設計》讀書筆記2

今天開始讀第三章——基本概念：接下來說明了一些細節，包括語法，區分大小寫，識別符號，註釋，嚴格模式？等等。這一部分在程式設計的過程中自然會注意到。接下來是重要的內容： 3.3變數：這裡跟原來對變數的直覺理解是不一樣的。原來會把變數想象成是一個盒子，盒子

ES6學習筆記（三）：教你用js面向物件思維來實現 tab欄增刪改查功能

前兩篇文章主要介紹了類和物件、類的繼承，如果想了解更多理論請查閱《ES6學習筆記（一）：輕鬆搞懂面向物件程式設計、類和物件》、《ES6學習筆記（二）：教你玩轉類的繼承和類的物件》，今天主要來分享關於如何用js面向物件的思維來實現tab欄的一些相關的功能。要實現的功能分析點選tab欄可以切換效果點選

JAVA學習筆記（三）

byte repl efi ber 時間 clas 區分大小寫增強for size @SuppressWarnings("resource")是用來壓制資源泄露警告的。比如使用io類，最後沒有關閉。Set集合特點：1）無序，不隨機2）元素唯一3）沒下標註意：Collect

thinkphp5.0學習筆記（三）獲取信息,變量,綁定參數

名稱自動識別參數順序 query images 報錯 oca nds arc 1.構造函數：控制器類必須繼承了\think\Controller類，才能使用：方法_initialize 代碼： <?php namespace app\lian\control

最優化學習筆記（三）最速下降法

tex track enter water pos 最優 content 分享 clas 最優化學習筆記（三）最速下降法

python學習筆記（三）

list 內存寫入 odin move 列表付出 open ada 文件的操作一般分三步： 1、打開文件，獲取文件的指針（句柄） 2、通過指針（句柄）操作文件 3、關閉文件現在有以下文件：我們為愛還在學學溝通的語言

Redis學習筆記（三）常用命令整理

mes ember nbsp end 插入學習筆記頻道 hash value Redis 常用命令 1.DEL key 刪除key2.EXISTS key 檢查key是否存在3.KEYS * 查看所有的key4.EXPIRE key seconds 設置key的過期時

Django 學習筆記（三）模板導入

文件文件中訪問 from lang sts class rom 網頁本章內容是將一個html網頁放進模板中，並運行服務器將其展現出來。平臺：windows平臺下Liunx子系統目前的目錄： hello ├── manage.py ├── hello │ ├─

Git學習筆記（三）遠程庫（GitHub）協同開發，fork和忽略特殊文件

tex 情況 learn 多人版本管理獲得 logs 秘鑰多個遠程庫　　遠程庫,通俗的講就是不再本地的git倉庫！他的工作方式和我們本地的一樣，但是要使用他就需要先建立連接！　　遠程庫有兩種，一個是自己搭建的git服務器；另一種就是使用GitHub，這個網站就是

jQuery學習筆記（三）

對象 idt 命名空間 goto div hid 右鍵 func 切換 jQuery中的事件和動畫 jquery中的事件加載DOM 兩者等價但有細微區別 $(document).ready(function(){//編寫代碼}) 在DOM完全就緒時就可以被調用。

《EFFECTIVEC++》學習筆記（三）

ict lsp alq list dict baidu vsr .com 學習筆記 REDIS%E6%BA%90%E7%A0%81%E5%89%96%E6%9E%90-DICT%E9%81%8D%E5%8E%86%E7%AE%97%E6%B3%95 http://mp3.

學習筆記（三）——數據庫命令的應用

cal 名稱 nbsp ges bsp tex 密碼連接字符串集合學習筆記（三）——數據庫命令的應用一、存儲過程 (一)基本概念存儲過程就是固化SQL數據庫系統內部的SQL語句，這樣做的好處是可以提高執行效率，提高數據庫的安全性，減

Hibernate學習筆記（三） --- 映射枚舉類型

enume rto 希望 enum 類名賦值 rom cart org 對於枚舉類型，不能通過org.hibernate.annotations.Type註解來簡單的映射對應的數據庫字段類型（除非自定義類型）。對此，Hibernate提供了javax.persis

C#可擴展編程之MEF學習筆記（三）：導出類的方法和屬性（轉）

學習說了如何 mod ati dem ont num imp 前面說完了導入和導出的幾種方法，如果大家細心的話會註意到前面我們導出的都是類，那麽方法和屬性能不能導出呢？？？答案是肯定的，下面就來說下MEF是如何導出方法和屬性的。　　還是前面的代碼，第二篇中已經提供了下

three.js學習筆記（三）-camera.up屬性探索

相關推薦