材料分类:
MeshBasicMaterial:基础网孔材料,一个以简单着色(平面或线框)方式来绘制几何形状的材料。
MeshLambertMaterial:兰伯特网孔材料,一种非发光材料(兰伯特)的表面
MeshPhongMaterial:网孔材料,用于表面有光泽的材料,计算每个像素。
光线分类
注意:材料收到光线影响,即不同的材料对不同的光线表现出不同的特点,试着该表材料和光线,观测结果
1. AmbientLight 环境光:这种光的颜色被应用到全局范围内的所有对象。
2. PointLight 点光源 使用 MeshLambertMaterial 或 Phong网孔材料(MeshPhongMaterial) 来影响对象
3. 平行光源(DirectionalLight).影响使用 兰伯特网孔材料(MeshLambertMaterial) 或 Phong网孔材料(MeshPhongMaterial) 的对象。
4. 聚光光源(SpotLight)一种能投射锥形阴影区域的点光源。 使用 MeshLambertMaterial 或 Phong网孔材料(MeshPhongMaterial) 来影响对象。
5. 光(Light)光源的基类。
1.在【three.js第四课】的原本基础上进行修改,将自定义的材料修改为如下:
//自定义材料
//map:用于设置纹理贴图,也可以用16进制的颜色替换:color:0xFFFFFF
//side:用于设置显示面。属性可设置为双面DoubleSide,前面FontSide,后面BackSide
//MeshBasicMaterial:基础网孔材料,一个以简单着色(平面或线框)方式来绘制几何形状的材料。
//MeshLambertMaterial:兰伯特网孔材料,一种非发光材料(兰伯特)的表面
//MeshPhongMaterial:网孔材料,用于表面有光泽的材料,计算每个像素。
var cubeMaterial = [
//右
new THREE.MeshLambertMaterial({color:0xFFFFFF,side:THREE.DoubleSide}),
//左
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/2.png') ,side:THREE.DoubleSide}),
//上
new THREE.MeshPhongMaterial({map: new THREE.TextureLoader().load('images/3.png') ,side:THREE.DoubleSide}),
//下
new THREE.MeshLambertMaterial({map: new THREE.TextureLoader().load('images/4.png') ,side:THREE.DoubleSide}),
//前
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/5.png') ,side:THREE.DoubleSide}),
//后
new THREE.MeshPhongMaterial({map: new THREE.TextureLoader().load('images/6.png') ,side:THREE.DoubleSide})
];
2.在此处举例上面所有的光线,更换时将保留一个,其他光线注释即可,光线使用如下:
//添加光线
//注意:材料收到光线影响,即不同的材料对不同的光线表现出不同的特点,试着该表材料和光线,观测结果
//1. AmbientLight 环境光:这种光的颜色被应用到全局范围内的所有对象。
//AmbientLight(光线的颜色,光线的强度)
//var ambientLight = new THREE.AmbientLight(0xFFFFFF,3.0);
//scene.add(ambientLight);//光线加入场景中
//2. PointLight 点光源 使用 MeshLambertMaterial 或 Phong网孔材料(MeshPhongMaterial) 来影响对象
//var pointLight = new THREE.PointLight(0xFFFFFF,3.0);
//scene.add(pointLight);//光线加入场景中
//3. 平行光源(DirectionalLight).影响使用 兰伯特网孔材料(MeshLambertMaterial) 或 Phong网孔材料(MeshPhongMaterial) 的对象。
//var directionalLight = new THREE.DirectionalLight(0xFFFFFF,3.0);
//scene.add(directionalLight);//光线加入场景中
//4. 聚光光源(SpotLight)一种能投射锥形阴影区域的点光源。 使用 MeshLambertMaterial 或 Phong网孔材料(MeshPhongMaterial) 来影响对象。
//var spotLight = new THREE.SpotLight(0xFFFFFF,3.0);
//scene.add(spotLight);//光线加入场景中
//5. 光(Light)光源的基类。
var light = new THREE.Light(0xFFFFFF,3.0);
scene.add(light);//光线加入场景中
4.修改不同的光线以及材料,观察不同光线对材料的影响。
5.源码:
<!DOCTYPE html>
<html>
<head>
<title>demo1</title>
</head>
<style type="text/css">
body{
margin:0;
}
canvas{
width:100%;
height:100%;
}
</style>
<body>
<script src="jquery.min.js"></script>
<script src="../build/three.js"></script>
<script src="../examples/js/controls/OrbitControls.js"></script>
<script type="text/javascript">
var scene = new THREE.Scene();//创建场景
//创建一个摄像机对象
var camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight, 0.1, 1000);
//创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);//渲染到浏览器
//加入事件监听器,窗口自适应
window.addEventListener('resize', function(){
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize(width,height);
camera.aspect = width/height;
camera.updateProjectionMatrix();
})
//轨道控制 镜头的移动
var controls = new THREE.OrbitControls(camera,renderer.document);
//创建形状 BoxGeometry
var geometry = new THREE.BoxGeometry(1,1,1);
//自定义材料
//map:用于设置纹理贴图,也可以用16进制的颜色替换:color:0xFFFFFF
//side:用于设置显示面。属性可设置为双面DoubleSide,前面FontSide,后面BackSide
//MeshBasicMaterial:基础网孔材料,一个以简单着色(平面或线框)方式来绘制几何形状的材料。
//MeshLambertMaterial:兰伯特网孔材料,一种非发光材料(兰伯特)的表面
//MeshPhongMaterial:网孔材料,用于表面有光泽的材料,计算每个像素。
var cubeMaterial = [
//右
new THREE.MeshLambertMaterial({color:0xFFFFFF,side:THREE.DoubleSide}),
//左
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/2.png') ,side:THREE.DoubleSide}),
//上
new THREE.MeshPhongMaterial({map: new THREE.TextureLoader().load('images/3.png') ,side:THREE.DoubleSide}),
//下
new THREE.MeshLambertMaterial({map: new THREE.TextureLoader().load('images/4.png') ,side:THREE.DoubleSide}),
//前
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/5.png') ,side:THREE.DoubleSide}),
//后
new THREE.MeshPhongMaterial({map: new THREE.TextureLoader().load('images/6.png') ,side:THREE.DoubleSide})
];
//创建材料 wireframe是否使用线条
//var material = new THREE.MeshBasicMaterial({color:0xFFFFFF,wireframe:true});
var material = new THREE.MeshFaceMaterial(cubeMaterial);
//将材料和形状结合
var cube = new THREE.Mesh(geometry,material);
//物体加入场景中
scene.add(cube);
//添加光线
//注意:材料收到光线影响,即不同的材料对不同的光线表现出不同的特点,试着该表材料和光线,观测结果
//1. AmbientLight 环境光:这种光的颜色被应用到全局范围内的所有对象。
//AmbientLight(光线的颜色,光线的强度)
//var ambientLight = new THREE.AmbientLight(0xFFFFFF,3.0);
//scene.add(ambientLight);//光线加入场景中
//2. PointLight 点光源 使用 MeshLambertMaterial 或 Phong网孔材料(MeshPhongMaterial) 来影响对象
//var pointLight = new THREE.PointLight(0xFFFFFF,3.0);
//scene.add(pointLight);//光线加入场景中
//3. 平行光源(DirectionalLight).影响使用 兰伯特网孔材料(MeshLambertMaterial) 或 Phong网孔材料(MeshPhongMaterial) 的对象。
//var directionalLight = new THREE.DirectionalLight(0xFFFFFF,3.0);
//scene.add(directionalLight);//光线加入场景中
//4. 聚光光源(SpotLight)一种能投射锥形阴影区域的点光源。 使用 MeshLambertMaterial 或 Phong网孔材料(MeshPhongMaterial) 来影响对象。
//var spotLight = new THREE.SpotLight(0xFFFFFF,3.0);
//scene.add(spotLight);//光线加入场景中
//5. 光(Light)光源的基类。
var light = new THREE.Light(0xFFFFFF,3.0);
scene.add(light);//光线加入场景中
camera.position.z=3;//设置相机的位置
//逻辑
var update=function(){
//物体随着XY轴旋转
//cube.rotation.x +=0.01;
//cube.rotation.y += 0.005;
}
//绘画渲染
var render=function() {
renderer.render(scene,camera);
}
//循环运行update,render
var loop=function() {
requestAnimationFrame(loop);
update();
render();
}
loop();//循环开始
</script>
</body>
</html>