本文的話 我們來(lái)設(shè)置一下點(diǎn)光源
點(diǎn)光源其實(shí)最直觀的就是可以做螢火蟲(chóng)
也可以做星光 點(diǎn)點(diǎn)的效果
我們可以直接在官網(wǎng)中搜索 Pointlight
大家可以在官網(wǎng)這里看一下 其實(shí) SpotLight 聚關(guān)燈中的屬性 Pointlight 點(diǎn)光源也有的
我們先編寫代碼如下
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);
// 創(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(5, 5),
new THREE.MeshStandardMaterial({ color: 0xeeeeee })
);
plane.position.set(0, -1, 0);
plane.rotation.x = -Math.PI / 2;
plane.receiveShadow = true;
scene.add(plane);
// 聚光燈光源
const Point = new THREE.PointLight(0xff0000, 1);
Point.position.set(1, 0, 0);
Point.castShadow = true;
Point.shadow.mapSize.set(512, 512);
scene.add(Point);
// 創(chuàng)建一個(gè)canvas容器并追加到body上
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.physicallyCorrectLights = 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();
PointLight 創(chuàng)建一個(gè)點(diǎn)光源 這里我們給了 紅色0xff0000
然后 調(diào)整了 position 的位置
castShadow 允許陰影
mapSize 設(shè)置了寬高
我們 distance 調(diào)一下它照射的最大距離
這里 我們來(lái)個(gè)1
這里 我們就 光距離變小了很多
decay 可以設(shè)置衰減的幅度 默認(rèn)2
我們這里 給個(gè)0 不衰減
光照變的非常強(qiáng)
如果你想在 邏輯代碼 例如 gui事件中 修改 decay 需要先將 渲染器的 physicallyCorrectLights 字段設(shè)為true
否者它不重新計(jì)算 你改了值 它不會(huì)變化的
當(dāng)然 開(kāi)頭 我說(shuō) 可以做螢火蟲(chóng)
這一光照效果 并沒(méi)有實(shí)現(xiàn)這個(gè)效果
很多人就會(huì)想 這做個(gè)啥的螢火蟲(chóng)哦
我們改寫代碼如下
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);
// 創(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(5, 5),
new THREE.MeshStandardMaterial({ color: 0xeeeeee })
);
plane.position.set(0, -1, 0);
plane.rotation.x = -Math.PI / 2;
plane.receiveShadow = true;
scene.add(plane);
const smallBall = new THREE.Mesh(
new THREE.SphereGeometry(0.1, 20, 20),
new THREE.MeshBasicMaterial({ color: 0xff0000 })
);
smallBall.position.set(1, 0, 0);
scene.add(smallBall);
// 聚光燈光源
const Point = new THREE.PointLight(0xff0000, 1);
Point.position.set(1, 0, 0);
Point.castShadow = true;
Point.shadow.mapSize.set(512, 512);
Point.decay = 0;
smallBall.add(Point);
// 創(chuàng)建一個(gè)canvas容器并追加到body上
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.physicallyCorrectLights = 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();
我們這里 直接通過(guò) SphereGeometry 創(chuàng)造一個(gè)原點(diǎn) 材質(zhì) color設(shè)為 0xff0000 紅色 命名為 smallBall 調(diào)整 position位置后
然后 加入場(chǎng)景 scene.add(smallBall);
然后 我們之前的點(diǎn)光源直接 add到這個(gè) smallBall中
運(yùn)行結(jié)果如下
這樣 就做出了一個(gè)小點(diǎn)在發(fā)光的效果
然后 我們?cè)谧钕旅?加上一些代碼
const clock = new THREE.Clock();
function animate() {
let time = clock.getElapsedTime();
smallBall.position.z = Math.sin(time);
smallBall.position.x = Math.cos(time);
controls.update();
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
const clock = new THREE.Clock(); 聲明一個(gè)時(shí)鐘
然后 在運(yùn)行是不斷計(jì)算 改變smallBall x z軸位置
就會(huì)發(fā)現(xiàn) 我們的小原點(diǎn) 一直圍繞這我們中心的球轉(zhuǎn)
且外部的環(huán)境光也會(huì)跟著一起動(dòng)
大家可能比較好奇 clock.getElapsedTime 拿到的 time 到底是什么
我們控制臺(tái)輸出一下
運(yùn)行代碼
在Three.js中，THREE.Clock()是一個(gè)計(jì)時(shí)器對(duì)象，getElapsedTime()方法用于獲取從創(chuàng)建計(jì)時(shí)器對(duì)象開(kāi)始到當(dāng)前時(shí)刻的時(shí)間間隔，單位為秒。代碼中，let time = clock.getElapsedTime();用于獲取動(dòng)畫運(yùn)行的時(shí)間，然后通過(guò)Math.sin(time)和Math.cos(time)來(lái)計(jì)算小球的位置。
如果你想上下動(dòng) 操作 y 就好了文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-803443.html
我們?cè)O(shè)置可以用這個(gè)做出太陽(yáng)東升西落的效果了文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-803443.html
到了這里，關(guān)于WEB 3D技術(shù) three.js 點(diǎn)光源的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
