最近项目需要折腾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 // 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.cnblogs.com/zjf-1992/p/6130614.html
关于作者：专注于WEB前端开发、喜欢阅读
本文版权归作者所有,转载请标明原文链接。
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我不断的迭代！
支付宝
微信