threeJs学习笔记（三）

已于 2024-09-10 10:32:00 修改
阅读量669 收藏 5
点赞数 24
文章标签： 学习 笔记
于 2024-09-07 14:41:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43024757/article/details/141992161
版权

个人项目上线

使用vercel部署：https://vercel.com/

  1. 本地全局安装npm install vercel -g
  2. 打包项目npm run build
  3. 配置部署命令：
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "deploy": "vercel --prod"
  },
  1. 执行vercel login使用github登录vercel
  2. 执行npm run deploy即可：
    在这里插入图片描述

灯光

AmbientLight

环境光源会无差别地作用在物体的各个方向，不会造成阴影等效果

添加光照前：
在这里插入图片描述
添加光照后：

const ambientLight = new THREE.AmbientLight(0xffffff, 1.5);
scene.add(ambientLight);

在这里插入图片描述

DirectionalLight

平行光是从单一方向照射而来的光，默认平行光来源为正上方：（0，1，0）的位置

const directionalLight = new THREE.DirectionalLight("#ff0", 0.5);
scene.add(directionalLight);

在这里插入图片描述
平行光默认照向的位置是原点

HemisphereLight半球光

半球光自带两个方向，分为skyColor和groudColor，光的默认位置也是（0，1，0）

const hemisphereLight = new THREE.HemisphereLight("#ff0", "#00f", 1);
scene.add(new THREE.HemisphereLightHelper(hemisphereLight, 5));
scene.add(hemisphereLight);

在这里插入图片描述
注意看，半球光在光交界处的颜色是渐变的，即两种光深浅的交融
在这里插入图片描述

PointLight

点光源就是从某个点发出的光，默认从（0，0，0）的位置发出：

const pointLight = new THREE.PointLight("#f0f", 50);
scene.add(pointLight);

const pointLightHelper = new THREE.PointLightHelper(pointLight, 1);
scene.add(pointLightHelper);

在这里插入图片描述
通过distance属性可以配置光照射的距离，默认是0，代表无限远

如果将光移动到某个位置，distance设为达不到物体的距离，那么光就不会作用到distance范围外的物体，比如将光移动到下面这个位置并且设置光的距离：
在这里插入图片描述

decay对应的是光的衰减值，通常情况下使用的默认的就行，默认值是2，2已经是threejs算出来的最符合物理规律的值了

RectAreaLight

平面光光源，类似生活中摄影棚里的灯：
在这里插入图片描述

const rectLight = new THREE.RectAreaLight(0xffffff, 2, 3, 1);
const rectLightFolder = gui.addFolder("rectLight");
rectLightFolder.add(rectLight.position, "x").min(-10).max(10).onChange(() => {
    rectLight.lookAt(new THREE.Vector3(0,0,0))
});
rectLightFolder.add(rectLight.position, "y").min(-10).max(10).onChange(() => {
    rectLight.lookAt(new THREE.Vector3(0,0,0))
});
rectLightFolder.add(rectLight.position, "z").min(-10).max(10).onChange(() => {
    rectLight.lookAt(new THREE.Vector3(0,0,0))
});
rectLightFolder.add(rectLight, "width").min(-10).max(10).onChange(() => {
    rectLight.lookAt(new THREE.Vector3(0,0,0))
});
rectLightFolder.add(rectLight, "height").min(-10).max(10).onChange(() => {
    rectLight.lookAt(new THREE.Vector3(0,0,0))
});
scene.add(rectLight);

const rectLightHelper = new RectAreaLightHelper(rectLight);
scene.add(rectLightHelper);

在这里插入图片描述

代码中设置了在每次修改光源位置、宽高时都让光源重新照向（lookAt）原点，如果不这么设置，光源将保持初次声明的方向不变

注意，这个光源只能作用于MeshStandardMaterial和MeshPhysicalMaterial 两种材质。

SpotLight

聚光灯，照射方式类似手电筒，
在这里插入图片描述

const spotLight = new THREE.SpotLight("#F0F");
const spotLightFolder = gui.addFolder("spotLight");
spotLightFolder.add(spotLight.position, "x").min(-10).max(10);
spotLightFolder.add(spotLight.position, "y").min(-10).max(10);
spotLightFolder.add(spotLight.position, "z").min(-10).max(10);
spotLightFolder.add(spotLight, "intensity").min(-10).max(10);
spotLightFolder.add(spotLight, "distance").min(0).max(10);
spotLight.angle = Math.PI / 4;
scene.add(spotLight);
const spotLightHelper = new THREE.SpotLightHelper(spotLight);
scene.add(spotLightHelper);

