前言：
? ? ? ?學(xué)習(xí)threeJS完全是機(jī)緣巧合，記得有次客戶(hù)提到我們系統(tǒng)（當(dāng)時(shí)在職的公司產(chǎn)品）的數(shù)據(jù)總是以二維表的數(shù)據(jù)顯示，略顯枯燥乏味。所以那會(huì)我開(kāi)始逐步摸索數(shù)據(jù)可視化（說(shuō)白了就是網(wǎng)上找資料），了解到echarts，確實(shí)能然數(shù)據(jù)顯示的更加漂亮。但是后面發(fā)現(xiàn)3D的echarts圖形加載有點(diǎn)耗時(shí)，在查閱了很多資料后，關(guān)注點(diǎn)轉(zhuǎn)移到了threeJS與thinkJS身上，但是當(dāng)我得知thinkJS居然要收費(fèi)，作為一個(gè)窮*，果斷放棄。。。確定了涉獵threeJS，此次，主要和各位看官分享threeJS中的基礎(chǔ)功能組成。
（簡(jiǎn)書(shū).YZJGOOD原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明出處）
正文：
threeJS模型頁(yè)面展示主要構(gòu)成：
場(chǎng)景（網(wǎng)格模型（具體實(shí)物+材質(zhì)）+光照（點(diǎn)光源（陰影）+環(huán)境光源））+相機(jī)+渲染（鼠標(biāo)縮放拖動(dòng)之類(lèi)的）
案例如下：
需要注意：引入關(guān)鍵js : three.js ; OrbitControls.js
<script>
? ? /* 創(chuàng)建場(chǎng)景對(duì)象Scene*/
? ? var scene = new THREE.Scene();
? ? /*創(chuàng)建網(wǎng)格模型*/
? ? var geometry = new THREE.BoxGeometry(200, 200, 200); //創(chuàng)建一個(gè)立方體幾何對(duì)象Geometry
var material = new THREE.MeshLambertMaterial({
? ? ? color: 0x00ffff
? ? });
//材質(zhì)對(duì)象Material（MeshLambertMaterial確定了它的屬性）
? ? var mesh = new THREE.Mesh(geometry, material); //網(wǎng)格模型對(duì)象Mesh（將具體實(shí)物+材質(zhì)添加進(jìn)來(lái)）
? ? scene.add(mesh); //網(wǎng)格模型添加到場(chǎng)景中
? ? /* 光源設(shè)置 */
? ? //點(diǎn)光源
? ? var point = new THREE.PointLight(0x999999);//PointLight屬性確定了它是點(diǎn)光源
? ? point.position.set(400, 200, 300); //點(diǎn)光源位置（說(shuō)白了就是這個(gè)光的起點(diǎn)）??
? ? scene.add(point); //點(diǎn)光源添加到場(chǎng)景中
? ? //環(huán)境光
? ? var ambient = new THREE.AmbientLight(0x888888);//AmbientLight屬性確定了它是環(huán)境光源
? ? scene.add(ambient);
? ? /* 相機(jī)設(shè)置*/
? ? var width = window.innerWidth; //窗口寬度
? ? var height = window.innerHeight; //窗口高度
? ? var k = width / height; //窗口寬高比
? ? var s = 150; //三維場(chǎng)景顯示范圍控制系數(shù)，系數(shù)越大，顯示的范圍越大
? ? ?/*創(chuàng)建相機(jī)對(duì)象*/
? ? var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
? ? camera.position.set(200, 300, 200); //設(shè)置相機(jī)位置（相機(jī)從哪個(gè)方位照過(guò)去）
? ? camera.lookAt(scene.position); //設(shè)置相機(jī)方向(指向的場(chǎng)景對(duì)象)
? ? /*創(chuàng)建渲染器對(duì)象*/
? ? var renderer = new THREE.WebGLRenderer();
? ? renderer.setSize(width, height); //設(shè)置渲染區(qū)域尺寸
? ? renderer.setClearColor(0xb9d3ff, 1); //設(shè)置背景顏色
? ? document.body.appendChild(renderer.domElement); //body元素中插入canvas對(duì)象
? ? //有時(shí)我們不一定要把canvas對(duì)象插入body下面，也有可能插入到某一元素下面
? ? ?document.getElementById('models').appendChild(renderer.domElement); //models元素中插入canvas對(duì)象
? ? /*鼠標(biāo)拖拽控制*/
? ? // 渲染函數(shù)
? ? function render() {
? ? ? renderer.render(scene, camera); //執(zhí)行渲染操作
? ? }
? ? render();
? ? var controls = new THREE.OrbitControls(camera,renderer.domElement);//創(chuàng)建一個(gè)控制對(duì)象
? ? controls.addEventListener('change', render);//監(jiān)聽(tīng)鼠標(biāo)事件，觸發(fā)渲染函數(shù)，已達(dá)到拖拽旋轉(zhuǎn)效果
//周期變化控制：
? ? function render() {
? ? ? renderer.render(scene, camera); //執(zhí)行渲染操作
? ? ? mesh.rotateY(0.1);//按照一定的周期每次繞y軸旋轉(zhuǎn)0.1弧度
? ? ? requestAnimationFrame(render);//請(qǐng)求再次執(zhí)行渲染函數(shù)render，循環(huán)往復(fù)
? ? }
? ? render();
? ? ////創(chuàng)建一個(gè)控制對(duì)象，保障了鼠標(biāo)能夠進(jìn)行拖拽設(shè)置
? ? var controls = new THREE.OrbitControls(camera,renderer.domElement);
? </script>
? 好的，這次的分享就到這里，謝謝！
（簡(jiǎn)書(shū).YZJGOOD原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明出處）
