xiangjinqi
- 浏览: 168898 次
- 性别:
- 来自: 武汉
-
最新评论
文章列表
Three.js开发指南---使用three.js的材质（第四章）
Posted on 2017-01-29 16:41 Amy-lover 阅读(1312) 评论(0) 编辑 收藏
材质就像物体的皮肤，决定了几何体的外表，例如是否像草地/金属，是否透明，是否显示线框等
一 材质
THREE.js的材质分为多种，Three.js提供了一个材质基类THREE.Material，
该基类拥有three.js所有材质的公有属性，分为三类：基础属性，融合属性，高级属性
基础属性：ID,name，透明度，是否可见，是否需要刷新等
融合属性：决定了物体如何 ...
Three.js开发指南---使用three.js里的各种光源（第三章）
Posted on 2016-12-09 22:24 Amy-lover 阅读(2767) 评论(0) 编辑 收藏
本章的主要内容
1 three.js有哪些可用的光源
2 什么时候用什么光源、
3 如何调整配置各种光源
4 如何创建镜头炫光
一 光源
光源大概有7种，
其中基础光源有4种
环境光（AmbientLight会它的颜色会添加到整个场景和所有对象的当前颜色上），
点光源（PointLight空间中的一点，朝所有的方向发射光线
Three.js开发指南---学习使用几何体（第五章）
Posted on 2017-01-29 23:02 Amy-lover 阅读(643) 评论(0) 编辑 收藏
一 基础几何体
1 二维图形：二维图形都是基于x和y轴构建的，即展示的形式就是他们都是“直立”的，如果希望这些二维图形躺下，则需要将几何体沿着x轴向后旋转1/4圈
mesh.rotation.x=-Math.PI/2;
1.1 PlaneGeometry：平
Three.js开发指南---使用构建three.js的基本组件（第二章）
Posted on 2016-12-09 10:56 Amy-lover 阅读(181) 评论(0) 编辑 收藏
.gui本章的主要内容
1 场景中使用哪些组件
2 几何图形和材质如何关联
3 正投影相机和透视相机的区别
一，Three所需要的基本元素
场景scene：一个容器，用来保存并跟踪所有我们想渲染的物体
相机camera：场景scene中保存了所有我们想要渲染的物体，但是这些物体哪些是希望被看到的，由相机来决定，即相机决定了哪些东西将要在屏幕上渲染，场景渲染的 ...
-Three.js开发指南---用three.js创建你的第一个三维场景（第一章）
Posted on 2016-12-08 17:54 Amy-lover 阅读(838) 评论(0) 编辑 收藏
本章主要做了下面的工作
1 生成一个简单的场景，该场景的物体只有平面和坐标轴
2 在第一个demo的基础上添加光源和方块物体，并生成阴影
3 在第二个demo的基础上，增加动画，使得方块进行旋转
4 在第三个demo的基础上，增加图形操作界面，改变方块旋转的速度
5 在第四个demo的基础上，我们使用ascII效果(这个没有做出来，不知道为什么asci ...
THREE.JS中常用的3种材质
- 博客分类：
- html5
THREE.JS中常用的3种材质
发表于2016/5/15 16:26:01 7746人阅读
分类： three-js javascript
总序
材质和几何体构成网格，决定几何体是否像金属，透明与否，已经是否显示成线框。
MeshBasicMaterial：对光照无感，给几何体一种简单的颜色或显示线框
MeshLambertMaterial：这种材质对光照有反应，用于创建暗淡的不发光的物体
MeshPhongMaterial：这种材质对光照也有反应，用于创建金属类明亮的物体
Three.js 学习记录 之 几何体
- 博客分类：
- html5
几何体是一个很重要的东东，它描述了你所要显示的对象的结构形状，有了这个形状之后，就可以使用材质给这个形状增加外观，然后使用网格（Mesh）把对象显示出来。
Three.js提供了丰富的几何体模型，今天了解几个模型，来和大家分享一下：
Three.js库中的geometry和其它大多数三维库中的一样，基本上是三位空间中的点集，以及一些将这些点连接起来的面，举例来说，一个方块有8个角，每个角都可以定义为x、y、z坐标的一个组合，所以每个方块都是三维空间中的8个点。在Three.js中，这些点称为顶点（vertice）。有六个侧面，每个角有一个顶点，每个侧面称为面（face）。
下面主要是介绍 ...
一 基础几何体
1 二维图形：二维图形都是基于x和y轴构建的，即展示的形式就是他们都是“直立”的，如果希望这些二维图形躺下，则需要将几何体沿着x轴向后旋转1/4圈
mesh.rotation.x=-Math.PI/2;
1.1 PlaneGeometry：平面几何体 new THREE.PlaneGeometry(width,height,widthSegments,heightSegments)
本章的主要内容：
一，高级几何体-凸面体ConvexGeometry，扫描体LatheGeometry，管状几何体TubeGeometry；
二，使用拉伸几何体ExtrudeGeometry将一个二维图形生成三维图形，并基于从外部引入的SVG图片生成一个三维图形；
三，基于three.js提供的ParamtericGeometry对象的公式定制自己的图形
四，使用TextGeometry创建三维文字
五，使用二元操作从已有的几何体中创建出新的几何体；
1 ConvexGeometry--凸面体
1.立方体 虽然这一形状的名字叫立方体（CubeGeometry），但它其实是长方体，也就是长宽高可以设置为不同的值。其构造函数是：
THREE.CubeGeometry(width,height,depth,widthSegments,heightSegments, depthSegments)
width：x方向上的长度 height：y方向上的长度 depth：z方向上的长度 widthSegments：x方向上的分段数（可选，缺省值1） heightSegments：y方向上的分段数（同上） depthSegments：z方向上的分段数（同上）
深入理解Three.js（WebGL）贴图（纹理映射）和UV映射
iefreer 发表于 2016-08-12 09:14:18
标签: webgl, texture, map, uv, cube
- +
本文将详细描述如何使用Three.js给3D对象添加贴图（Texture Map，也译作纹理映射，“贴图”的翻译要更直观，而“纹理映射”更准确。）。为了能够查看在线演示效果，你需要有一个兼容WebGL的现代浏览器（最好是Chrome/FireFox/Safari/Edge/IE11+）。
本文的在线演示结果和代码请点击这里：Three.js贴图实例。
神说：“要有光”，就有了光。
Three.js内置了多种光源可以直接调用：
AmbientLight（环境光）
AreaLight（区域光）
DirectionalLight（平行光）
HemisphereLight（半球光）
PointLight（点光源）
SpotLight（聚光灯）
首先我们设置好基础的环境：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个WebGL程序</titl ...
网页可见区域宽： document.body.clientWidth;网页可见区域高： document.body.clientHeight;网页可见区域宽： document.body.offsetWidth (包括边线的宽);网页可见区域高： document.body.offsetHeight (包括边线的宽);网页正文全文宽： document.body.scrollWidth;网页正文全文高： document.body.scrollHeight;网页被卷去的高： document.body.scrollTop;网页被卷去的左： document.body.scrollLef ...
<html>
<body>
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">
Auto</span><br />
<span style="cursor:crosshair">
Crosshair</span><br />
<span style="cursor:default">
Default</span& ...
转载请保留此句：商域无疆 - 本博客专注于 敏捷开发及移动和物联设备研究：数据可视化、GOLANG、html5、WEBGL、THREE.JS，否则，出自本博客的文章拒绝转载或再转载，谢谢合作。
俺也是刚开始学,好多地儿肯定不对还请见谅.
以下代码是THREE.JS 源码文件中Light/DirectionalLight.js文件的注释.
/*** @author mrdoob / http://mrdoob.com/* @author alteredq / http://alteredqualia.com/*//*