three.js 常用api
2024-04-13 09:45:16
three.js 常用api
场景
创建场景
var scene = new THREE.Scene();
插入场景
scene.add(x);
相机
正交投影相机
var camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);
透视头像相机
// fov：人眼夹角，aspect：长宽比，near：近平面，far：远平面
var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
渲染器（renderer）
var renderer = new THREE.WebGLRenderer(options);// 长宽
renderer.setSize(长, 宽);// 插入节点 element：节点
element.appendChild(renderer.domElement);// 设置清除后的颜色 16进制 opacity：透明度
renderer.setClearColor(color, opacity);// 清除面板
renderer.clear();// 渲染 scene：场景，camera：相机
renderer.render(scene, camera);
options：渲染器参数
options {} 可选。参数：
canvas：element <canvas></canvas>
光照(light)
// 环境光 颜色：16进制
new THREE.AmbientLight(颜色);// 点光源 颜色：16进制，强度：强度，距离：距离
ew THREE.PointLight(颜色, 强度, 距离);// 平行光 颜色：16进制，亮度：亮度
new THREE.DirectionalLight(颜色, 亮度);// 聚光灯 颜色：16进制，强度：强度，距离：距离，夹角：夹角，衰减指数：衰减指数
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();// 点，其中x、y、z为坐标 创建点
geometry.vertices.push(new THREE.Vectory3(x, y, z));// 面，其中x、y、z为点的数组的索引，三点确定一个面 创建面
geometry.faces.push(new THREE.Faces3(x, y, z));
材质
基本材质
new THREE.MeshBasicMaterial(options);
options
options {} 可选。参数：visible：是否可见color：颜色wireframe: 是否渲染线而非面side：THREE.FrontSide 正面，THREE.BackSide 反面，THREE.DoubleSide 双面map: 贴图
Lambert材质，适合光照
new THREE.MeshLambertMaterial(options);
options
options {} 可选。参数：ambient：反射能力emissive：自发光颜色
Phong材质，适合金属和镜面
new THREE.MeshPhongMaterial();
options
options {} 可选。参数：specular：光罩颜色shininess：光斑大小（值越大，光斑越小）
方向材质
new THREE.MeshNormalMaterial();
贴图
// 载入单个贴图（建议贴图的长宽为256的倍数） url：贴图的地址 options：参数
var texture = THREE.ImageUtils.loadTexture(url, {}, function() {});// 设置不同面的贴图，参数为单个贴图的数组
new THREE.MeshFaceMaterial()// 贴图的重复方式 texture.repeat.x texture.repeat.y = 1 // 贴图的重复次数
texture.wrapS texture.wrapT = THREE.RepeatWrapping// 重复次数 texture.offset.x texture.offset.y = 0 // 贴图的偏移量
texture.repeat.set(x, y)// 将canvas作为贴图
new THREE.texture(canvas)
将模型和贴图结合
// 创建模型 形状：几何体 材质：材质
var mesh = new THREE.Mesh(形状, 材质);// 位置 mesh.position.x（y、z） 或 mesh.position.set(x, y, z) // 设置位置
mesh.position// 缩放 mesh.scale.x（y、z） 或 mesh.scale.set(x, y, z) // 设置缩放
mesh.scale// 旋转 mesh.rotation.x（y、z） 或 mesh.rotation.set(x, y, z) // 设置旋转
mesh.rotation
监视FPS
var stats = new Stats();// 节点 stats.domElement.style.position = 'absolute'; // 将节点置于页面的最上方
stats.domElement// 开始
stats.begin()// 结束
stats.end()// 更新
stats.update()
otation
## 监视FPS```js
var stats = new Stats();// 节点 stats.domElement.style.position = 'absolute'; // 将节点置于页面的最上方
stats.domElement// 开始
stats.begin()// 结束
stats.end()// 更新
stats.update()
three.js 常用api相关推荐
- js find的用法_React常用库Immutable.js常用API
JavaScript 中的对象一般是可变的(Mutable),因为使用了引用赋值,新的对象简单的引用了原始对象,改变新的对象将影响到原始对象.如 foo={a: 1}; bar=foo; bar.a= ...
- JS常用API（结合代码案例简单易懂）
API:应用程序编程接口,在JS下表示预定义的函数和方法,可以直接调用功能. 目录 一.数组API 二.字符串API 三.MathAPI 如何学习一个API: 作用.参数.返回值 学习数组API还 ...
- 【go.js 常用api管理】
GO.JS api整理 画布定义 布局 画布的监听事件 node api link Api go.js 监听事件 基础事件 右键菜单(contextMenu) 画布定义 go.js api[Const ...
- 原生js获取document_原生JS常用API整理
Anchor 对象:指HTML超链接 1.修改一个链接的文本,链接和target //html部分 访问 Microsoft 改变超链接的文本和 URL.也改变 target 属性.target 属性 ...
- Atitit.跨语言 java c#.net php js常用的codec encode算法api 兼容性 应该内置到语言里面...
Atitit.跨语言 java c#.net php js常用的codec encode算法api 兼容性 应该内置到语言里面 1. 常用算法1 1.1. 目录2 1.2. 定义和用法编辑2 1.3 ...
- 【Day.js】一个轻量2KB的处理时间和日期的JavaScript 库，常用API记录与分享
关于时间的操作,一直在使用momentjs这个库.方便灵巧,功能强大.唯一的缺点:包大小为200K.精简的方案:如dayjs和miment. dayjs本身就是对标momentjs进行开发的: Day ...
- Js常用数组常用API
JS对数组进行操作的常用API JS中提供了非常多的对数组进行操作的API,这里给出一些个人用到的API,仅供参考. 能够对原数组进行修改的API共有7个: shift,pop , unshift,p ...
- Selenium Web 自动化 - Selenium常用API
Selenium Web 自动化 - Selenium常用API 2016-08-01 目录 1 对浏览器操作 1.1 用webdriver打开一个浏览器 1.2 最大化浏览器&关闭浏 ...
- JsRender 前端渲染模板常用API学习
JsRender 常用API 1. $.templates() $.templates()方法是用来注册或编译模板的,使用的情况有以下几种. 把html字符串编译编译成模板 获取使用script标签声 ...
最新文章
- acm pc^2的配置与使用
- LogViewer超大文本浏览工具
- 用python倒序输出一个字符串_Python字符串逆序输出的实例讲解
- 反向传播算法最全解读，机器学习进阶必看！
- 蓝桥杯 ALGO-31 算法训练 开心的金明
- 从一句SQL得出的启示
- Exchange 2007 前端 IIS 内存占用过高
- 食品行业十大进销存软件功能大对比，我教你怎么选
- Centos7.5软硬件、IP地址及主机名称配置详细教程
- java 真少林倚天屠龙夺艳记,2019年9月13日資訊重點:月夜吟詠詩意長安十九屆中央第四輪巡視全部進駐...
- 为什么会有这么多种Python？
- 计算机网络的对学生的利弊英语作文,关于电脑利弊的英语作文
- nginx方向代理域名访问
- 什么是手机证书和签名干什么用的
- 零知识证明安全实现经验
- SSM考试题库管理系统毕业设计源码069043
- Protel 99 SE使用心得
- 空字符串：“”和null的区别。
- 微信公众平台商业模式探索
- 从科学的开放精神来看开源