three.js基本概念和尝试
功能概述：
Three.js作为WebGL框架中的佼佼者，由于它的易用性和扩展性，使得它能够满足大部分的开发需求，Three.js的具体功能如下：
- Three.js掩盖了3D渲染的细节：Three.js将WebGL原生API的细节抽象化，将3D场景拆解为网格、材质和光源(即它内置了图形编程常用的一些对象种类)。
- 面向对象：开发者可以使用上层的JavaScript对象，而不是仅仅调用JavaScript函数。
- 功能非常丰富：Three.js除了封装了WebGL原始API之外，Three.js还包含了许多实用的内置对象，可以方便地应用于游戏开发、动画制作、幻灯片制作、髙分辨率模型和一些特殊的视觉效果制作。
- 速度很快：Three.js采用了3D图形最佳实践来保证在不失可用性的前提下，保持极高的性能。
- 支持交互：WebGL本身并不提供拾取（picking)功能（即是否知道鼠标正处于某个物体上）。而Three.js则固化了拾取支持，这就使得你可以轻松为你的应用添加交互功能。
- 包含数学库：Three.js拥有一个强大易用的数学库，你可以在其中进行矩阵、投影和矢量运算。
- 内置文件格式支持：你可以使用流行的3D建模软件导出文本格式的文件，然后使用Three.js加载；也可以使用Three.js自己的JSON格式或二进制格式。
- 扩展性很强：为Three.js添加新的特性或进行自定义优化是很容易的事情。如果你需要某个特殊的数据结构，那么只需要封装到Three.js即可。
- 支持HTML5 canvas：Three.js不但支持WebGL，而且还支持使用Canvas2D、Css3D和SVG进行渲染。在未兼容WebGL的环境中可以回退到其它的解决方案。
初次尝试的案例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>我的第一个Three.js案例</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body onload="init()">
<script src="https://cdn.bootcss.com/three.js/92/three.js"></script>
<script>
//声明一些全局变量
var renderer, camera, scene, geometry, material, mesh;
//初始化渲染器
function initRenderer() {
renderer = new THREE.WebGLRenderer(); //实例化渲染器
renderer.setSize(window.innerWidth, window.innerHeight); //设置宽和高
document.body.appendChild(renderer.domElement); //添加到dom
}
//初始化场景
function initScene() {
scene = new THREE.Scene(); //实例化场景
}
//初始化相机
function initCamera() {
camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 200); //实例化相机
camera.position.set(0, 0, 15);
camera.up.set(0,1,0)
}
//创建模型
function initMesh() {
geometry = new THREE.BoxGeometry( 2, 2, 2 ); //创建几何体
material = new THREE.MeshNormalMaterial(); //创建材质
// 1 材质分为基础线条材质和一般的线条材质
/**
* @destription: 基础线条材质的基本属性和使用方法以及构造函数。
* @params:
*/
// var material = new THREE.LineBasicMaterial( {
// color: 0xffffff, //颜色
// linewidth: 1, //线宽
// linecap: 'round', //ignored by WebGLRenderer 定义线两端的样式。可选值为 'butt', 'round' 和 'square'。默认值为 'round'。
// linejoin: 'round' //ignored by WebGLRenderer 定义线连接节点的样式。可选值为 'round', 'bevel' 和 'miter'。默认值为 'round'。
// } );
mesh = new THREE.Mesh( geometry, material ); //创建网格
/**
* @params: 网格属性 mesh
*
* /
*
*
*/
// var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
// var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
// var mesh = new THREE.Mesh( geometry, material ); // 1 实体 2 材质属性
// scene.add( mesh ); //添加到场景中
var axesHelper = new THREE.AxesHelper( 5 );
// scene.add( );
scene.add( mesh,axesHelper ); //将网格添加到场景
}
//运行动画
function animate() {
requestAnimationFrame(animate); //循环调用函数
mesh.rotation.x += 0.01; //每帧网格模型的沿x轴旋转0.01弧度
mesh.rotation.y += 0.02; //每帧网格模型的沿y轴旋转0.02弧度
renderer.render( scene, camera ); //渲染界面
}
//初始化函数，页面加载完成是调用
function init() {
initRenderer();
initScene();
initCamera();
initMesh();
animate();
}
</script>
</body>
</html>
