一、辅助类简介
Three.js 提供了一些辅助类(Helpers)以帮助我们更容易地调试、可视化场景中的元素。
2024年09月08日
[Three.js](https://threejs.org/) 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景。
Three.js学习之前,我们需要了解他的三个关键对象:
1. 场景(场景对象是所有不同对象的容器,也就是说该对象保存所有物体、光源、摄像机以及渲染所需的其他对象)
2. 相机(Camera相当于人的眼睛,从坐标的那个视点去观察目标,相当于投影出立体感。)
3. 渲染器(渲染器可以视为是canvas标签,相机可以视为画布。注意画布和canvas标签不是同一个东西,canvas标签是画布的容器。画布就好比一张图片,而canvas标签就像img标签)
2024年09月08日
Oimo.js和three.js是两个广泛使用的JavaScript库,用于在Web上创建3D场景,特别是游戏。Oimo.js提供了一个功能强大的物理引擎,可模拟现实世界中的物理规律,例如重力和碰撞等。而three.js则负责进入模型、渲染画面并添加用户交互等。
为了使用这两个库,首先需要将它们嵌入到HTML文档中。以下代码段展示了如何使用本地链接来引用这些库:
2024年09月08日
canvas画2d相信大家都很熟悉了,但3d世界更加炫酷。我们直接从three.js入手。下面我们从0开始来摸索一下3d世界
在THREEjs中,渲染一个3d世界的必要因素是场景(scene)、相机(camera)、渲染器(renderer)。渲染出一个3d世界后,可以往里面增加各种各样的物体、光源等,形成一个3d世界:
场景:右手坐标系,一切要素都在场景里面,相当于“世界”,包括各种物质和物理变化
2024年09月08日
WebGL(Web Graphics Library)
一种3D绘图协议,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。
2024年09月08日
大家好,我是yangyang.最近工作中在接触基于threejs实现的vr全景阅读器photo-sphere-viewer插件来做vr装修编辑器,使用过程中遇到关于视角调整的问题,并开始对欧拉角的概念有了一些认识.
2024年09月08日
我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第1篇文章,点击查看活动详情
点赞 + 关注 + 收藏 = 学会了
渲染阴影效果需要消耗一定的资源,所以 Three.js 默认是关闭阴影效果的。
想要在 Three.js 中实现阴影效果,只需记住接下来要讲的几个点即可。
本文要实现的效果
2024年09月08日
纹理贴图(Textures)字面意思就是給几何体对象贴上不同的纹理图!好比于我们每天选择穿不同的衣服,我们穿不同的衣服带来的感官会有很大变化!同理几何体不同贴图的视觉效果也会有千差万别。纹理贴图是 Three.js一个很重要的内容,掌握了纹理贴图可以让3d效果产生质的飞跃。