three.js基础杂物
来源:互联网 发布:随机语音聊天软件 编辑:程序博客网 时间:2024/04/29 04:36
/*** 场景(scene) ***/var scene = new THREE.Scene(); // 创建场景scene.add(x); // 插入场景/*** 相机(camera) ***/// 正交投影相机var camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);// 透视头像相机var camera = new THREE.PerspectiveCamera(fov, aspect, near, far); // fov:人眼夹角,aspect:长宽比/*** 渲染器(renderer) ***/var renderer = new THREE.WebGLRenderer(options);// options {} 可选。参数:// canvas:element <canvas></canvas>renderer.setSize(长, 宽);element.appendChild(renderer.domElement); // 插入节点renderer.setClearColor(color, opacity); // 设置清除后的颜色 16进制renderer.clear(); // 清除面板renderer.render(scene, camera); // 渲染/*** 光照(light) ***/new THREE.AmbientLight(颜色); // 环境光new THREE.PointLight(颜色, 强度, 距离); // 点光源new THREE.DirectionalLight(颜色, 亮度); // 平行光new THREE.SpotLight(颜色, 强度, 距离, 夹角, 衰减指数); // 聚光灯/*** 几何形状 ***/new THREE.CubeGeometry(长, 宽, 高, 长的分割, 宽的分割, 高的分割); // 立方体new THREE.PlanGeometry(长,宽, 长的分割, 宽的分割); // 平面new THREE.SphereGeometry(半径, 经度切片, 纬度分割, 经度分割, 经度跨过, 纬度开始, 纬度跨过); // 球体new THREE.CircleGeometry(半径, 切片数, 开始, 跨过角度); // 圆形new THREE.CylinderGeometry(顶部面积, 底部面积, 高, 圆分割, 高分割, 是否没有顶面和底面); // 圆台new THREE.TetrahedronGeometry(半径, 细节); // 正四边形new THREE.OctahedronGeometry(半径, 细节); // 正八边形new THREE.IconsahedronGeometry(半径, 细节); // 正十二边形new THREE.TorusGeometry(半径, 管道半径, 纬度分割, 经度分割, 圆环面的弧度); // 圆环面// 自定义形状var geometry = new THREE.Geometry();geometry.vertices.push(new THREE.Vectory3(x, y, z)); // 点,其中x、y、z为坐标geometry.faces.push(new THREE.Faces3(x, y, z)); // 面,其中x、y、z为点的数组的索引,三点确定一个面/*** 材质 ***/new THREE.MeshBasicMaterial(options); // 基本材质// options {} 可选。参数:// visible:是否可见// color:颜色// wireframe: 是否渲染线而非面// side:THREE.FrontSide 正面,THREE.BackSide 反面,THREE.DoubleSide 双面// map: 贴图new THREE.MeshLambertMaterial(options); // Lambert材质,适合光照// ambient:反射能力// emissive:自发光颜色new THREE.MeshPhongMaterial(); // Phong材质,适合金属和镜面// specular:光罩颜色// shininess:光斑大小(值越大,光斑越小)new THREE.MeshNormalMaterial(); // 方向材质/* 贴图 */var texture = THREE.ImageUtils.loadTexture(url, {}, function(){}); // 载入单个贴图(建议贴图的长宽为256的倍数)new THREE.MeshFaceMaterial() // 设置不同面的贴图,参数为单个贴图的数组texture.wrapS texture.wrapT = THREE.RepeatWrapping // 贴图的重复方式texture.repeat.set(x, y) // 重复次数new THREE.texture(canvas) // 将canvas作为贴图/*** 将模型和贴图结合 ***/var mesh = new THREE.Mesh(形状, 材质);mesh.position // 位置 mesh.position.x(y、z) 或 mesh.position.set(x, y, z)mesh.scale // 缩放mesh.rotation // 旋转/*** 监视FPS ***/var stats = new Stats();stats.domElement // 节点stats.begin() // 开始stats.end() // 结束转载自:http://www.cnblogs.com/duanhaochen/p/5536410.html
阅读全文
0 0
- three.js基础杂物
- three.js 基础入门
- 杂物
- 杂物
- three.js学习笔记 基础1_1
- three.js学习笔记 基础1_2
- linaCharts开发笔记:Three.js基础
- three.js
- three.js
- Three.js
- three.js基础几何体:立方体,球,圆柱的绘制
- JS+THREE.js
- 杂物频道
- 各种杂物
- 【杂物间】
- Three.js API文档
- WebGL three.js
- Three.js GUI
- HTML与JSP页面的区别
- Android Application标签内容详解
- Hadoop实践---导航
- JS的trim()方法
- 网络编程基础
- three.js基础杂物
- blockUI.min.js弹出框使用和bug
- 图像处理之一阶微分应用
- Linux的基本命令
- 《Python核心编程习题》---chapter6
- Oracle中job的使用详解
- Android 中的几种监听方式
- Ubuntu学习日记--Lesson4:环境变量详解
- 基于Caffe的HWDB手写汉字识别