另外，通过penumbra属性，可以配置出灯光在边缘区域的衰减程度：
在这里插入图片描述
另外，聚光灯默认始终看向原点，如果想要改变其照射的方向，使用lookAt是无效的，必须通过修改spotLight.target.position才能实现：

scene.add(spotLight.target);
spotLight.target.position.set(-1, 1, 0);

在这里插入图片描述

性能问题

灯光是很耗性能的，我们应该使用尽可能少的光源实现，光的性能消耗从高到低排行如下：

T0：SpotLight、RectAreaLight（最耗性能）
T1：DirectionalLight 、PointLight
T2：AmbientLight 、HemisphereLight（最不耗性能）

所以，当来到性能优化层面时，灯光的实现可以考虑在一开始进行3D建模时就给纹理附加上灯光，而不是使用threejs里的光源实现，不过这样的问题是做不到实时的灯光移动，对于需要动态变化的场景可能就略有欠缺

比如threejs-journey.com上提供的示例：
在这里插入图片描述
这个场景内的几何体，都是使用原本就有灯光效果的纹理实现的
在这里插入图片描述

阴影

阴影在threejs中是被计算成一张阴影贴图来展示的，比如可以看官方给的expample示例：

在这里插入图片描述
画面中存在一个从上往下照射的directionalLight，那么经过threejs计算后，得到左上角第一张的阴影贴图；

画面中存在一个照向左下角的spotLight，这个spotLight只照得到环状结几何体，所以左上角第二张阴影贴图只有这个环状结

这就是threejs内部处理阴影的原理

阴影的一般实现方式

  1. 几何体网格设置castShadow = true
  2. 某个需要展示投影的平面Mesh设置receiveShadow = true
  3. 灯光设置castShadow = true
  4. 渲染器开启阴影renderer.shadowMap.enabled = true
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);
directionalLight.castShadow = true;
// ...
const sphere = new THREE.Mesh(new THREE.SphereGeometry(0.5, 32, 32), material);
sphere.castShadow = true;
// ...
const plane = new THREE.Mesh(new THREE.PlaneGeometry(5, 5), material);
plane.receiveShadow = true;
// ...

在这里插入图片描述
默认情况下，阴影贴图的分辨率为512 * 512，可以通过打印灯光的shadow属性看到（阴影的相关属性存储在castShadow的光源对象里）
在这里插入图片描述
可以通过修改mapSize的分辨率来获取更清晰的阴影，比如将mapSize设为2048 * 2048：

directionalLight.shadow.mapSize.width = 2048;
directionalLight.shadow.mapSize.height = 2048;

// 也可以使用x，y设置
// directionalLight.shadow.mapSize.x = 2048;
// directionalLight.shadow.mapSize.y = 2048;

阴影很显然地变得更高清了
在这里插入图片描述
分辨率越高，意味着GPU的计算性能就会占用得越多，并且基于GPU得渲染原理，分辨率的值应该尽量传2的指数幂

观察阴影

观察阴影的媒介其实是摄像机，所以在平行光的位置会会存在一台摄像机，通过directionalLight.shadow.camera可以访问到，添加一个CameraHelper可以看到这个摄像机的位置：

const directionalLightCameraHelper = new THREE.CameraHelper(
  directionalLight.shadow.camera
);
scene.add(directionalLightCameraHelper);

在这里插入图片描述

所以，既然是正交摄像机，那么就可以设置它的near、far、left等，目前默认情况下，摄像机的near = 0.5，far = 500，left = -5，top = 5，right = 5，bottom = -5，将这些值改为下面的配置：

directionalLight.shadow.camera.near = 1;
directionalLight.shadow.camera.far = 6;

directionalLight.shadow.camera.top = 1;
directionalLight.shadow.camera.right = 1;
directionalLight.shadow.camera.bottom = -1;
directionalLight.shadow.camera.left = -1;

效果：
在这里插入图片描述
如果把摄像机的far设得更小，那就会发现阴影可能渲染得不完全：

directionalLight.shadow.camera.far = 3.8;

在这里插入图片描述
所以，如果未来遇到类似的这种阴影被切割或看不到阴影的问题，优先考虑是不是观察阴影的摄像机参数没有设对

