关于three.js的文档说明

/*** 场景(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() // 结束

时间: 2024-11-09 06:34:35

关于three.js的文档说明的相关文章

使用jsdoc-toolkit实现JS API文档自动化

在前面的博文中探讨自动化工程问题时,写过基于NodeJS的,使用gulp.grunt的jsdoc插件实现文档自动化.本文探讨基于java环境的自动化实现. 一.Java安装与环境配置 关于Java的安装与环境配置,可以参考博文YUI Compressor for Sublime text2 二.jsdoc-tookit下载与使用 下载链接:jsdoc-tookit,现在地址可能被墙了,可以通过搜索其它渠道下载.下面完成后,解压到工作目录即可. -> cmd -> 命令行窗口 -> cd到

Grunt-jsdoc生成JS API文档

具体的请看官网 https://github.com/krampstudio/grunt-jsdoc 一:首先确保本机电脑上是否已经安装了nodejs和npm.具体安装过程可以看如下: http://www.cnblogs.com/tugenhua0707/p/3497488.html 二: 在安装grunt-jsodc之前,我们先要安装grunt,因此我在F盘下 新建文件夹gruntJSDoc 其中根目录里面新建一个package.json文件,内容如下: { "name": &qu

openoffice+jquery.media.js实现文档在线预览

1.功能: 实现Windows环境下文档在线预览功能,支持.doc..docx..xls..xlsx..ppt..pptx..pdf格式的文档,对IE浏览器不太兼容.如要实现Linux环境下文档在线预览功能,改变相应配置和代码,要安装Linux版的OpenOffice. 2.所需组件: (1)OpenOffice4.0.1 : 下载地址:http://pan.baidu.com/s/1hsQkhzm (2)jquery.media.js: 下载地址:http://pan.baidu.com/s/

JS/JQuery 文档加载完成

1. $(function(){...}); 文档树加载完执行的方法:(注意:不包括图片.css.js等文件): 一个页面中可以有多个$(function(){...}); 方法: 两种写法: //第一种 $(document).ready(function(){ ... }) //第二种(第一种的简写) $(function(){ ... }); 2. $(window).onload(function(){...}); 文档树及其所有文件加载完之后执行的方法(所有文件加载完,eg:图片.js

node.js部署文档(Linux版)

常用命令 新建项目(需要到该项目文件目录下执行,否则日志会报错) pm2 start bin/www  - i  max  - - name  ijhealth 只开启一个线程 node  bin/www (没有进程守护) 开启项目 pm2  start    项目名称 关闭项目 pm2  stop    项目名称 重启项目 pm2  restart  项目名称 删除项目 pm2  delete  项目名称 列出项目 pm2  list 查看进程详细信息 pm2 show 0  /   pm2

slide.js使用文档

<!doctype html> <head> <script src="js/jquery-latest.min.js"></script> <script src="js/jquery.slides.min.js"></script> <style> /* Prevents slides from flashing */防止闪烁 #slides { display:none; }

js获取文档元素

我们通常对一个html的元素进行操作,那么怎么获取html元素呢?通常有一下几个方法: 1.通过ID选取元素 var element=document.getElementById("idName"); 2.通过名字选取 var radios=document.getElementsByName("favaColor"); 3.通过标签名获取元素 var menu = document.getElementById("menu"); var el

js获取文档高度

网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正文全文宽: document.body.scrollWidth网页正文全文高: document.body.scrollHeight网页被卷去的高: document.body.sc

JQuery之JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案

JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案 JQuery的版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的版本</title> <