WEB 3D技术 three.js 点光源-Toy模板网

这篇具有很好参考价值的文章主要介绍了WEB 3D技术 three.js 点光源。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

本文的话我们来设置一下点光源

点光源其实最直观的就是可以做萤火虫
也可以做星光点点的效果

我们可以直接在官网中搜索 Pointlight
WEB 3D技术 three.js 点光源,前端,3d,javascript
大家可以在官网这里看一下其实 SpotLight 聚关灯中的属性 Pointlight 点光源也有的
我们先编写代码如下

import './style.css'
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

// 创建相机
const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);
const scene = new THREE.Scene();

// 环境光
const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);

// 创建球形几何体
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);


// 创建一个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);

// 设置相机位置
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 创建一个点光源这里我们给了红色0xff0000
然后调整了 position 的位置
castShadow 允许阴影
mapSize 设置了宽高
WEB 3D技术 three.js 点光源,前端,3d,javascript
我们 distance 调一下它照射的最大距离

WEB 3D技术 three.js 点光源,前端,3d,javascript
这里我们来个1

这里我们就光距离变小了很多

decay 可以设置衰减的幅度默认2

我们这里给个0 不衰减

光照变的非常强

如果你想在逻辑代码例如 gui事件中修改 decay 需要先将渲染器的 physicallyCorrectLights 字段设为true
WEB 3D技术 three.js 点光源,前端,3d,javascript
否者它不重新计算你改了值它不会变化的

当然开头我说可以做萤火虫
这一光照效果并没有实现这个效果
很多人就会想这做个啥的萤火虫哦

我们改写代码如下

import './style.css'
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

// 创建相机
const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);
const scene = new THREE.Scene();

// 环境光
const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);

// 创建球形几何体
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);

// 创建一个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);

// 设置相机位置
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();

我们这里直接通过 SphereGeometry 创造一个原点材质 color设为 0xff0000 红色命名为 smallBall 调整 position位置后
然后加入场景 scene.add(smallBall);
然后我们之前的点光源直接 add到这个 smallBall中
运行结果如下
WEB 3D技术 three.js 点光源,前端,3d,javascript
这样就做出了一个小点在发光的效果

然后我们在最下面加上一些代码

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(); 声明一个时钟
然后在运行是不断计算改变smallBall x z轴位置
就会发现我们的小原点一直围绕这我们中心的球转
WEB 3D技术 three.js 点光源,前端,3d,javascript
且外部的环境光也会跟着一起动

大家可能比较好奇 clock.getElapsedTime 拿到的 time 到底是什么
我们控制台输出一下

运行代码

在Three.js中，THREE.Clock()是一个计时器对象，getElapsedTime()方法用于获取从创建计时器对象开始到当前时刻的时间间隔，单位为秒。代码中，let time = clock.getElapsedTime();用于获取动画运行的时间，然后通过Math.sin(time)和Math.cos(time)来计算小球的位置。