不同的光源，使用的摄像机有可能也是不同的，可能是正交摄像机，也可能是透视摄像机

模糊

设置模糊属性要通过directionalLight.shadow.radius来设置，值越大代表阴影越模糊，如：

directionalLight.shadow.radius = 100

在这里插入图片描述

阴影贴图算法

通过renderer.shadowMap.type设置，可选的值有4个，性能表现依次下降：
在这里插入图片描述
比如降低原本阴影的分辨率：

directionalLight.shadow.mapSize.width = 256;
directionalLight.shadow.mapSize.height = 256;
// directionalLight.shadow.radius = 100;

使用BasicShadowMap：
在这里插入图片描述
使用默认值PCFShadowMap：
在这里插入图片描述
放大：
在这里插入图片描述

使用PCFSoftShadowMap：
在这里插入图片描述
放大：
在这里插入图片描述
使用VSMShadowMap：
在这里插入图片描述

阴影的其他实现方式

场景中如果实时计算的阴影太多，就会造成性能问题，所以还可以使用静态阴影贴图来实现

比如下面这张图是在3D软件中对球几何体模拟光照导出的阴影贴图
在这里插入图片描述
当位置正确时，阴影的效果是很好的
在这里插入图片描述
既然是静态阴影，那么当物体发生移动时，阴影的效果当然就不尽人意了
在这里插入图片描述
这种阴影属于BakedShadow，可以理解为定制化的阴影，即3D建模完成后，阴影就已经定型了，不应该去动态的修改它，也不好修改

但如果是一个简单的alphaMap阴影，那他修改起来就很方便，比如对于下面这张图：
在这里插入图片描述
想要在几何体下方创建一个plane用来放置阴影图，首先创建一个plane

const sphereShadow = new THREE.Mesh(
  new THREE.PlaneGeometry(1.5, 1.5),
  new THREE.MeshBasicMaterial({
    color: "red",
  })
);
scene.add(sphere, sphereShadow, plane);

默认情况下这个创建出来的plane是面对我们的：
在这里插入图片描述
通过将其绕X轴逆时针旋转Π / 2可以得到朝上的平面

sphereShadow.rotateX(-Math.PI * 0.5);

在这里插入图片描述
将其放到物体下方，也就是底部平面正上方一点点，如：

sphereShadow.position.y = plane.position.y + 0.01;

在这里插入图片描述

这么做是避免出现渲染的冲突，即不应该把两个平面放在同一层，假如放在同一层，会出现下面的glitch效果：
在这里插入图片描述
最后使用阴影图作为alpha贴图即可，对于alphaMap而言，贴图里白色的部分会渲染，黑色的部分会被忽略，注意要设置transparent ：true

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load("/textures/simpleShadow.jpg");
const sphereShadow = new THREE.Mesh(
  new THREE.PlaneGeometry(1.5, 1.5),
  new THREE.MeshBasicMaterial({
    color: "red",
    transparent: true,
    alphaMap: texture,
  })
);

在这里插入图片描述
最后把material的红色改为黑色即可：
在这里插入图片描述
那么，假如遇到物体移动的话，我们也可以很轻松的结合这个方式设置动态的阴影了

举个例子，假如物体在空间中沿着Y轴绕圈，阴影要跟着它动，可以这么实现：

const clock = new THREE.Clock();

const tick = () => {
  const elapsedTime = clock.getElapsedTime();

  controls.update();
  // 球体绕圈旋转：
  sphere.position.x = Math.cos(elapsedTime) * 1.5;
  sphere.position.z = Math.sin(elapsedTime) * 1.5;
  // 更新阴影位置：
  sphereShadow.position.x = sphere.position.x;
  sphereShadow.position.z = sphere.position.z;
  renderer.render(scene, camera);

  // Call tick again on the next frame
  window.requestAnimationFrame(tick);
};

在这里插入图片描述
再比如，如果要让球体弹跳，同时阴影有着明暗程度的变化，用现在的阴影贴图也可以很轻易地实现：

const clock = new THREE.Clock();

const tick = () => {
  const elapsedTime = clock.getElapsedTime();

  // Update controls
  controls.update();
  // 球体绕圈旋转：
  sphere.position.x = Math.cos(elapsedTime) * 1.5;
  sphere.position.z = Math.sin(elapsedTime) * 1.5;
  // 球体弹跳：
  sphere.position.y = Math.abs(Math.sin(elapsedTime * 3));
  // 更新阴影位置：
  sphereShadow.position.x = sphere.position.x;
  sphereShadow.position.z = sphere.position.z;
  // 更新阴影的透明度：
  sphereShadow.material.opacity = (1 - sphere.position.y) * 0.3;
  // Render
  renderer.render(scene, camera);

  // Call tick again on the next frame
  window.requestAnimationFrame(tick);
};

