随笔分类 - 前端 / THREE.js / 学习笔记
摘要：这一小节主要学习材质 材质用于为几何物理模型的每个可见像素添加颜色。 Materials are used to put a color on each visible pixel of the geometries. 决定每个像素颜色的算法是在程序中编写的，称为着色器。 Three.js 具有许多
阅读全文
摘要：这个小节主要学习纹理，Texture 纹理是覆盖几何形状表面的图像，不同类型的纹理具有多种不同的效果。 这些纹理（尤其是金属性和粗糙度）遵循PBR原则 基于物理的渲染 许多技术往往遵循现实生活中的方向以获得现实的结果 成为现实渲染的标准 许多软件、引擎和库都在使用它 如何加载纹理？ 首先引入一张图片
阅读全文
摘要：这小节学习的是如何构建Debug UI 对于一些具有创造性的项目，可能会有很多个变量，Debug UI可以让开发人员，设计师，甚至是客户都能轻松调整这些变量 安装lil-gui，直接npm install lil-gui 大部分的参数调整，都可以通过gui.add()来添加，gui.add()含有两
阅读全文
摘要：这一小节学习THREE.js中的物理模型。 什么是geometry？(英文解释，翻译为中文就看不懂了，直接看英语吧) Composed of vertices (point coordinates in 3D spaces)and faces (triangles that join those v
阅读全文
摘要：这一小节学习Fullscreen and Resizing 将THREE.js渲染的结果铺满整个屏幕，以及避免出现蓝色边框和超过画面限制的滚动 renderer.setSize(window.innerWidth, window.innerHeight) * { padding: 0; margin
阅读全文
摘要：这一小节主要学习相机。 在之前的小节里面，创建了透视相机ProspectiveCamera，但是还有在THREE.js中还有很多其他的相机。 ArrayCamera ArrayCamera可用于使用一组预定义的相机高效地渲染场景。这是渲染 VR 场景的一个重要性能方面。 StereoCamera S
阅读全文
摘要：这一小节主要学习动画。 在JavaScript中的动画，其实就是渲染一帧，停顿一会儿，再渲染一帧。所以我们需要在每一帧都更新物体和重新渲染。 调用window.requestAnimationFrame();函数来实现。 The purpose of requestAnimationFrame is
阅读全文
摘要：这一小节主要学的是关于物体的位置移动，旋转，缩放一系列操作。 Vector3 mesh网格物理模型中的position属性是继承于Vector3的。Vector3是一个类，用于定位空间中的东西。 Vector3有很多有用的方法。例如Vector3中介绍的 //打印模型到场景中心的距离 console
阅读全文
摘要：实现在页面中央渲染一个红色的正方体，并且上下拖动屏幕可以翻转它。 代码来源 Three.js中文网 记录以下实现步骤。方便自己复习。 在vue项目中导入THREE.js // 使用npm安装 npm install three // 安装某个固定版本 npm install three@0.148.
阅读全文
