最近項目需要折騰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前端開發、喜歡閱讀
本文版權歸作者所有,轉載請標明原文鏈接。
如果覺得我的文章對您有用，請隨意打賞。您的支持將鼓勵我不斷的迭代！
支付寶
微信