Three.js学习
苏喂苏喂苏喂su
这个作者很懒,什么都没留下…
展开
-
obj + mtl 格式说明
OBJ(或 .OBJ)是一种开放的几何定义文件格式,最初由Wavefront Technologies公司开发,用以描述其Advanced Visualizer动画包。该格式已被其他3D图形应用供应商采纳,是一种被绝大多数普遍公认的格式。OBJ文件格式为简单数据格式,它仅表现3D几何体,即顶点的位置、以顶点列表方式定义每个多边形的顶点、法向量和面的UV坐标,以及纹理顶点。顶点默认以逆时针方向存储...转载 2018-12-03 10:23:35 · 5012 阅读 · 2 评论 -
three.js 加载obj+mtl时,添加点击事件,自适应页面大小.
HTML部分:<!DOCTYPE html><html><head> <meta charset="gb2312"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="原创 2019-01-02 23:36:51 · 1497 阅读 · 0 评论 -
THREE.JS学习笔记五:场景添加天空盒子
创建天空盒子:var path = "img/"; //设置路径var format = '.jpg'; //设定格式var urls = [ path + 'newimg'+ format, // left ...原创 2019-01-16 21:48:50 · 1329 阅读 · 0 评论 -
THREE.JS学习笔记四:材质
材质(Material)是独立于物体顶点信息之外的与渲染效果相关的属性。通过设置材质可以 改变物体的颜色、纹理贴图、光照模式等。 1、基本材质(BasicMaterial)THREE.MeshLambertMaterial(opt),opt 可以缺省,或者为包含各属性的值。如新建一个不透明度为 0.75 的黄色材质:new THREE.MeshBasicMaterial({ c...原创 2019-01-11 22:08:24 · 305 阅读 · 0 评论 -
THREE.JS学习笔记三:基本几何形状
立方体THREE.CubeGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)width 是 x 方向上的长度; height 是 y 方向上的长度; depth 是 z 方向上的长 度;后三个参数分别是在三个方向上的分段数,如 widthSegments 为 3 的话,代表 x 方 向上水...原创 2019-01-07 22:37:44 · 1116 阅读 · 0 评论 -
THREE.JS学习笔记二:照相机
我们使用 Three.js 创建的场景是三维的,而通常情况下显示屏是二维的,那么三维的场景 如何显示到二维的显示屏上呢?照相机就是这样一个抽象,它定义了三维空间到二维屏幕 的投影方式,用“照相机”这样一个类比,可以使我们直观地理解这一投影方式。照相机分正交投影和透视投影(图片来源于Three.js入门指南)(a)透视投影,(b)正交投影正交投影照相机(Orthographic ...原创 2019-01-05 01:12:02 · 1346 阅读 · 0 评论 -
THREE.JS学习笔记一:three.js中的对象
一个典型的 Three.js 程序至少包括渲染器(Renderer)、场景(Scene)、照相机 (Camera),以及在场景中创建的物体。three.js中的一些重要对象:Cameras(照相机,控制投影方式):CameraOrthographicCameraPerspectiveCameraCore(核心对象):BufferGeometryClock(用来记录时...原创 2019-01-03 22:31:43 · 630 阅读 · 0 评论 -
three.js 加载obj+mtl时,添加点击事件,自适应页面大小
HTML部分:<!DOCTYPE html><html><head> <meta charset="gb2312"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="原创 2019-01-17 21:39:36 · 3003 阅读 · 1 评论 -
three.js -- 光源类型
环境光( AmbientLight ):笼罩在整个空间无处不在的光点光源( PointLight ):向四面八方发射的单点光源聚光灯( SpotLight ):发射出锥形状的光, 模拟手电筒,台灯等光源平行光( DirectinalLight ):平行的一束光,模拟从很远处照射的太阳光 ...原创 2018-12-14 16:39:04 · 419 阅读 · 0 评论 -
THREE.JS学习六 -- 创建线条
创建线条: var geometry = new THREE.Geometry(); geometry.vertices.push( new THREE.Vector3( -10, 0, 0 ), new THREE.Vector3( 0, 10, 0 ), new THREE.Vector...原创 2019-05-17 17:13:01 · 608 阅读 · 2 评论