- 纹理——Texture. 泛指物体表面的纹路。表现为可视的图片，用于展示外观
- 贴图——Map. 贴图的具体表现形式是纹理。当纹理附着在具体的物体表面时，则称为贴图。Map的另一层含义——映射，功能是把纹理Texture的UV坐标映射到3D物体表面
- 材质——Material. 在渲染程式中，它是表面可是属性的结合，这些可是属性是指表面的色彩、纹理、光滑度、透明度、反射率、折射率、发光度等。材质表现为纹理Texture和着色器Shader的组合。
- 网格——Mesh. 用于描述物体的外形。
- Shader—一段程序，负责将输入的Mesh和贴图/颜色等按照一定的方式组合起来，然后输出。
代码实例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Lession1</title>
<script src="js/three.js"></script>
<script src="js/three.min.js"></script>
</head>
<body>
<div id="container"></div>
<script src="js/three.min.js"></script>
<script src="js/OBJLoader2.js"></script>
<script>
var container; //新定义元素div
var camera, scene, renderer;
var mouseX = 0,
mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
//透明相机，参数：1，可视角度；2，实际窗口的纵横比；3，近剪切面距离；4，远剪切面距离
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.z = 10;
//场景
scene = new THREE.Scene();
//环境光源（全局光源），影响整个场景的光源；添加颜色
var ambient = new THREE.AmbientLight(0xccccc);
scene.add(ambient);
//方向光源
var directionalLight = new THREE.DirectionalLight(0xffeedd);
directionalLight.position.set(0, 0, 1);
scene.add(directionalLight);
//全局实例
var manager = new THREE.LoadingManager();
manager.onProgress = function(item, loaded, total) {
console.log(item, loaded, total);
};
//纹理
var texture = new THREE.Texture();
//计算模型下载速度
var onProgress = function(xhr) {
if (xhr.lengthComputable) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log(Math.round(percentComplete, 2) + '% downloaded');
}
};
var onError = function(xhr) {};
//加载纹理贴图
var loader = new THREE.ImageLoader(manager);
loader.load('images/pic3.jpg', function(image) {
texture.image = image;
texture.needsUpdate = true;
});
//加载模型
var loader = new THREE.OBJLoader(manager);
loader.load('images/tree.obj', function(object) {
//如果三维模型对象是由多个子模型构成的模型组合，调用object.traverse（）方法对每个子模型进行处理
object.traverse(function(child) {
//注：几何体是不能被渲染的。几何体和材质结合成网格才能被渲染到屏幕上
if (child instanceof THREE.Mesh) { //判断子模型是否是网格
//材质，贴图，纹理
child.material.map = texture;
}
});
object.scale.x = object.scale.y = object.scale.z = 10; //定义x,y,z轴缩放级别
object.updateMatrix();
object.position.y = -3;
scene.add(object);
}, onProgress, onError);
//渲染
renderer = new THREE.WebGLRenderer();
//设置canvas的像素比当前设备的屏幕像素比，避免高分屏下模糊
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
//添加页面上鼠标移动监听事
document.addEventListener('mousemove', onDocumentMouseMove, false);
//添加窗口放大缩小监听事
window.addEventListener('resize', onWindowResize, false);
}
//窗口放大缩小
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix(); //更新投影矩阵
renderer.setSize(window.innerWidth, window.innerHeight);
}
//鼠标监听事件
function onDocumentMouseMove(event) {
mouseX = (event.clientX - windowHalfX) / 2;
mouseY = (event.clientY - windowHalfY) / 2;
}
//动画
function animate() {
//告诉浏览器执行动画，能保证回调函数在屏幕每一次的刷新间隔中只被执行一次
requestAnimationFrame(animate);
render(); //渲染
}
//渲染
function render() {
camera.position.x += (mouseX - camera.position.x) * .5; //控制相机在整个3D环境中的位置
camera.position.y += (-mouseY - camera.position.y) * .5;
camera.lookAt(scene.position); //控制相机的焦点位置，决定相机的朝向
renderer.render(scene, camera);
}
</script>
</body>
</html>
