- 博客(16)
- 收藏
- 关注
RSS订阅原创 threejs学习之环境光和点光源
点光源，从一个点散发出的光，相当于灯泡，可以设置颜色，亮度、照射最大距离以及光照衰退量。环境光可以均匀照亮场景中所有物体，不能投射阴影，不能设置方向，只能设置颜色和亮度。添加地面，必须把receiveShadow设为true，地面才能接收物体投射出的阴影。创建立方体，必须把参数castShadow设置为true，立方体才能产生阴影。添加点光源，必须把castShadow设为true，光源才能投射阴影。// 镜面指数，越高反射效果越强。// 调整渲染器窗口大小。// 加载物体纹理贴图。
2024-05-04 18:11:07
635
原创 threejs学习之自定义几何体BufferGeometry
第二种方法是只编写出需要的坐标，不编写完整绘制点，顺序也可以打乱，通过索引，控制编写的坐标应该按照什么顺序进行绘制。这次学习了两个自定义几何体的方法，第一个通过编写完整的顶点坐标，绘制一个正方形。去掉重复的右上和坐下坐标点，然后编写索引，这样就会按照索引来取坐标点进行绘制。几何体是由坐标点绘制成线，线绘制成三角形，多个三角形拼接成的。
2024-05-04 15:27:35
125
2
原创 threejs学习之材质贴图和环境贴图
使几何体拥有场景反射效果，需要准备好场景6个面的图片，加载到几何体上。反射效果并不是真的让几何体反射场景环境，而是把场景环境贴图加载到几何体物体表面实现。使几何体拥有如皮革、砖块、塑料等材质效果，需要使用对应的材质图片，使用如下方式加载到几何体中。
2024-05-02 19:38:07
312
原创 css响应式属性：clamp()、min()、max()
clamp()接收三个参数，clamp(最小值、首选值、最大值)，如果在页面上，首选值大于最大值，则使用最大值，如果首选值小于最小值，则使用最小值，否则使用首选值。
2024-04-27 12:45:25
639
原创 前端怎么实现聊天输入框？怎么实现类似b站评论的输入并发送自定义表情包？输入回显、发送时表情包转义为[emoji]字符串、页面展示回显
前端实现聊天输入框发送自定义emoji表情功能
2024-03-01 20:32:56
1231
原创 原生JS实现碰撞广告效果
一个可以从左上角开始，往右下角移动，碰到屏幕边界时会往相反方向移动广告效果代码部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0;
2021-07-20 18:51:54
168
原创 原生JS实现div方块拖拽
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; background: red; p.
2021-07-18 13:24:55
377
原创 原生JS实现透明度轮播效果
js实现透明度轮播效果以透明度变换的方式切换轮播图，具有自动轮播、点击左右按钮切换、点击下方圆点切换功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="animation.js"></script> <style type="
2021-07-03 16:26:35
340
原创 原生JS实现水平轮播动画图
JS实现水平轮播动画图具有自动轮播、点击左右切换按钮切换图片、点击下方小圆点切换到对应图片功能由于图片大小限制，只截取了这一段gif完整代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * {
2021-07-03 16:20:59
286
原创 css实现3d旋转图片魔方
css实现3d旋转图片魔方代码部分：<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title> <style type="text/css"> *{margin: 0;padding: 0;} ul li{list-style: none;} div{marg
2021-07-03 16:06:58
822
原创 原生JS实现弹幕功能
原生JS实现弹幕功能代码部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } #box {
2021-07-03 15:43:17
236
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人