準(zhǔn)備工作
-
three.js庫
https://threejs.org/build/three.js
(ctrl+s保存后引入) -
main.js
空文件，邏輯在這里實現(xiàn) - demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Three.js基礎(chǔ)入門</title>
<style>
body { margin: 0;}
</style>
</head>
<body>
<canvas id="canvas-wrap"></canvas>
</body>
<script src="js/three.js"></script>
<script src="js/main.js"></script>
</html>
1.畫布
// 獲取畫布對象
var oCanvas = document.getElementById('canvas-wrap');
// 定義畫布的寬
var c_width = 500;
// 定義畫布的高
var c_height = 500;
2.創(chuàng)建場景、相機(jī)、渲染器
//場景：scene
var scene = new THREE.Scene();
//相機(jī)：camera
var camera = new THREE.PerspectiveCamera(
75, c_width/c_height, 0.1, 1000);
//設(shè)置相機(jī)z軸位置,(正值z軸往屏幕外)
camera.position.z = 4;
//渲染器：renderer
var renderer = new THREE.WebGLRenderer({
canvas: oCanvas
});
//設(shè)置渲染器、畫布的寬高
renderer.setSize(c_width, c_height);
3.創(chuàng)建3D立方體
//geometry幾何
var geometry = new THREE.BoxGeometry(1, 1, 1);
//material材質(zhì)、材料
var material = new THREE.MeshBasicMaterial({color: 0xffffff});
//立方體cube
var cube = new THREE.Mesh(geometry, material);
- 顏色0x+顏色值ffffff(16進(jìn)制)白色
-
mesh意思是匹配
定義好幾何形狀構(gòu)造geometry 和 要使用的材料material 后，將兩者傳入THREE.Mesh()方法中進(jìn)行匹配、結(jié)合后，便可組成一個cube立方體對象，這時一個立方體就繪制完成。
4.將3D立方體對象添加到場景中，然后進(jìn)行渲染
//將創(chuàng)建好的立方體cube添加到場景中
scene.add(cube);
//渲染場景和相機(jī)
renderer.render(scene, camera);
創(chuàng)建成功后效果:
cube.png
總結(jié)
理解：
假設(shè)我們到一個沙灘上拍海鷗，
那么沙灘便是我們的場景scene
而拍照則需要用到相機(jī)camera
我們將相機(jī)打開，擺放到能排到海鷗的位置（設(shè)置camera坐標(biāo)）
接著我們要設(shè)置相機(jī)的是如何進(jìn)行畫面渲染的，假設(shè)它里面有個渲染器renderer，
渲染器需要設(shè)置參數(shù)和大?。ㄟ@樣才能確定拍出來的照片有多大）
然后海鷗Cube便是我們要拍進(jìn)去的對象，
而海鷗的本質(zhì)形狀構(gòu)造是geometry，內(nèi)在本質(zhì)便是材料material
有了形狀和材料，我們就可以用合成器THREE.Mesh()將其放入，合成一個完整的海鷗
我們將海鷗放入我們拍攝的場景里，
打開相機(jī)開始拍照，便完成了拍攝任務(wù)。
而我們?nèi)搜劭聪鄼C(jī)所看到的便是瀏覽器所呈現(xiàn)給我們的，照片底膠便可以理解為canvas畫布。
知識拓展
場景scene: http://www.itdecent.cn/p/4ccbcf839b7f
相機(jī)camera：待更
渲染器renderer：待更
幾何體geometry：待更
材料material：待更
以下是源代碼
- main.js
// 獲取畫布對象
var oCanvas = document.getElementById('canvas-wrap');
// 定義畫布的寬
var c_width = 500;
// 定義畫布的高
var c_height = 500;
//場景：scene
var scene = new THREE.Scene();
//相機(jī)：camera
var camera = new THREE.PerspectiveCamera(
75, c_width/c_height, 0.1, 1000);
//設(shè)置相機(jī)z軸位置
camera.position.z = 4;
//渲染器：renderer
var renderer = new THREE.WebGLRenderer({
canvas: oCanvas
});
//設(shè)置渲染器、畫布的寬高
renderer.setSize(c_width, c_height);
//geometry幾何
var geometry = new THREE.BoxGeometry(1, 1, 1);
//material材質(zhì)、材料
var material = new THREE.MeshBasicMaterial({color: 0xffffff});
//立方體cube
var cube = new THREE.Mesh(geometry, material);
//將創(chuàng)建好的立方體cube添加到場景中
scene.add(cube);
//渲染場景和相機(jī)
renderer.render(scene, camera);
因為立方體和相機(jī)處在正對位置上，所以我們看不到立方體的其他面
為了方便看清，這里做如下修改
//將立方體的材料改為Normal
var material = new THREE.MeshNormalMaterial({});
//...
//添加輔助坐標(biāo)系
var axesHelper = new THREE.AxesHelper(4);
scene.add(axesHelper);
//這里為了方便查看，坐標(biāo)系和立方體的位置設(shè)置相同
cube.position.x = axesHelper.position.x = -1;
cube.position.y = axesHelper.position.y = -1;
修改后cube.png
- 源代碼： main.js
// 獲取畫布對象
var oCanvas = document.getElementById('canvas-wrap');
// 定義畫布的寬
var c_width = 500;
// 定義畫布的高
var c_height = 500;
//場景：scene
var scene = new THREE.Scene();
//相機(jī)：camera
var camera = new THREE.PerspectiveCamera(
75, c_width/c_height, 0.1, 1000);
//設(shè)置相機(jī)z軸位置
camera.position.z = 4;
//渲染器：renderer
var renderer = new THREE.WebGLRenderer({
canvas: oCanvas
});
//設(shè)置渲染器、畫布的寬高
renderer.setSize(c_width, c_height);
//geometry幾何
var geometry = new THREE.BoxGeometry(1, 1, 1);
//material材質(zhì)、材料
// var material = new THREE.MeshBasicMaterial({color: 0xffffff});
var material = new THREE.MeshNormalMaterial({});
//立方體cube
var cube = new THREE.Mesh(geometry, material);
// 輔助坐標(biāo)系
var axesHelper = new THREE.AxesHelper(500);
scene.add(axesHelper);
// 設(shè)置立方體、輔助坐標(biāo)系位置
cube.position.x = axesHelper.position.x = -1;
cube.position.y = axesHelper.position.y = -1;
//將創(chuàng)建好的立方體cube添加到場景中
scene.add(cube);
//渲染場景和相機(jī)
renderer.render(scene, camera);
