three.js 学习笔记(一)-简介及环境安装

前言
该笔记为日常记录,我只是简单的将学习过程中一些较为重要的学习心得,重要的知识点记录下来,有什么错误的地方
请在评论区指出,谢谢,个人原创,请勿转载
一,three.js是three+js的总和,three字面意思3,既是3D的意思,js表示javascript的意思。three.js就是用javascipt,写出能在
浏览器上运行的3D程序。
二.现在浏览器基本都支持3D,并且能写出很好的3D程序
三.几个相当令人震撼的demo,激发了我一定要学习three.js的兴趣
1. http://aleksandarrodic.com/p/jellyfish/  (水母)

2.https://yz.lol.qq.com/zh_CN/map/index.html  (联盟宇宙地图)

3.https://heraclosgame.com/  (一个简单的3D游戏 )
四.他的来历
three.js 源自github上一个开源项目,发展十分迅速。代码下载地址:
 https://github.com/mrdoob/three.js
一些demo和简易教程的地址:
https://threejs.org/  
五.下载的three.js目录剖析

Build目录:包含两个文件,three.js 和three.min.js 。这是three.js最终被引用的文件。一个已经压缩,一个没有压缩的js文件。

Docs目录:这里是three.js的帮助文档,里面是各个函数的api,可惜并没有详细的解释。试图用这些文档来学会three.js是不可能的。

Editor目录:一个类似3D-max的简单编辑程序,它能创建一些三维物体。

Examples目录:一些很有趣的例子demo,可惜没有文档介绍。对图像学理解不深入的同学,学习成本非常高。

Src目录:源代码目录,里面是所有源代码。

Test目录:一些测试代码,基本没用。

Utils目录:存放一些脚本,python文件的工具目录。例如将3D-Max格式的模型转换为three.js特有的json模型。

.gitignore文件:git工具的过滤规则文件,没有用。

CONTRIBUTING.md文件:一个怎么报bug,怎么获得帮助的说明文档。

LICENSE文件:版权信息。

README.md文件:介绍three.js的一个文件,里面还包含了各个版本的更新内容列表。

第一个例子.

建议用chrome浏览器调试。编辑器我用的是DW,建议用webstom,有更好的javascipt代码提示

打开chrome的代码调试,找到控制台:输入THREE.REVISION,查看three.js版本号

到这一步,如果能查看版本号,说明three.js映入成功了

注意:从github上下载,非常慢,因为国内被墙了,建议更换代理:

方法为打开C:\Windows\System32\drivers\etc\hosts 文件,向文本中添加代理ip,

我们可以利用https://www.ipaddress.com/ 来获得以下两个GitHub域名的IP地址:

(1) github.com

(2) github.global.ssl.fastly.net

然后 填入格式为

ip github.com

然后进入控制台输入ipconfig/flushdns 再次前往下载,可以看到网速提高

  • 0
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我会为您解答关于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、付费专栏及课程。

余额充值