《Three.js入门指南》学习笔记--第1~3章
来源:互联网 发布:三毛的梦里花落知多少 编辑:程序博客网 时间:2024/05/16 19:51
概述
一.配置环境:
- 在three.js下载。其中three.js没有经过代码压缩,适合调试,three.js经过了代码压缩,文件较小,适合发布最终版的时候使用。
- 在使用three.js之前,需要在html中引用:
<script type="text/javascript" src="three.js"></script>
二.一个典型的Three.js程序至少要包括渲染器(Renderer)、场景(Scene)、照相机(Canmer),以及你在场景中创建的物体
- 将渲染器和Canvas绑定。
- 在程序最开始的时候将场景进行实例化
- 定义照相机,并将其添加进场景
- 创建物体,添加进场景
- 进行渲染
function init() { // render var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('mainCanvas') }); renderer.setClearColor(0x000000);//将背景色设为黑色,用于清除画面的颜色 //scene var scene = new THREE.Scene(); //camera var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000); camera.position.set(0, 0, 5); scene.add(camera); // a cube in the scene var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3), new THREE.MeshBasicMaterial({ color: 0xff0000 }) ); scene.add(cube); renderer.render(scene, camera);}
照相机
一.什么是照相机
在图形学中指定三维空间到二维屏幕的投影方式
针对投影方式的不同,照相机又分为正交投影照相机与透视投影照相机
二.透视投影vs透视投影
根据应用特性来选择一个效果更佳的照相机
三.正交投影相机
为了保持照相机的横竖比例,需要保证(right - left)与(top - bottom)的比例与Canvas宽度与高度的比例一致。
ear与far都是指到照相机位置在深度平面的位置,而照相机不应该拍摄到其后方的物体,因此这两个值应该均为正值。为了保证场景中的物体不会因为太近或太远而被照相机忽略,一般near的值设置得较小,far的值设置得较大,具体值视场景中物体的位置等决定。
function init() { var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('mainCanvas') }); renderer.setClearColor(0x000000); var scene = new THREE.Scene(); // camera // canvas size is 400x300 var camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10); camera.position.set(0, 0, 5); //camera.lookAt(new THREE.Vector3(0, 0, 0)); scene.add(camera); // a cube in the scene var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true }) ); scene.add(cube); // render renderer.render(scene, camera); }
四.透视投影相机
fov是视景体竖直方向上的张角(是角度制而非弧度制)。
aspect等于width / height,是照相机水平方向和竖直方向长度的比值,通常设为Canvas的横纵比例。
near和far分别是照相机到视景体最近、最远的距离,均为正值,且far应大于near
改变fov并不会引起画面横竖比例的变化,而改变aspect则会改变横竖比例。
function init() { var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('mainCanvas') }); renderer.setClearColor(0x000000); var scene = new THREE.Scene(); // camera // canvas size is 400x300 var camera = new THREE.PerspectiveCamera(60, 400 / 300, 1, 10); camera.position.set(0, 0, 5); scene.add(camera); // a cube in the scene var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true }) ); scene.add(cube); // render renderer.render(scene, camera); }
几何形状
一.基本几何形状
二.文字形状
- 下载使用在github下载xxx.json文件,放入目录下,用以下方法加载:
var loader = new THREE.FontLoader();loader.load('../lib/xxx.json', function(font) { var mesh = new THREE.Mesh(new THREE.TextGeometry('Hello', { font: font, size: 1, height: 1 }), material); scene.add(mesh); // render renderer.render(scene, camera);});
- 参数介绍
构造函数为THREE.TextGeometry(text, parameters);
text是文字字符串,parameters是以下参数组成的对象:- size:字号大小,一般为大写字母的高度
- height:文字的厚度
- curveSegments:弧线分段数,使得文字的曲线更加光滑
- font:字体,默认是’helvetiker’,需对应引用的字体文件
- weight:值为’normal’或’bold’,表示是否加粗
- style:值为’normal’或’italics’,表示是否斜体
- bevelEnabled:布尔值,是否使用倒角,意为在边缘处斜切
- bevelThickness:倒角厚度
- bevelSize:倒角宽度
自定义形状
- 需手动指定每个顶点的位置,以及顶点连接情况。
- 自定义形状使用的是Geometry类,它是其他如CubeGeometry、SphereGeometry等几何形状的父类,其构造函数是:THREE.Geometry() 3.
graph LRA[初始几何化形状]-->B[设置顶点位置]B-->C[设置顶点连接情况]
Three.js入门指南
0 0
- 《Three.js入门指南》学习笔记--第1~3章
- 《webgl入门指南》学习笔记一three.js与sim.js
- 《webgl入门指南》学习笔记二之three.js创建mesh
- 《webgl入门指南》学习笔记三之three.js创建多重纹理
- 《three.js开发指南》 笔记
- three.js学习笔记 基础1_1
- three.js学习笔记 基础1_2
- Ext JS 6学习文档–第1章–ExtJS入门指南
- Ext JS 6学习文档–第1章–ExtJS入门指南
- Ext JS 6学习文档–第1章–ExtJS入门指南
- three.js学习笔记 射线
- Three.js学习笔记(一)
- 【笔记】《WebGL编程指南》学习-第2章WebGL入门(3-画一个点-版本1))
- 《jQuery权威指南》学习笔记之第1章 jQuery开发入门
- Three学习笔记-1
- Three.JS学习 9:WEBVR 入门demo
- 纪念工作的第一天——Three.js学习笔记
- THREE.js 学习笔记(一)
- HDU2041 超级楼梯
- node中的readline模块
- hadoop入门程序wordcount 解析
- Java大牛养成记——图片上传
- HDUOJ 2544 最短路
- 《Three.js入门指南》学习笔记--第1~3章
- 【Android】“存储”之SharedPreferences(自己程序)
- 全国政协十二届五次会议开幕 这些明星委员成镜头焦点
- A
- 表单的提交方式:get和post
- Nginx的启动和停止
- leetcode之sort-list
- RecyclerView的几种布局方式
- C# 10进制转换2进制,并且保留两位数的方法