學習資料
1，webGL中文網：http://www.hewebgl.com/article/articledir/1
2 郭隆邦博客：http://www.yanhuangxueyuan.com/WebGL_course.html
3，模型學習
https://threejs.org/examples/#webgl_animation_keyframes，有許多的模型並有代碼
最新的代碼three，下載方法如下
cnpm install three ，不要通過npm下載，
舊版本的three也能用但 當你先使用 OrbitControls去做控制相機時就會報各種 未定義和未找到的錯誤。所以版本一定要使用最新的。
首先，先說一下自己的學習資料來源吧，最開始我是在
http://www.hewebgl.com/article/articledir/1 webGL中文網學完了基礎資料，只裏面你一定要記住，重點在理論基礎和簡單的使用。它的一個坑是 所使用的three.js本版太低了。
在這一個webGL中，通過學習你就可以瞭解最基本的webGL中構建3D模型的幾個關鍵點，
3大組件，場景（scene）,相機（camera）,渲染器（renderer）,
引用webGL中文網中基礎教程中的 場景，相機，渲染器之間的關係，如圖
首先我們需要將我們的材料放入場景中，在通過相機將其放入到渲染器中也就是瀏覽器中。
對於着三者基礎代碼如下
//初始化場景
function initScene() {
scene = new THREE.Scene()
}
//初始化相機
function initCamera() {
//透視相機
//PerspectiveCamera( fov, aspect, near, far )視角，縱橫比，近，遠
//正投影
//OrthographicCamera( left, right, top, bottom, near, far )
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.x = 600;
camera.position.y = 500;
camera.position.z = 600;
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
camera.lookAt(0, 0, 0);
}
//初始化渲染器
function initRenderer() {
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);//渲染大小
document.body.appendChild( renderer.domElement );
renderer.setClearColor(0xFFFFFF, 1.0);//渲染背景顏色
}
除了這三者之外還有，光線和物體如下
//初始化光線
function initLight() {
//環境光
light = new THREE.AmbientLight(0x00ff00);
scene.add(light);
//方向光
light = new THREE.DirectionalLight(0xff0000, 1);
light.position.set(0, -150, 500)
scene.add(light)
//點光源
// light = new THREE.PointLight(0xFF0000);
// light.position.set(0, 0, 25);
// scene.add(light);
}
//構建物體
function initObject() {
let geometry = new THREE.BoxGeometry(150, 150, 150);//構建一個正方體
let material = new THREE.MeshLambertMaterial({color: 0xffffff});//材質
mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0)
scene.add(mesh)
}
在場景中添加到物體和光線，這樣就可以產生陰影之類的。
最簡單的構建的一個3D 模型的完整代碼是
代碼是，這個裏面使用的是最新的 three和OrbitControls，這個裏面添加了鼠標控制攝像機進行轉動 添加了動畫。代碼都可以通過 cnpm install three來下載 js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webgl入門</title>
<script src="./build/three.js" type="text/javascript"></script>
<script src="./examples/js/controls/OrbitControls.js"></script>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body onload="main();">
<script>
let scene, camera, renderer, light, mesh,controls
//初始化渲染器
function initRenderer() {
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);//渲染大小
document.body.appendChild( renderer.domElement );
renderer.setClearColor(0xFFFFFF, 1.0);//渲染背景顏色
}
//初始化相機
function initCamera() {
//透視相機
//PerspectiveCamera( fov, aspect, near, far )視角，縱橫比，近，遠
//正投影
//OrthographicCamera( left, right, top, bottom, near, far )
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000)
camera.position.x = 600;
camera.position.y = 500;
camera.position.z = 600;
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
camera.lookAt(0, 0, 0);
}
//初始化場景
function initScene() {
scene = new THREE.Scene()
}
//初始化光線
function initLight() {
//環境光
light = new THREE.AmbientLight(0x00ff00);
scene.add(light);
//方向光
light = new THREE.DirectionalLight(0xff0000, 1);
light.position.set(0, -150, 500)
scene.add(light)
//點光源
// light = new THREE.PointLight(0xFF0000);
// light.position.set(0, 0, 25);
// scene.add(light);
}
//構建物體
function initObject() {
let geometry = new THREE.BoxGeometry(150, 150, 150);//構建一個正方體
let material = new THREE.MeshLambertMaterial({color: 0xffffff});//材質
mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0)
scene.add(mesh)
}
//用戶交互插件 鼠標左鍵按住旋轉，右鍵按住平移，滾輪縮放
function initControls() {
controls = new THREE.OrbitControls( camera, renderer.domElement );
// 如果使用animate方法時，將此函數刪除
//controls.addEventListener( 'change', render );
// 使動畫循環使用時阻尼或自轉 意思是否有慣性
controls.enableDamping = true;
//動態阻尼係數 就是鼠標拖拽旋轉靈敏度
//controls.dampingFactor = 0.25;
//是否可以縮放
controls.enableZoom = true;
//是否自動旋轉
controls.autoRotate = true;
//設置相機距離原點的最遠距離
controls.minDistance = 200;
//設置相機距離原點的最遠距離
controls.maxDistance = 600;
//是否開啓右鍵拖拽
controls.enablePan = true;
}
function animate() {
// mesh.rotation.x += 0.01;
// mesh.rotation.y += 0.01;
//更新控制器
controls.update();
requestAnimationFrame(animate)
renderer.render(scene, camera)
}
function main() {
initRenderer();//渲染器
initCamera();//相機
initScene();//場景
initLight();//光線
initObject();//物體
initControls();
animate();//動畫
}
</script>
</body>
</html>