three.js 笔记1

最新推荐文章于 2023-06-07 00:33:04 发布
最新推荐文章于 2023-06-07 00:33:04 发布
阅读量125 收藏
点赞数
分类专栏： three.js 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/workhard0905/article/details/120546936
版权

最近在学习three.js的内容 想着把学习的内容整理成笔记 方便以后使用

在场景中 产生使物体产生阴影的方法

1.给渲染器设置 shadowMapEnabled的属性值为true

2.明确指定哪个物体投射阴影

3.指定哪个物体接收投影

4.定义能够产生阴影的光源，将光源的castShadow的属性值设置为true

只有这些条件都具体了 才能产生阴影效果

renderer.shadowMapEnabled = true

plane.receiveShadow = true; //平面对象接收投影

cube.castShadow = true; //立体模型对象产生投影

spotLight.castShadow = true; //光源产生阴影

天空中的星~
关注
专栏目录
使用Three.JS以及A*寻路算法制作自动寻路场景（四）使用A*寻路算法和requestAnimationFrame函数实现寻路场景
每天学习一点点
07-21 3084
本节主要内容： javascript A*寻路算法astar.js使用简介 使用astar.js获得连接起止点的路径矩阵 使用requestAnimationFrame函数实现寻路场景 本节最终效果图如下： javascript A*寻路算法astar.js使用简介 该项目Github地址为： http://github.com/bgrins/javascript-astar 实现...
使用Three.JS以及A*寻路算法制作自动寻路场景（一）DEMO简介及环境部署
每天学习一点点
07-19 5129
先上一波完成效果图，由于是自学，在此仅仅分享自己的一些见解，有不当之处还请大家指教！ 1.DEMO简介 本DEMO使用Three.js作为主要开发工具，开发过程主要分为两个部分： 首先是使用Three.js实现A*寻路算法，效果图如下： 具体功能： 1.自动生成地图 2.根据选定开始及结束位置计算路线（涉及构造器，raycaster的使用） 3.播放寻路动画（requestA...
threejs-kibus:aStar寻路
07-02
Kibus 3D 在这个 repo 中只执行算法 A * 来寻找最短路径，它与其他 repository 不同，因为它是使用 Three.js 制作的。 笔记 在推送之前，完整的 repo 留在损坏的计算机上
Threejs中使用astar(A*)算法寻路导航，Threejs寻路定位导航
左本Web3D
07-07 2504
1，介绍 该示例使用的是 r95版本Three.js库。利用A*算法实现寻路、导航功能。添加坐标轴。 效果图如下： 2，主要说明 引入A*算法astar.js <script type="text/javascript" src="libs/astar.js"></script> 初始化路网、障碍物，记录路网、障碍物位置信息 // 绘制路网 function initGround() { var geometry = new THREE.Geom.
Threejs进阶之十七：Threejs中的Path、Shape和ShapeGeometry类
九仞山的专栏
06-07 2095
详细介绍了Threejs中的Path、Shape和ShapeGeometry类
使用Three.JS以及A*寻路算法制作自动寻路场景（五）使用多view绘图实现小地图功能
每天学习一点点
07-22 3374
本节内容： 使用多view渲染同一场景方法简介 套用此方法，实现小地图功能，完成本DEMO 本节最终效果图： 使用多view渲染同一场景方法简介 主要参考的three.js官方案例（https://threejs.org/examples/?q=orb#webgl_multiple_views），效果如下： 查看本案例源代码，要实现多view渲染，需要定义一个views数组，存放...
three.js 打造游戏小场景（拾取武器、领取任务、刷怪）
weixin_41770018的博客
05-12 188
theme: qklhk-chocolate 预览 场景创建 底板创建 创建底板时，需考虑底板的可扩展性，比如修改任意尺寸，所以在创建时，先定义几个基础数据 typescript let len = 100 const size = 1 const y = size / 2 len为底板的尺寸，宽度和高度，size为每一个障碍物的尺寸，y为障碍物体的高度位置， ```typ...
Three.js线条光波动画特效.zip
10-08
Three.js是JavaScript的一个开源库，它为开发者提供了在Web浏览器中进行3D图形编程的能力，无需深入学习底层的WebGL API。 首先，理解Three.js的基本概念至关重要。Three.js提供了一个完整的框架，包括场景(Scene)...
Three.js碎片化图片切换特效.zip
10-08
1. **Three.js**：Three.js的核心功能是通过WebGL API在浏览器中渲染3D模型和场景。这个库简化了WebGL的复杂性，为开发者提供了丰富的3D对象（如几何体、材质、光源等）和动画控制。在本案例中，Three.js被用来创建...
Three.js笔记分享
最新发布
01-10
Three.js笔记分享
使用three.js实现室内路径规划demo
05-21
使用three.js基于已有的路径和节点数据 使用d算法实现室内地图点选路径规划 具体效果参见我的博客：https://blog.csdn.net/u014529917/article/details/100424812
javascript实现astar算法和demo
01-12
用javascript做的astar寻路算法和demo，用起来很方便
javaScript AStar 寻路算法
12-24
javaScript AStar 寻路算法。demo可以直接运行，方便大家相互学习。
three.js三维图形图表特效.zip
10-15
1. **对象模型**：three.js包含了各种3D几何形状（如球体、立方体、平面等）以及导入3D模型（如OBJ或FBX格式）的工具。 2. **材质与纹理**：可以设置不同类型的材质，如基础材质、金属材质、多材质等，并可以添加...
html5+three.js彩色液态流动背景动画特效.zip
09-27
Three.js是一个基于WebGL的JavaScript 3D库，它简化了在浏览器中创建3D图形的过程。 首先，`index.html`是网站的入口文件，包含了网页的基本结构和引用资源。在HTML5中，`<canvas>`元素是用于绘制2D或3D图形的重要...
Threejs中使用A*算法寻路导航，Threejs室内室外地图导航
左本Web3D
07-08 2702
1，介绍 该示例使用的是 r95版本Three.js库。这里利用A*算法实现室内室外寻路、导航功能。 效果图如下： 2，主要说明 1，初始化路网 2，设置路障，我这里是使用鼠标点击设置路障，如下图 3，调用算法传入路网数据实现导航 3，源码 <!DOCTYPE html> <html> <head> <title>Threejs中使用A*算法寻路导航，Threejs室内室外地图导航</title> ...
基于HT for Web的3D呈现A* Search Algorithm
HT for Web 3D
11-24 238
最近搞个游戏遇到最短路径的常规游戏问题，正巧看到老同事写的3D机房最短路径巡线文章，一时起兴基于HT for Web写了个A*算法的WebGL 3D呈现，算法基于开源 https://github.com/bgrins/javascript-astar 的javascript实现，其实作者也有个不错的2D例子实现 http://www.briangrinstead.com/files/ast...
GameAI 运动与寻路
JasonSparrow_1的博客
01-07 208
第一部分 第二部分 第三部分 第四部分
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、付费专栏及课程。

余额充值