三維坐標系的認識

這一章節的主要作用是加強自我對三維坐標空間的認識。

1. 輔助坐標系

AxesHelper()的參數是輔助坐標系的線段的尺寸大小（設置時盡量比自己的三維場景幾何體要大~）。坐標軸顏色紅R、綠G、藍B分別對應坐標系的x、y、z軸，對于three.js的3D坐標系默認y軸朝上。

// AxesHelper：輔助觀察的坐標系
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);

如果模型顏色太深看不起坐標軸，可以將材質設置為半透明顏色，這樣可以清楚觀察到輔助坐標系。

const material = new THREE.MeshBasicMaterial({color: 0xff0000, //設置材質顏色transparent:true,//開啟透明opacity:0.3,//設置透明度
});

效果如下圖所示：

其余具體代碼由此可看：—> 上一篇博客詳情

如果想要更進一步了解三維坐標系位置關系，可以試著更改Mesh模型對象在場景的尺寸大小以及渲染位置。也可以更改相機的位置坐標以及相機的LookAt()的方向。

光源的影響

在實際生活中物體表面的明暗效果是會受到光照強度的影響，比如晚上不開燈，你就很有可能看不到或者看不清物體，燈光越暗，視線越模糊。咱們用網格模型Mesh模擬生活中物體，用Light模擬光照對物體表面的影響。

1. 光材質的影響

在three.js提供的眾多網格模型中，是有一些不受光照影響的。如下圖所示：

漫反射網格材質MeshLambertMaterial會受到光照影響，不同面和光線夾角不同，立方體不同面就會呈現出來不同的明暗效果。

MeshPhongMaterial可以實現MeshLambertMaterial不能實現的高光反射效果。對于高光效果，你可以想象一下，你在太陽下面觀察一輛車，你會發現在特定角度和位置，你可以看到車表面某個局部區域非常高亮.它就類似與一個鏡面反射效果,比如你生活中拿一面鏡子，放在太陽光下，調整角度，可以把太陽光反射到其它地方，如果反射光對著眼睛，也就是反射光線和視線平行的時候，會非常刺眼。
屬性值：

• 高光亮度屬性.shininess

// 模擬鏡面反射，產生一個高光效果
const material = new THREE.MeshPhongMaterial({color: 0xff0000,shininess: 20, //高光部分的亮度，默認30
});

• 高光顏色屬性.specular

// 模擬鏡面反射，產生一個高光效果
const material = new THREE.MeshPhongMaterial({color: 0xff0000,shininess: 20, //高光部分的亮度，默認30specular: 0x444444, //高光部分的顏色
});

2. 光源介紹

光源種類	名稱
環境光	AmbientLight
點光源	PointLight
聚光燈光源	SpotLight
平行光	DirectionLight

點光源

兩個參數分別表示光源顏色和光照強度

• 參數1：0xffffff是純白光,表示光源顏色
• 參數2：1.0,表示光照強度，可以根據需要調整，你可以可以直接訪問光照強度屬性.intensity設置

const pointLight = new THREE.PointLight(0xffffff, 1.0);
pointLight.intensity = 2.0;//光照強度

通過點光源輔助觀察對象PointLightHelper可視化點光源，可以借助相機控件OrbitControls旋轉縮放三維場景便于預覽點光源位置。

// 光源輔助觀察
const pointLightHelper = new THREE.PointLightHelper(pointLight, 10);
scene.add(pointLightHelper);

可以試著更改原來光源的位置，觀察光源變化情況。

環境光

環境光沒有特定方向，只是整體改變場景的光照明暗。

//環境光:沒有特定方向，整體改變場景的光照明暗
const ambient = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambient);

平行光

平行光就是沿著特定方向發射。

// 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
// 設置光源的方向：通過光源position屬性和目標指向對象的position屬性計算
directionalLight.position.set(80, 100, 50);
// 方向光指向對象網格模型mesh，可以不設置，默認的位置是0,0,0
directionalLight.target = mesh;
scene.add(directionalLight);

通過點光源輔助觀察對象DirectionalLightHelper可視化點光源

const dirLightHelper = new THREE.DirectionalLightHelper(directionalLight, 5, 0xff0000);
scene.add(dirLightHelper);

3. 光源衰減/位置

實際生活中點光源，比如比如一個燈泡，隨機距離的改變，光線會衰減，越來越弱，光源衰減屬性.decay默認值是2.0，如果你不希望衰減可以設置為0.0。

光源其實就是一個燈泡，你放的位置不同，渲染的效果就不一樣，需要注意的是光源位置尺寸大小

最后將光源添加到3D場景中即可

pointLight.decay = 0.0;//設置光源不隨距離衰減
//點光源位置
pointLight.position.set(400, 0, 0);//點光源放在x軸上
scene.add(pointLight); //點光源添加到場景中

光源在x軸的效果如下圖所示：

相機控件

平時開發調試代碼，或者展示模型的時候，可以通過相機控件OrbitControls實現旋轉縮放預覽效果。

本質上就是改變相機的參數，比如相機的位置屬性，改變相機位置也可以改變相機拍照場景中模型的角度，實現模型的360度旋轉預覽效果，改變透視投影相機距離模型的距離，就可以改變相機能看到的視野范圍。

1. 引入擴展庫

• 項目開發中引入方式：

// 引入軌道控制器擴展庫OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

• 如果在原生的HTML文件中：

<script type="importmap">{"imports": {"three": "../three.js/build/three.module.js","three/addons/": "../three.js/examples/jsm/"}}
</script><script type="module">
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
</script>

2. 使用方法

// 設置相機控件軌道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// 如果OrbitControls改變了相機參數，重新調用渲染器渲染三維場景
controls.addEventListener('change', function () {renderer.render(scene, camera); //執行渲染操作
});//監聽鼠標、鍵盤事件

• 旋轉：拖動鼠標左鍵
• 縮放：滾動鼠標中鍵
• 平移：拖動鼠標右鍵