是什么
三維引擎
WebGL（Web圖形庫）是一個JavaScript API，可在任何兼容的Web瀏覽器中渲染高性能的交互式3D和2D圖形，而無需使用插件。WebGL通過引入一個與OpenGL ES 2.0非常一致的API來做到這一點，該API可以在HTML5 <canvas>元素中使用。 這種一致性使API可以利用用戶設(shè)備提供的硬件圖形加速。
目前支持 WebGL 的瀏覽器有：Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+, Internet Explorer 11+和Microsoft Edge build 10240+；然而, WebGL一些特性也需要用戶的硬件設(shè)備支持。
Three.js是 WebGL的第三方庫（Three.js是基于原生WebGL封裝運行的三維引擎，在所有WebGL引擎中，Three.js是國內(nèi)文資料最多、使用最廣泛的三維引擎。）
JavaScript 3D library
The aim of the project is to create an easy to use, lightweight, cross-browser, general purpose 3D library. The current builds only include a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available in the examples.
做什么
Web3D應用
-
物聯(lián)網(wǎng)3D可視化
http://www.yanhuangxueyuan.com/3D/liangcang/index.html
image.png -
產(chǎn)品720在線預覽
image.png -
數(shù)據(jù)可視化
image.png
4.H5/微信小游戲
跳一跳
6.機械
http://www.yanhuangxueyuan.com/3D/jixiezhuangpei/index.html
WebVR
如果你想預覽一些VR內(nèi)容，完全可以不下載一個VR相關(guān)的APP，通過threejs引擎實現(xiàn)VR內(nèi)容發(fā)布，然后用戶直接通過微信等社交方式推廣，直接打開VR內(nèi)容鏈接就可以觀看。
VR與Web3D技術(shù)結(jié)合自然就衍生出來一個新的概念WebVR，也就是基于Web實現(xiàn)的VR內(nèi)容。家裝室內(nèi)設(shè)計
http://www.yanhuangxueyuan.com/3D/houseDesign/index.html
怎么做
- 坐標系
在three.js中我們要打交道的是三維坐標系
他的坐標原點就是(0, 0, 0), 繪制一條起點為中心點的長度為1的線段可以是(0, 0, 0) (1, 0, 0)。
這里要記住,three.js里面設(shè)置的默認坐標系就是這種形式x向右, y向上, z向前。
image.png
上圖中, 觀看這個三維坐標系的目光其實是在斜上方, 正常情況下在我們開發(fā)的時候z軸是正對著我們的眼睛的, 所以你只能看到z軸是一個點。
2.相機camera
假設(shè)現(xiàn)在我們的正前方有一個三維坐標系的全息投影, 那么此時你的眼睛就相當于一架相機, 你看到的 坐標系景象取決于你站的位置。
在three.js中就有這樣一個對象, 他就是負責從哪個角度觀察我們繪制的3d世界, 也就是相機這個概念的由來。
相機分為兩種, 正投影相機和透視投影相機, 正投影相機就是你站的多遠你看到的物體的大小都不變, 透視投影相機就是物體會近大遠小。
Hello world
第一步:創(chuàng)建場景, 也就是虛擬的空間
第二步:創(chuàng)建相機（視角，近平面，遠平面-無法看見）
第三步:生成渲染實例
第四步:插入坐標系實例（輔助線）
第五步:渲染出來
// 創(chuàng)建一個場景
const scene = new THREE.Scene();
// 創(chuàng)建一個具有透視效果的相機
const camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 1000);
// 設(shè)置視點位置
camera.position.z = 10;
// camera.position.set(2, 2, 10)
// 創(chuàng)建一個 WebGL 渲染器，Three.js 還提供 <canvas>, <svg>, CSS3D 渲染器
const renderer = new THREE.WebGLRenderer();
// 設(shè)置渲染器的尺寸，顏色
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x00FFFF, .5)
// 將渲染器的輸出（此處是 canvas 元素）插入到 body 中
document.getElementById("three").appendChild(renderer.domElement);
//增加輔助線
const axisHelper = new THREE.AxisHelper(2);
scene.add(axisHelper);
//光源
const ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);
//創(chuàng)建一個幾何體
const geometry = new THREE.BoxGeometry(1, 2, 3);
//創(chuàng)建一個材質(zhì)
const material = new THREE.MeshBasicMaterial({ color: 'grey' });
// 創(chuàng)建一個網(wǎng)格：將材質(zhì)包裹在幾何體上
const cube = new THREE.Mesh(geometry, material);
//將mesh添加到場景中
scene.add(cube);
//動畫
const tween = new TWEEN.Tween(camera.position).to({
x: 10,
y: 10
}, 4000).repeat(Infinity).start()
const animate = function () {
TWEEN.update()
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
地球
// 創(chuàng)建一個場景
const scene = new THREE.Scene();
// 創(chuàng)建一個具有透視效果的攝像機
const camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 10;
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x00FFFF, .5)
document.getElementById("three").appendChild(renderer.domElement);
const AxesHelper = new THREE.AxesHelper(2);
scene.add(AxesHelper)
//光源
const ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);
//軌道控制
const os = new OrbitControls(camera, renderer.domElement);
os.target = new THREE.Vector3(0, 0, 0); //控制焦點
os.autoRotate = false; //將自動旋轉(zhuǎn)關(guān)閉
os.enablePan = false; // 不禁止鼠標平移, 可以用鍵盤來平移
os.maxDistance = 1000; // 最大外移動
os.minDistance = 100; // 向內(nèi)最小外移動
this.orbitControls = os;
// 為物體增加材質(zhì)
const loader = new THREE.TextureLoader();
loader.load(
require("../../source/images/地圖.png"),
(texture) => {
const geometry = new THREE.SphereGeometry(10, 32, 32);
const material = new THREE.MeshLambertMaterial({
map: texture
})
// 加入紋理
const mesh = new THREE.Mesh(geometry, material)
// 放入幾何
scene.add(mesh);
},
(xhr) => {
// 進度(已廢棄)
console.log(`${xhr.loaded / xhr.total * 100}%`)
},
(err) => {
// 錯誤
console.log(err)
}
)
const animate = function () {
requestAnimationFrame(animate);
renderer.render(scene, camera);
};
animate();
