ThreeJs
关注
分享
扫一扫
@lazypet~
let me get better
展开
-
ThreeJs顶点数据复用
1、实现步骤1、创建空几何体的顶点索引数据（类型数组）2、设置几何体的index属性（将顶点索引赋给空几何体）2、思维导图3、关键代码 /** * 创建网格模型 */ var geometry = new THREE.BufferGeometry(); //声明一个空几何体对象 //类型数组创建顶点位置position数据 var vertices = new Float32Array([ 0, 0, 0, //顶点1坐标 80原创 2020-06-26 23:57:58 · 619 阅读 · 0 评论 -
ThreeJs顶点法向量光照计算
1、实现步骤1、创建空几何体的法向量数据（类型数组）2、创建属性缓冲区对象（生成法向量）3、设置几何体的attributes属性的位置normal属性（将顶点赋给空几何体）2、意义功能法向量可以与光源进行光照计算，来实现几何体的棱角感3、思维导图4、关键代码 var normals = new Float32Array([ 0, 0, 1, //顶点1法向量 0, 0, 1, //顶点2法向量 0, 0, 1, //顶点3法向量 0, 1,原创 2020-07-07 16:26:22 · 1585 阅读 · 0 评论 -
ThreeJs顶点颜色信息渲染
1、实现效果线和面都会根据顶点的颜色进行渐变1、点渲染2、线渲染3、面渲染2、思维导图3、实现流程1、创建一个空几何体2、创建空几何体的顶点位置数据（类型数组）3、创建属性缓冲区对象（生成顶点）4、设置几何体的attributes属性的位置position属性（将顶点赋给空几何体）5、创建空几何体的顶点位置数据（类型数组）6、创建属性缓冲区对象（生成RGB颜色）7、设置几何体的attributes属性的颜色color属性（将颜色赋给空几何体）4、关键代码1、点渲染 /原创 2020-07-07 16:26:41 · 2045 阅读 · 0 评论 -
ThreeJs顶点位置数据渲染
1、ThreeJs通过顶点位置信息来渲染有三种渲染模式点 线 面2、思维导图3、完整源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>第一个three.js文件_WebGL三维场景</title> <style> body { margin: 0; overflow: hid原创 2020-07-07 16:26:52 · 1025 阅读 · 0 评论 -
ThreeJs 初识material
1、材质常见属性2、材质类型原创 2020-06-25 23:06:14 · 375 阅读 · 0 评论 -
ThreeJs案例四 场景中添加多个立方体（网格模型）
1、实现步骤1、找到threejs下的doc文件下的index.html2、右击index.html open with live serve3、搜索geometry 找到你想要添加的几何体的api添加即可4、设置位置1、通过mesh2.translateY(120);2、通过mesh3.position.set(120,0,0);5、常用的几何体//长方体 参数：长，宽，高var geometry = new THREE.BoxGeometry(100, 100, 100);/原创 2020-06-25 18:03:40 · 3878 阅读 · 0 评论 -
ThreeJs案例三 控件旋转缩放放大
1、实现步骤1、引入控件文件<script src="../node_modules/three/examples/js/controls/OrbitControls.js"></script>2、创建控件对象 var controls = new THREE.OrbitControls(m_Camera,m_Renderer.domElement);//创建控件对象3、为控件对象添加事件监听函数controls.addEventListener('change',原创 2020-06-25 14:05:06 · 2933 阅读 · 1 评论 -
ThreeJs案例二——旋转的立方体
1、实现步骤1、Mesh.rotateY(k) k为每次刷新旋转的弧度2、requestAnimationFrame(render)请求再次执行渲染函数render2、理解requestAnimation1、其实这个函数和setInterval功能类似，但是setInterval的时间确定了，而requestAnimation时间不是确定的，会有一个浮动值，这与当前cpu的负荷状态相关3、思维导图4、关键代码function render(){ m_Renderer.render(m原创 2020-06-24 20:37:45 · 735 阅读 · 0 评论 -
ThreeJs—创建第一个案例
ps：该文章为本人学习ThreeJs的笔记，可能有不对的地方1、ThreeJs程序框架1、场景sence2、网格模型mesh几何体 geometry几何体材质 material3、光源点光源 point（需调位置）环境光源 ambient4、相机camera（需调相机的位置以及摄像头的朝向位置）5、渲染器render6、挂载将渲染器生成的canvas对象挂载到dom上2、思维导图3、案例代码：/* 创建场景Scene*/var m_Scene = new THRE原创 2020-06-24 14:13:29 · 501 阅读 · 0 评论 -
ThreeJs使用live-server本地访问example
1、下载Three.js包可以在github上下载下载链接2、node环境下全局安装live-servernpm install -g live-server3、打开CMD命令行cd到three.js解压目录 运行下面的指令live-server原创 2020-06-23 04:31:15 · 632 阅读 · 0 评论