材料分类：
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.源码：
<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);//创建形状 BoxGeometryvar 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，rendervar loop=function() {requestAnimationFrame(loop);update();render();}loop();//循环开始</script></body></html>
版权声明：本站部分内容由互联网用户自发贡献，文章观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请拨打网站电话或发送邮件至1330763388@qq.com 反馈举报，一经查实，本站将立刻删除。
文章标题：【three.js第五课】光线的添加和感光材料发布于2024-01-16 22:33:08
