Three.js全屏/局部渲染
本文是Three.js電子書的15.1節
通過Three.js發開Web3D應用的時候,渲染窗口可能是全屏效果佔滿web頁面整個body區域,也可能是web頁面上一個特定位置特定區域,比如渲染區域是一個特定位置、特定寬高的div元素所在區域。
全屏渲染
直接通過Three.js的WebGL渲染器WebGLRenderer的.setSize()
方法設置渲染尺寸爲瀏覽器body區域寬高度。
var width = window.innerWidth; //瀏覽器窗口寬度
var height = window.innerHeight; //瀏覽器窗口高度
// 相機參數設置
var k = width / height;
var s = 150;
//正投影相機設置
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
//透視投影相機設置
// var camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
var renderer = new THREE.WebGLRenderer();
//設置渲染區域尺寸
renderer.setSize(width, height);
// body元素中插入Threejs渲染結果:canvas對象
document.body.appendChild(renderer.domElement);
局部渲染
下面代碼實現的功能是Threejs渲染區域尺寸是300x300px,渲染結果.domElement
(Canvas元素)插入到一個div元素中。
<!-- 把Three.js渲染結果一個canvas元素插入到div中 -->
<div id="pos"></div>
<script>
// 注意相機參數設置
var width = 300; //窗口寬度
var height = 300; //窗口高度
var k = width / height; //窗口寬高比
var s = 150; //三維場景顯示範圍控制係數,係數越大,顯示的範圍越大
//正投影相機設置
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
//透視投影相機設置
// var camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
...
var renderer = new THREE.WebGLRenderer();
// 設置渲染區域尺寸,本質就是設置輸出canvas的尺寸
renderer.setSize(300, 300);
// 把渲染器的渲染結果canvas對象插入到'pos'對應的div元素中
document.getElementById('pos').appendChild(renderer.domElement);
</script>
可以通過渲染結果.domElement
(Canvas元素)的父元素div來控制渲染區域在瀏覽器上的位置。
<!-- 控制div位置 絕對定位 距離上方100px 距離左側30px -->
<div id="pos" style="position: absolute;left: 30px;top: 100px;"></div>
.domElement
屬性
Three.js渲染器WebGLRenderer
的.domElement
屬性是Three.js執行渲染方法.render()
的渲染結果,本質上就是一個HTML元素Canvas,如果你對WebGL稍微有些瞭解的話,更容易理解.domElement
屬性,如果通過原生WebGL渲染一個場景,需要手動創建一個Cnavas畫布獲得WebGL上下文,如果使用Three.js框架,Threejs系統會自動創建一個canvas對象,然後把渲染結果呈現在該Canvas畫布上。
.domElement
屬性值是一個HTML元素canvas,那麼如何使用 .domElement
屬性,就變成前端問題,你可以把.domElement
表示的canvas畫布插入到Web頁面中任何一個HTML元素中。
.setSize()
方法
Threejs渲染器的.setSize()
方法簡單解釋就是設置渲染結果的尺寸範圍,本質上就是設置.domElement
表示的canvas畫布的寬高尺寸。
相機控件OrbitControls
作用範圍
如果渲染區域變化了,不僅僅要改變WebGL渲染器相關參數,如果使用的其它擴展庫與Threejs渲染範圍有關,比如OrbitControls.js
,,也需要設置該控件的鼠標作用範圍。通過OrbitControls
創建一個相機控件對象的時候,默認情況下,在瀏覽器的窗口整個內容區域body發生鼠標事件都會旋轉、平移或縮放三維場景,如果局部渲染,注意設置構造函數THREE.OrbitControls
的參數2。
// 局部渲染設置OrbitControls空間作用範圍
var controls = new THREE.OrbitControls(camera, renderer.domElement);