Threejs介紹
threejs 最早是 Ricardo Cabello(一個西班牙小伙) 在 GitHub上發(fā)布的一個基于webgl的3D圖形庫朱庆。
當然,除了Threejs還有其他類似3D圖形庫比如:
threejs帶來了什么？
3D繪圖通常來說是比較復雜帶工作襟铭，用到glsl到很多知識，用js直接調(diào)用操作牲平，非常復雜且低效皂贩，
這個時候 threejs出現(xiàn)了，使用threejs封裝好到功能自沧，可以很方便快速到創(chuàng)造一些簡單到場景坟奥。
下面我們就來試著寫第一個hello world!
準備工作
新建空白 html 頁面树瞭，引入 three.js，及頁面元素準備爱谁。
<html>
<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>Hello world</title>
<script type="text/javascript" src="js/three.js"></script>
</head>
<body>
<canvas id="mainCanvas"></canvas>
<script type="text/javascript">
// ...code
</script>
</body>
</html>
基本概念介紹
一個典型的Three.js程序至少要包括:
- 渲染器（Renderer）—— 渲染器將和Canvas元素進行綁定
- 場景（Scene）—— 我們創(chuàng)建的物體都添加到場景中晒喷，相當于一個大容器
- 照相機（Camera）—— 這里相當于一個透視投影的三維坐標系
- 在場景中創(chuàng)建的物體
創(chuàng)建一個形狀的代碼如下：
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('mainCanvas')
});
renderer.setClearColor(0x000000); // black
// 創(chuàng)建場景
var scene = new THREE.Scene();
// 創(chuàng)建相機
var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
camera.position.set(0, 0, 5);
scene.add(camera); // 記得把相機添加到場景
// 創(chuàng)建一個長方形
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
new THREE.MeshBasicMaterial({
color: 0xff0000
})
);
scene.add(cube);
// 渲染器最終渲染
renderer.render(scene, camera);
現(xiàn)實中會有光源照射物體，產(chǎn)生光影效果访敌，這里也可以添加 light凉敲。
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('mainCanvas')
});
renderer.setClearColor(0xffcc00);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
// scene
var scene = new THREE.Scene();
// 添加環(huán)境光
var light = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(light);
// 添加點光源
var light2 = new THREE.PointLight(0xffffff, 0.7);
scene.add(light2);
// camera
var camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 3000);
// camera.position.set(0, 0, 5);
var geometry = new THREE.CubeGeometry(200, 200, 200);
// var material = new THREE.MeshBasicMaterial();
var material = new THREE.MeshLambertMaterial({color: 0xffffee});
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, -1000);
scene.add(mesh);
//
requestAnimationFrame(render)
function render() {
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
// render
renderer.render(scene, camera);
requestAnimationFrame(render)
}
總結(jié)
Threejs開發(fā)過程初步可歸納為
1、設(shè)置照相機 camera = new THREE.Camera(); 用于觀察物體
2寺旺、設(shè)置場景 scene = new THREE.Scene() 用于承載物體
3爷抓、建立物體 geometry = new THREE.CubeGeometry(200, 200, 200);
4、創(chuàng)建網(wǎng)格 mesh = new THREE.Mesh(geometry, material)
5阻塑、渲染呈現(xiàn) renderer.render(scene, camera)
當然還有燈光蓝撇、動畫、材質(zhì)叮姑、控制場景內(nèi)物體等其他內(nèi)容唉地，在此不贅述，后續(xù)逐步學習传透。
以上耘沼，如果使用過flash或者maya等軟件等話，相信對以上場景朱盐、相機群嗤、渲染、燈光等會比較容易理解兵琳。
在這里可以聯(lián)想為在3D軟件里創(chuàng)建一個物體狂秘，當然軟件所有操作及效果是需要我們用代碼來實現(xiàn)。