在这里插入图片描述

阴影的实现方案要根据实际场景来决定，贴图的简单动画相比动态的实时计算性能更好，有时牺牲一些物理上的真实性对用户的感知来说其实并不会有太大的影响

搭鬼屋demo记录的一些API

git@github.com:JohnWicc/threejs-hunted-house.git

生成雾

有线性雾和指数雾FogExp2，区别在于雾的变化是线性变化程度还是指数变化程度，都是越远雾越蒙

const fog = new THREE.Fog("#262837", 1, 15);
scene.fog = fog;

setClearColor

可以理解为设置天空颜色，与scene.background在设置颜色时效果相同

// scene.background = new THREE.Color('#red') // 等价
renderer.setClearColor("red", 0.5);

在这里插入图片描述

clock类

threejs内置的时钟，通常用来实现动画的计算，最常用的API是getElapsedTime，可以获取此时此刻的秒数

在这里插入图片描述

const clock = new THREE.Clock();
const tick = () => {
  const elapsedTime = clock.getElapsedTime();

  // update Ghosts
  const ghost1Angle = elapsedTime * 0.5;
  ghost1.position.x = Math.cos(ghost1Angle) * 4;
  ghost1.position.z = Math.sin(ghost1Angle) * 4;
  ghost1.position.y = Math.sin(ghost1Angle * 3);
  // Update controls
  controls.update();

  // Render
  renderer.render(scene, camera);
  // Call tick again on the next frame
  window.requestAnimationFrame(tick);
};

