本文 我們來說說 點(diǎn)光源和聚光燈
點(diǎn)光源 就像一個(gè)電燈泡一樣 想四周發(fā)散光
而聚光燈就像手電筒一樣 像一個(gè)方向射過去 距離越遠(yuǎn)范圍越大 光越弱
我們先來看一個(gè)聚光燈的效果
我們可以編寫代碼如下
import './style.css'
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
// 創(chuàng)建相機(jī)
const camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
0.1,
1000
);
const scene = new THREE.Scene();
// 環(huán)境光
const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);
// 聚光燈光源
const spotlight = new THREE.SpotLight(0xffffff, 1);
spotlight.position.set(0, 2, 1);
spotlight.castShadow = true;
scene.add(spotlight);
// 創(chuàng)建球形幾何體
const sphere1 = new THREE.Mesh(
new THREE.SphereGeometry(0.7, 32, 32),
new THREE.MeshStandardMaterial({})
);
sphere1.castShadow = true;
sphere1.receiveShadow = true;
scene.add(sphere1);
// 添加平面
const plane = new THREE.Mesh(
new THREE.PlaneGeometry(3, 3),
new THREE.MeshStandardMaterial({ color: 0xeeeeee })
);
plane.position.set(0, -1, 0);
plane.rotation.x = -Math.PI / 2;
plane.receiveShadow = true;
scene.add(plane);
// 創(chuàng)建一個(gè)canvas容器并追加到body上
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);
// 設(shè)置相機(jī)位置
camera.position.z = 5;
camera.lookAt(0, 0, 0);
// 添加控制器
const controls = new OrbitControls(camera, renderer.domElement);
function animate() {
controls.update();
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
SpotLight 聚光燈
然后通過 position 設(shè)置一下光的位置
運(yùn)行代碼如下
目前看 我們光是從直線照過來的 但其實(shí) 我們可以不通過position去算位置
可以直接通過 target 告訴它我們燈的目標(biāo)是誰
我們將代碼改成這樣
// 環(huán)境光
const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);
// 創(chuàng)建球形幾何體
const sphere1 = new THREE.Mesh(
new THREE.SphereGeometry(0.7, 32, 32),
new THREE.MeshStandardMaterial({})
);
sphere1.castShadow = true;
sphere1.receiveShadow = true;
scene.add(sphere1);
// 聚光燈光源
const spotlight = new THREE.SpotLight(0xffffff, 1);
spotlight.castShadow = true;
spotlight.target = sphere1;
scene.add(spotlight);
這里 我們直接不設(shè)置它的position了 直接讓他打在我們 sphere1這個(gè)球體上了
angle 可以調(diào)整它的角度
我們調(diào)成這樣
const spotlight = new THREE.SpotLight(0xffffff, 1);
spotlight.position.set(1, 2, 0.5);
spotlight.castShadow = true;
scene.add(spotlight);
然后 我們修改一下角度
const spotlight = new THREE.SpotLight(0xffffff, 1);
spotlight.position.set(1, 0, 2);
spotlight.castShadow = true;
spotlight.angle = Math.PI / 6;
scene.add(spotlight);
我們將他改成 1
大概效果就是這樣
值越小 它聚焦的范圍就越小
distance 設(shè)置光照距離 簡單說 就是 設(shè)置你這個(gè)光 它能設(shè)多遠(yuǎn)
聚光燈的話 光照范圍會(huì)越遠(yuǎn)越擴(kuò)大 但聚焦越來越弱光照變?nèi)?那么 就是在你設(shè)置的距離中 沿途不斷擴(kuò)大范圍光強(qiáng)度慢慢變?nèi)?直到到了你的指定位置 完全消失
例如 我們這里這樣寫
const spotlight = new THREE.SpotLight(0xffffff, 1);
spotlight.position.set(1, 0, 2);
spotlight.castShadow = true;
spotlight.angle = 1;
spotlight.distance = 3;
scene.add(spotlight);
它的光照距離就只能到3
我們改 兩百
const spotlight = new THREE.SpotLight(0xffffff, 1);
spotlight.position.set(1, 0, 2);
spotlight.castShadow = true;
spotlight.angle = 1;
spotlight.distance = 200;
scene.add(spotlight);
明顯就把我們物體后面的陰影整個(gè)照出來了
penumbra 設(shè)置光周圍的一個(gè)衰減效果
這個(gè)值是 0 到 1
const spotlight = new THREE.SpotLight(0xffffff, 1);
spotlight.position.set(1, 0, 2);
spotlight.castShadow = true;
spotlight.angle = 1;
spotlight.distance = 200;
spotlight.penumbra = 0;
scene.add(spotlight);
默認(rèn)值就是 0 效果不太明顯
我們來個(gè) 0.9
const spotlight = new THREE.SpotLight(0xffffff, 1);
spotlight.position.set(1, 0, 2);
spotlight.castShadow = true;
spotlight.angle = 1;
spotlight.distance = 200;
spotlight.penumbra = 0.9;
scene.add(spotlight);
就是 光線的兩側(cè)效果光會(huì)值越大越弱
decay 沿著光照的距離衰減
默認(rèn)值是2 會(huì)比較符合現(xiàn)實(shí)中的情況
我們給個(gè) 0文章來源：http://www.zghlxwxcb.cn/news/detail-811585.html
const spotlight = new THREE.SpotLight(0xffffff, 1);
spotlight.position.set(1, 0, 2);
spotlight.castShadow = true;
spotlight.angle = 1;
spotlight.distance = 200;
spotlight.decay = 0;
scene.add(spotlight);
光照效果衰減的就基本沒有 就會(huì)顯得前后都很亮
我們調(diào)成2 光照縮減明顯就變快了
調(diào)成 10 基本一下就縮沒了
但 如果你想在邏輯事件中 例如 GUI 中去修改 decay 就要開啟 渲染器的光照計(jì)算 physicallyCorrectLights字段 給個(gè)true就行
intensity 的話 也可以控制我們光的強(qiáng)度
它的默認(rèn)值 就是個(gè) 1
我們這里來個(gè)10
效果就變得非常明顯了
文章來源地址http://www.zghlxwxcb.cn/news/detail-811585.html
到了這里，關(guān)于WEB 3D技術(shù) three.js 聚光燈的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
