Threejs中的材质贴图[精华文章]

最近项目需要折腾three.js，有关three.js几点说明

1.作用 threejs适合创建简单的模型视图

2.对于复杂的模型图（如：室内模型图）需要美术3D制作，前端导成特定格式文件(如*.mtl/*.obj 格式文件 )，

之后利用threejs插件MTLLoader.js/OBJLoader.js导入数据即可

基础案例 https://github.com/AragornZJF/ThreeExample.js Chapter7.3.2

或者游戏案例 http://www.w3cmark.com/2016/threejs-mark-02.html

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>材质</title>
  6         <style>
  7             #canvas-frame {
  8                 width: 100%;
  9                 height: 600px;
 10             }
 11         </style>
 12     </head>
 13     <body onload="threeStart()">
 14         <div id="canvas-frame" ></div>
 15     </body>
 16     <script type="text/javascript" src="js/three.js"></script> 
 17     <script type="text/javascript">
 18             
 19             var renderer, //渲染器
 20                 width = document.getElementById('canvas-frame').clientWidth, //画布宽
 21                 height = document.getElementById('canvas-frame').clientHeight; //画布高
 22             //初始化渲染器
 23             function initThree(){
 24                 renderer = new THREE.WebGLRenderer({
 25                      antialias : true
 26                      //canvas: document.getElementById('canvas-frame')
 27                 });
 28                 renderer.setSize(width, height);
 29                 renderer.setClearColor(0xFFFFFF, 1.0);
 30                 document.getElementById('canvas-frame').appendChild(renderer.domElement);
 31                 renderer.setClearColor(0xFFFFFF, 1.0);
 32             }
 33             //初始化场景
 34             var scene;
 35             function initScene(){
 36                 scene = new THREE.Scene();
 37             }
 38             var camera;
 39             function initCamera() {  //透视相机
 40                 camera = new THREE.PerspectiveCamera(45,  width/height , 1, 10000);
 41                 camera.position.x = 450;
 42                 camera.position.y = 100;
 43                 camera.position.z = 700;
 44                 camera.up.x = 0;
 45                 camera.up.y = 1; //相机朝向--相机上方为y轴
 46                 camera.up.z = 0;
 47                 camera.lookAt({  //相机的中心点
 48                     x : 0,
 49                     y : 0,
 50                     z : 0
 51                 });
 52             }
 53             
 54             function initLight(){
 55                 //<
span style="background-color: #f5f5f5; color: #008000;"> light--这里使用环境光
 56                 //var light = new THREE.DirectionalLight(0xffffff); /*方向性光源*/
 57                 //light.position.set(600, 1000, 800);
 58                 var light = new THREE.AmbientLight(0xffffff); //模拟漫反射光源
 59                 light.position.set(600, 1000, 800); //使用Ambient Light时可以忽略方向和角度，只考虑光源的位置
 60                 scene.add(light);
 61             }
 62             function initObject(){  //初始化对象
 63                  //导入材质
 64                 var texture = THREE.ImageUtils.loadTexture('img/floor.jpg', {}, function() {
 65                     renderer.render(scene, camera);
 66                 });
 67                 /**
 68                  * 关于material材料注意点说明 
 69                  * MeshBasicMaterial：对光照无感，给几何体一种简单的颜色或显示线框。
 70                  * MeshLambertMaterial：这种材质对光照有反应，用于创建暗淡的不发光的物体。
 71                  * MeshPhongMaterial：这种材质对光照也有反应，用于创建金属类明亮的物体。
 72                  */
 73                 var material = new THREE.MeshLambertMaterial({
 74                     map: texture
 75                 });
 76                 
 77                 //创建一个立方体
 78                 var geometry = new THREE.BoxGeometry(600, 25, 1000);
 79                 //将material材料添加到几何体geometry
 80                 var mesh = new THREE.Mesh(geometry, material);
 81                 scene.add(mesh);
 82             }
 83             function initGrid(){ //辅助网格
 84                 var helper = new THREE.GridHelper( 1000, 50 );
 85                 helper.setColors( 0x0000ff, 0x808080 );
 86                 scene.add( helper );
 87             }
 88             function threeStart(){
 89                 //初始化渲染器
 90                 initThree();
 91                 //初始化场景
 92                 initScene();
 93                 //初始透视化相机
 94                 initCamera();
 95                 //初始化光源
 96                 initLight();
 97                 //模型对象
 98                 initObject();
 99                 //初始化网格辅助线
100                 initGrid();
101                 //渲染成像
102                 renderer.render(scene, camera);
103             }
104             
105     </script>
106 </html>

效果图

作者：Avenstar

出处：http://www.webglstudy.com/zjf-1992/p/6130614.html

关于作者：专注于WEB前端开发、喜欢阅读

本文版权归作者所有,转载请标明原文链接。

如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我不断的迭代！

支付宝

微信

WEBGL学习网（WebGLStudy.COM）专注提供WebGL 、ThreeJS、BabylonJS等WEB3D开发案例源码下载。
声明信息：
1. 本站部分资源来源于用户上传和网络，如有侵权请邮件联系站长：1218436398@qq.com！我们将尽快处理。
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源打赏售价用于赞助本站提供的服务支出（包括不限服务器、网络带宽等费用支出）！
7.欢迎加QQ群学习交流：549297468 ，或者搜索微信公众号：WebGL学习网
WEBGL学习网 » Threejs中的材质贴图[精华文章]