tick();
EtherCoding
关注
Three.js 学习笔记
SSophia的博客
09-18 495
Three.js是一款基于原生WebGL封装的Web 3D库，向外提供了许多的接口。 它可以运用在在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域。
#资源达人分享计划#threejs学习Demo笔记.rar
08-06
【标题】：在这个资源达人分享计划中，我们关注的是"threejs学习Demo笔记.rar"，这是一个关于Three.js库的学习资源，特别聚焦于线条和动画效果的实现。 【描述】：这个压缩包包含了一系列Three.js的源码示例，用于...
threeJS学习笔记（一）
weixin_43024757的博客
07-28 1751
我们人的眼睛就是一台摄像机，我们在正前方画一条垂直于地面直线，那么必定存在两个点使得点到人眼形成的角度之和为75度，以这个75度角发散出去能看到的范围就是。位置，所以此时相当于我们处于立方体的内部，那么从立方体内部往外看，自然什么都看不到，这时候我们需要把摄像机向后移或者把物体往前移动（也就是在Z轴上移动）即可。第二个参数是宽高比，从上图可以看到，看出去的视角范围实际上是一个视锥，底部都是矩形的视觉区域，而每个矩形的宽高比必定为指定的宽高比。此外，threeJS内部也提供了解决方案，使用内置的。
three.js 学习笔记
好好学习天天向上
01-07 1282
渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix，但是不会每渲染一帧，都通过相机的属性计算投影矩阵(节约计算资源)。比如相机的位置属性，改变相机位置也可以改变相机拍照场景中模型的角度，实现模型的360度旋转预览效果，改变透视投影相机距离模型的距离，就可以改变相机能看到的视野范围。没有特定方向，整体改变场景的光照，会均匀的照亮场景中的所有物体。(物体表面)的影响，如果使用受光照影响的材质，在不开灯的情况下是看不见的。反射的光线越多，光越亮，反射的光线越少光越暗。
Three.js学习笔记
FondIllusions的博客
05-17 322
1.three.js的引入 进入官网Three.js – JavaScript 3D Library，下载文件 解压文件，复制three.js-master\build\three.min.js文件 在项目中，引入该文件。 2.
threejs学习笔记（二）
weixin_43024757的博客
08-30 382
拿灯光举例，之所以能看到几何体的某个面，是因为那个面的法线恰好指向我们自己或光源的方向，而其他非正面的方向就有不同程度的阴影或看不到（背面） ，这就是。是一种GPU的计算策略，内部会将一张纹理图不断地拆解成若干个小单元，最后叠加起来构成纹理，同时这样也使得渲染性能得以提升。看左上角的图，一个4x4的正方形可以由4个2x2的正方形构成，一个2x2的正方形可以由4个1x1的正方形构成。的像素为止，所以，使用纹理图时，要确保纹理图的宽高为2的幂次方，如256、512、1024等，否则在。
threejs学习笔记（五）
weixin_43024757的博客
09-18 491
在当前案例中，几何体之间的间距是固定的，在页面上的体现约等于视口的高度，所以要判断屏幕滚动到了第几个几何体，可以通过对。所以为了便于用户理解，要么对X轴取反，要么对Y轴取反，但是对Y轴取反才更符合人对于视角的认知。的效果实现了，但是快与慢的区别还不够明显，所以这里可以再调整一下变化的幅度，通过乘上一个。注意在Y轴方向的取负数操作，因为我们移动的是摄像机，所以相对于原点而言，水平方向。的效果，甚至会因为惯性的存在，让摄像机移动后有一点滞后性的效果。初始时，摄像机在Y轴的位置为0，页面滚动的值是从。
threeJs学习笔记（四）
weixin_43024757的博客
09-11 884
但是这样简单地设置还不够，可能会出现一些问题，比如下面这张图里，有的粒子图片的边缘还存在，会遮挡后面的粒子，有的粒子是正常的。渲染器会在渲染每个像素（物体就是若干个像素绘制出来的）时，计算已经绘制出来的像素与当前要绘制的像素的深度关系。，则物体不会更新深度缓冲区，这意味着之后渲染的对象可能会忽略这个物体的存在，并可能被错误地渲染在其之上。时，物体将会更新深度缓冲区，使得后来渲染的对象可以根据新的深度值进行深度测试。可以看到，粒子的颜色正确地使用上了，现在粒子重叠时是遮挡+覆盖的效果，可以配置。
threejs学习笔记（仅供学习参考）
c_qianxia5040的博客
01-13 1936
更多案例 http://www.yanhuangxueyuan.com/3D.html 物联网粮仓3D可视化案例：http://www.yanhuangxueyuan.com/3D/liangcang/index.html 沙发在线预览： http://app.xuanke3d.com/apps/trayton/#/show 服装在线预览： http://suit.xuantech.cn/ 洗衣机在线交互预览：https://cdn.weshape3d.com/hir001/1021/web/index.
Three.js入门学习笔记
donghua201的博客
04-19 890
three.js是JavaScript编写的WebGL第三方库。
threejs笔记
09-17
### Three.js 基础知识点概述 #### 一、Three.js 概述 Three.js 是一个基于 WebGL 的 3D 库，它简化了 WebGL 的复杂性，使得开发者能够更轻松地创建和显示 3D 图形。Three.js 提供了一系列的 API 和工具，帮助...
WebGL学习教程之Three.js学习笔记(第一篇)
10-17
Three.js是一个js的开源框架，它把webgl的所有东西都封装好了，我们不再需要去了解webgl那些比较麻烦的细节，直接在此框架上进行开发，既方便，又快捷，而且很容易就能学习,感兴趣的朋友跟随小编一起看看吧
MySQL数据库的详细学习步骤
2401_87352036的博客
10-11 1209
MySQL数据库的详细学习步骤可以归纳为以下几个阶段，每个阶段都包含了特定的学习内容和目标。
【人工智能学习之PaddleOCR快速上手】
Jiagym的博客
10-12 1179
在配置文件中，可以设置组建模型、优化器、损失函数、模型前后处理的参数，PaddleOCR从配置文件中读取到这些参数，进而组建出完整的训练流程，完成模型训练，在需要对模型进行优化的时，可以通过修改配置文件中的参数完成配置，使用简单且方便修改。而 L2 正则化中，添加正则化项的目的在于减少参数平方的总和。准确检测的标准是检测框与标注框的IOU大于某个阈值，正确识别的检测框中的文本与标注的文本相同。如果缺少带标注的数据，或者不想投入研发成本，建议直接调用开放的API，开放的API覆盖了目前比较常见的一些垂类。
如何用3个月零基础入门网络安全？_网络安全零基础怎么学习
2401_84466224的博客
10-15 729
我们知道计算机最早是在西方发明出来的，很多名词或者代码都是英文的，甚至现有的一些教程最初也是英文原版翻译过来的，而且一个漏洞被发现到翻译成中文一般需要一个星期的时间，在这个时间差上漏洞可能都修补了。”答案是否定的，黑客用的电脑,不需要什么高的配置,只要稳定就行.因为黑客所使用的一些程序,低端CPU也可以很好的运行,而且不占什么内存.还有一个,黑客是在DOS命令下对进行的,所以电脑能使用到最佳状态!观看学习近十年所有0day挖掘的帖，然后搭建环境，去复现漏洞，去思考学习笔者的挖洞思维，培养自己的渗透思维。
论文及其创新点学习cvpr2022 On the Integration of Self-Attention and Convolution
qq_53536373的博客
10-13 395
论文创新点，将注意力机制 和卷积 相结合。
苍穹外卖学习笔记(二十一)
₍˄·͈༝·͈˄*₎◞ ̑̑的博客
10-13 325
取消订单与再来一单
学习笔记——交换——STP（生成树）基本概念
最新发布
灵韵的博客
10-16 650
端口收到一个BPDU报文后，抽取该BPDU报文中累计根路径开销字段的值，加上该端口本身的路径开销即为累计根路径开销。从一个非根桥到达根桥的路径可能有多条，每一条路径都有一个总的开销值，此开销值是该路径上所有接收BPDU端口的端口开销总和(即BPDU的入方向端口)。STP交换机每一个端口都对应一个开销值，这个值表示数据通过端口发送时的开销，这个值与端口带宽有关，带宽越高，开销值越小。根路径开销是根据交换机之间的网段来说的，本地路径的开销也叫端口开销是针对本地的物理链路来说的相关的IETF的规定为。
Linux内核与基础命令学习总结
helloworld工程师的博客
10-12 947
Linux操作系统Linux操作系统博大精深，其中对线程，IO，文件系统等概念的实现都很有借鉴意义。more​。
WebGL three.js学习笔记 阴影与实现物体的动画
05-30
好的，我会为您解答关于WebGL three.js的阴影与实现物体动画的问题。首先，让我们来了解一下WebGL three.js是什么。 WebGL three.js是一款基于WebGL的JavaScript 3D库，可以帮助我们快速搭建3D场景和应用。接下来我们来讲解阴影和实现物体动画的方法。 一、阴影 阴影是模拟物体之间的阴影效果，让3D场景更加真实。在three.js中，我们可以通过设置Mesh的castShadow和receiveShadow属性来实现阴影效果。 1. 首先，我们需要在场景中添加光源，例如SpotLight或DirectionalLight。 2. 然后，在需要投射阴影的物体上设置castShadow为true。 3. 最后，在需要接收阴影的物体上设置receiveShadow为true。 代码示例： ```javascript // 添加光源 const light = new THREE.SpotLight(0xffffff); light.position.set(0, 100, 0); light.castShadow = true; scene.add(light); // 添加需要投射阴影的物体 const cube = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10), new THREE.MeshLambertMaterial({ color: 0xff0000 })); cube.castShadow = true; scene.add(cube); // 添加需要接收阴影的物体 const plane = new THREE.Mesh(new THREE.PlaneGeometry(200, 200, 1, 1), new THREE.MeshLambertMaterial({ color: 0xffffff })); plane.receiveShadow = true; plane.rotation.x = -Math.PI / 2; scene.add(plane); ``` 二、物体动画 在three.js中，我们可以通过Tween.js库来实现物体的动画效果。Tween.js是一款JavaScript动画库，可以帮助我们实现非常丰富的动画效果。 1. 首先，我们需要在HTML文件中引入Tween.js库文件。 2. 然后，在需要动画的物体上设置初始状态。 3. 最后，通过Tween.js库来设置物体的目标状态和动画效果，例如缓动动画（ease）或弹跳动画（bounce）。 代码示例： ```javascript // 引入Tween.js库文件 <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.min.js"></script> // 添加需要动画的物体 const cube = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10), new THREE.MeshLambertMaterial({ color: 0xff0000 })); cube.position.set(0, 0, 0); scene.add(cube); // 设置初始状态 const start = { x: 0, y: 0, z: 0 }; // 设置目标状态 const end = { x: 50, y: 50, z: 50 }; // 设置动画效果 const tween = new TWEEN.Tween(start) .to(end, 1000) .easing(TWEEN.Easing.Quadratic.InOut) .onUpdate(() => { cube.position.set(start.x, start.y, start.z); }) .start(); ``` 以上是关于WebGL three.js阴影与实现物体动画的方法，希望能够对您有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值