我的three.js学习记录（一）

最新推荐文章于 2024-07-08 09:56:34 发布
最新推荐文章于 2024-07-08 09:56:34 发布
阅读量2k 收藏 2
点赞数
分类专栏： three.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lger_Pro/article/details/78250542
版权
本文记录了作者学习three.js的过程，从简介到基础知识，再到实际操作，包括初始化渲染器、相机和场景，以及创建点和线的步骤。three.js是一个用于WebGL的JavaScript库，简化了3D编程。作者提供了学习资源和初步实现的代码示例。
摘要由CSDN通过智能技术生成

　　在之前因为项目需要使用WebGL技术做网页应用，但是苦于自己没有接触，只是使用过OpenGL。然后接触到了thre.js这个第三方库之后我突然心情很愉快，这将节省我很多时间。
　　过了这个项目之后，就再也没有看过它了，最近翻开我的个人记录发现了在角落边缘堆尘的three.js决定再看一下，然后记录下来以便以后翻看，毕竟多一个技能也挺好的。

three.js简介

three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。
Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。不过，这款引擎目前还处在比较不成熟的开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤其是文档的匮乏）three.js的代码托管在github上面。

这个项目的目标是创建一个易于使用的,轻量级,3 d库。这个库提供<canvas>,< svg >,CSS3D和WebGL渲染器。

以上来自百度百科和Github上面的简介（如果我没有翻译错）
https://baike.baidu.com/item/three.js/7896801?fr=aladdin
https://github.com/mrdoob/three.js/blob/dev/README.md

本人入门three.js时的链接地址
http://www.hewebgl.com/
https://threejs.org/examples/
http://www.cnblogs.com/shawn-xie/archive/2012/08/16/2642553.html
https://www.qcloud.com/community/article/924964?fromSource=gwzcw.149972.149972.149972
http://www.ituring.com.cn/book/1272

最低0.47元/天 解锁文章
lger_Pro
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
three.js学习教程
11-21
three.js的入门初级教程 帮助零基础学习three.js 适合新人
WebGL学习教程之Three.js学习笔记(第一篇)
10-17
Three.js是一个js的开源框架，它把webgl的所有东西都封装好了，我们不再需要去了解webgl那些比较麻烦的细节，直接在此框架上进行开发，既方便，又快捷，而且很容易就能学习,感兴趣的朋友跟随小编一起看看吧
three.js 学习计划制定
weixin_44565776的博客
02-28 292
制定学习计划的目的是为了让效率更高，让学习有目标，学习有成果，让个人技术能力提升更快，所以每三个月就会制定一个学习计划，本期制定的学习目标是前端的WEBGL框架--three.js。3个月的时间太长，目前只制定这个月的计划，今天已经是20号了，2月份还有9天，所以本这次就只制定9天的学习计划。
three.js入门学习
最新发布
m0_73847536的博客
07-08 650
vscode,webpack/vite/其他,Live Server项目开发环境引入：尽量加上版本号。
Three.js学习
CatCat1997的博客
10-11 1328
Three.js 01-three.js 1.three.js资源 GitHub：https://github.com/mrdoob/three.js 官网：https://threejs.org/ 相关库： 库 功能 Physijs Physijs是一款物理引擎，可以协助基于原生WebGL或使用three.js创建模拟物理现象，比如重力下落、物体碰撞等物理现 stats.js JavaScript性能监控器，同样也可以测试webgl的渲染性能 dat.gui 轻量级的icon形用户
three.js 学习心得（一）
qq_41283814的博客
01-05 631
Example 01.02 - First Scene body { /* set margin to 0 and overflow to hidden, to go fullscreen */ margin: 0; overflow: hidden; }
three.js 学习笔记 － 基础之起步
flame_007的博客
01-17 287
最近又重新学习了下three.js，还得从基础学起啊，今天起步学习，最基础的三大组件。 三大组件分别是：场景（scene）、相机（camera）和渲染器（renderer），也就是靠着这三个东东，我们才能将物体渲染到网页中去。 那么这三者是什么关系呢？ 首先，场景是一个物体的容器，开发者可以将需要的物体放入场景中，相机的作用就是把放入场景的物体拍下来，渲染器的作用就是将相机拍摄下来的图片，放...
vue-three.rar基于Three.js
10-13
Vue.js 是一个流行的前端JavaScript框架，它用于构建用户界面，而Three.js则是一个强大的JavaScript库，专注于3D图形渲染。当这两个技术结合时，可以创建出引人入胜的3D交互式Web应用。在本项目中，"vue-three.rar" ...
Three.js配合Webpack的Demo项目
06-05
"threejs-webpack-demo-master"这个压缩包文件很可能包含了以下组件： 1. `src`目录：存放项目源代码，包括入口文件（如`index.js`）、Three.js的使用示例代码、样式表等。 2. `public`或`dist`目录：编译后的输出...
learning-webgl:使用WebGL，Three.js和Babylon.js进行学习–文章，有用的资源，课件，个人笔记
05-08
学习WebGL，GLSL和Three.js 文章，有用的资源，课件，个人笔记工作坊Mapping Festival 2019 /工作坊6·23.05.2019 10h–19h ·（ ·日内瓦·丰德丽·库格勒（Fonderie Kugler），日内瓦代码实验室 ，奥利维尔·兰格...
three.js的学习
qq_52696618的博客
06-27 639
Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。既然Threejs是一款WebGL三维引擎，那么它可以用来做什么想必你一定很关心。所以接下来内容会展示大量基于Threejs引擎或Threejs类似引擎开发的Web3D应用，以便大家了解。
three.js 场景入门
weixin_34278190的博客
11-01 99
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Example 01.02 - First Scene&lt;/title&gt; &lt;script type="text/javascript" src="../libs/three.js"&gt;&lt;/scrip
three.js的学习（一）
yinge0508的博客
12-03 135
1，three.js是什么？ Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。不过，这款引擎还处在比较不成熟的开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤其是文档的匮乏）three.js的代码托管在github上面。 2，三大组件： 场景 scene ; ...
three.js学习（一）
RADI的博客
12-25 291
three.js三要素：场景，相机和渲染器（scene, camera 、renderer） 1、创建场景scene： varscene=newTHREE.Scene(); 2、创建渲染器： varrenderer=newTHREE.WebGLRenderer(); 3、在场景中添加轴 varaxes=newTHREE.AxesHelper(20); scene.add(axes); function init() { // create a scene, t...
three.js 学习1
大灰狼的小绵羊哥哥的博客
11-25 1554
1. 五大因素 　　搭建一个场景必须要的五大因素, 场景, 相机, 光源, 物体, 渲染器 　　结合生活, 场景就是我们身处的环境, 相机是我们的眼睛, 光源和物体见名知意, 渲染器是将我们看到的渲染到网页上, 五大因素也就这样, 那开始搭建环境吧! 2. 开始搭建环境 　　在搭建环境前, 为了使图像渲染在整个网页上, 需要设置 1 body{ 2 margin: 0; 3 /* 消除body外间距 */ 4 overflow: hidden.
Three.js入门学习
今晚吃火锅的博客
09-21 1012
Three.js入门 定义 Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。 资源结构 引入方式 相对路径引入 <script src="./three.js"></script> 绝对路径远程加载 <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></scr
three.js 学习感悟
weixin_34082177的博客
03-23 154
2019独角兽企业重金招聘Python工程师标准>>> ...
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、付费专栏及课程。

余额充值