![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
WebGL
Spider_man_
这个作者很懒,什么都没留下…
展开
-
three.js(6):屏幕点击与鼠标的交互(Raycaster的用法)
参考:光线投射器(Raycaster)、ThreeJS中的点击与交互——Raycaster的用法该类用来处理光线投射。光线投射主要用于物体选择、碰撞检测以及图像成像等方面。坐标系概念我们的手机屏幕是二维的,但是我们展示物体的世界是三维的,当我们在构建一个物体的时候我们是以一个三维世界既是世界坐标来构建,而转化为屏幕坐标展示在我们眼前,则需要经历多道矩阵变化,中间webGL替我们操作了许多事情。世界坐标系:在webGL中,世界坐标系是以屏幕中心为原点(0, 0, 0),且是始终不变的。你面原创 2020-08-28 23:36:04 · 4106 阅读 · 0 评论 -
three.js(5):纹理贴图和遇到的问题
完整代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>正方体贴图</title> <style> .body{ margin: 0; overflow: hidden; } </style> </head> <body> </body>原创 2020-08-27 10:55:59 · 2426 阅读 · 3 评论 -
three.js(4):加载外部3维模型
参考:http://www.yanhuangxueyuan.com/Three.js_course/stl.html直接使用three.js编程建模比较麻烦,实际开发的时候往往会借助一些可视化的3D建模工具,比如SolidWorks、Blender、C4D、3Dmax。不同领域的三维软件支持导出的文件有所差异,比如工业设计、机械设计类的三维软件往往支持导入静态的3D模型,游戏开发常常使用的Blender等三维软件,除了静态的三维模型,还可以导出含有动画信息的三维模型。three.js针对不同的文件格式,原创 2020-08-26 20:42:04 · 2309 阅读 · 1 评论 -
three.js(3):点、线、面(颜色插值,几何体三种渲染方式)
参考:http://www.yanhuangxueyuan.com/Three.js_course/face.html直线模型对象两个顶点确定一条直线,构造函数THREE.Vector3()可以用来创建一个顶点位置,下面代码中Vector3(10,0,0)表示三维笛卡尔坐标系中顶点坐标(10,0,0), vertices是几何体对象的顶点坐标属性,从Javascript语言的角度看vertices是数组对象,push()是Javascript语言支持的方法, 用于给数组增加元素。<原创 2020-08-26 09:53:00 · 4376 阅读 · 2 评论 -
three.js(1)参考文档、资料,结构介绍
官网:https://threejs.org/中文文档http://www.yanhuangxueyuan.com/threejs/docs/index.htmlgithub:https://github.com/mrdoob/three.js/releasesjs文件放在了百度云下载的three.js目录说明原创 2020-08-24 15:05:58 · 424 阅读 · 0 评论 -
three.js(2):第一个3d场景(几何体、透明度和高光、旋转、鼠标操作)
1,第一个3D图形<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>第一个three.js文件_WebGL三维场景</title> <style> body { margin: 0; overflow: hidden; /* 隐藏body窗口区域滚动条 */ }原创 2020-08-24 09:20:42 · 1082 阅读 · 0 评论 -
WebGL(2):绘制立方体
实现的基本思路很简单,首先提供如上图所示立方体线框所有顶点的三维坐标,然后通过旋转矩阵对所有顶点进行旋转变换,最后调用绘制函数gl.drawArrays把所有点连成线渲染出来。完整代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body><canvas id="webgl" width="500" heig原创 2020-08-21 16:10:48 · 1172 阅读 · 1 评论