經(jīng)過 上文 WEB 3D技術(shù) three.js 3D賀卡(2) 加入天空與水面效果 我們將水面 和 天空的效果搭建了一下

那么 我們將四周 點光源的效果做一下

首先 我們將 renderer.toneMappingExposure 的值 改為 0.1 讓效果看著明顯一點

這樣 整個界面就會暗下來

然后 我們在任意位置 加入代碼

//添加點光源
const pointLight = new THREE.PointLight(0xff0000, 100);
pointLight.position.set(0.5, 2.3, 0);
pointLight.castShadow = true;
scene.add(pointLight);

創(chuàng)建一個點光源進(jìn)來 整個房屋就會有一種被燈光照亮的效果

然后 我們腰間渲染器設(shè)置為 允許陰影的

renderer.shadowMap.enabled = true;

然后 我們要將 glb 加載的元素 castShadow receiveShadow 字段都設(shè)置為true
讓他可以投射陰影 接收陰影

然后 我們將 點光源信息也改一下

//添加點光源
const pointLight = new THREE.PointLight(0xffffff, 100);
pointLight.position.set(0.1, 2.4, 0);
pointLight.castShadow = true;
scene.add(pointLight);

整個燈光信息也變好了很多

這里 還是要強調(diào) 點光源其實只是做出了一個燈將四周照亮的效果 但是 其實并沒有這個燈 你如果想要 就還是要加一個球體放在點光源的中心位置

然后 我們隨便找個地方加入如下代碼

//創(chuàng)建一個點光源組
const pointLightGroup = new THREE.Group();
let radius = 3;
pointLightGroup.position.set(-8, 2.5, -1.5);
for (let i = 0; i < 3; i++) {
  const sphereGeometry = new THREE.SphereGeometry(0.2, 32, 32);
  const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
  const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
  sphere.position.set(
    radius * Math.cos((i * 2 * Math.PI) / 3),
    Math.cos((i * 2 * Math.PI) / 3),
    radius * Math.sin((i * 2 * Math.PI) / 3)
  )
  let pointLight = new THREE.PointLight(0xffffff, 1);
  sphere.add(pointLight);
  pointLightGroup.add(sphere);
}
scene.add(pointLightGroup);

創(chuàng)建一個點光源組 Group 調(diào)整好 position 位置
然后 循環(huán)創(chuàng)建 三個球幾何體 小球
然后 用循環(huán)次數(shù) 參與計算 控制他們的 x y z位置

拉大圖形 我們的 三個球就在這里了

但是 我們這里這些點光源好像不是很給力呀
我們將材質(zhì)改成

THREE.MeshStandardMaterial({
	color: 0xffffff,
	emissive: 0xffffff,
	emissiveIntensity: 10
})

好 然后這三個球 我們讓它運動一下
首先 我們需要補間動畫的gsap

//導(dǎo)入gsap補間動畫
import gsap from "gsap";

然后 下面這樣寫

let options = {
   angle: 0
}
gsap.to(options, {
  angle: Math.PI * 2,
  duration: 10,
  repeat: -1,
  ease:"linear",
  onUpdate: () => {
    pointLightGroup.rotation.y = options .angle;
  }
})

動畫 旋轉(zhuǎn)我們的 pointLightGroup 就是 我們 THREE.Group() 定義的光源組
這樣 我們這個動畫就轉(zhuǎn)起來了

然后 如果 我們希望 每個點光源元素 自己也上下動
首先 我們要知道 這三個點光源是在for循環(huán)中創(chuàng)建的

所以 我們沒辦法在代碼中直接的拿到這三個光源對象
我們可以定義一個數(shù)組 來存儲它們

我們最外面定義一個 叫 pointLightArr的數(shù)組
然后將每次循環(huán)聲明的 光源對象 push到數(shù)組中

然后 在循環(huán)語句中修改代碼如下

pointLightArr.map((item, index) => {
	item.position.set(
		radius * Math.cos((index * 2 * Math.PI) / 3 + options.angle),
		Math.cos((index * 2 * Math.PI) / 3 + options.angle * 5),
		radius * Math.sin((index * 2 * Math.PI) / 3 + options.angle)
	)
})

循環(huán)遍歷數(shù)組 然后對下面每一個下標(biāo)對象 進(jìn)行 position xyz屬性的修改

這樣 我們的光源球就開始 上下挑了
文章來源地址http://www.zghlxwxcb.cn/news/detail-803765.html

到了這里，關(guān)于WEB 3D技術(shù) three.js 3D賀卡(3) 點光源燈光動畫效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！