初探three.js
相信大多数选择前端的小伙伴都有一个设计师的梦,今天我来说一说three.js。three.js是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。学习了它之后,就可以在3D发挥你无穷的想象力和设计能力。虽说他是js,但是实际上是对WebGL的封装,对于不那么international得小伙伴来说文档可能不那么友好,相关中文文章零零散散又多又单薄,今天记录一下最近学习的情况,让广大萌新少走一些弯路。
1.渲染3D场景的一些条件
首先3D场景渲染的主角当然是一个场景啦,这个场景就是我们多能看到的全部内容,它包括一些光源light,和一个网格mesh。而网格又可以分成几何体geometry和材质material,几何体和材质又可以分成好多种,我们一会再说。
场景有了,那么在一个空间中,我们以什么视角去看这个场景呢?所以说我们还需要一个摄像机camera,他的功能其实就类似于我们的眼睛。常见的相机有两种,一种是正交投影相机orthographicCamera,另一种是透视相机,区别我们以后说。
2. 简单几何体
几何体按照维度分为二维几何体和三维几何体,二维几何体就是各种面,它们默认都在XY轴组成的平面上。三维几何体有宽度(X轴)高度(Y轴)和深度(Z轴)的划分。
日后还会记录复杂几何体。
3.材质
材质是几何体面的皮肤,决定几何体的外表。
这些材料都是比较常用的,我们也可以在一种几何体上面使用多种材质(其实是在对象的children中生成了多个网格)。
4.光源
three.js的光源都是从生活中抽象出来的,效果也和我们生活中的相差无几。下面前四种是经常用的
注意,这些光源的默认值有阴影的区分。
5. 摄像机
之前说过摄像机有正交投影相机和透视相机之分,我们使用不同的摄像机,所呈现的东西也不一样。正交相机的距离对于渲染的结果没有什么影响,多数用在游戏中,他有7个参数分别是左边界、有边界、上边界、下边界、近面距离、远面距离、变焦。透视相机和我们人的眼睛看到的十分相近,都是近大远小,他有5各参数,分别是视场(视野所及的范围角),长宽比,近面距离,远面距离,变焦。我们经常使用透视相机。
6.渲染器
渲染器实际上就是调用GL底层的渲染方法,如果不使用渲染器,我们什么都看不到。渲染起的也分好多种,使用最多的是WebGLRender();他有两个参数,分别是场景scene和相机camera。
7. 小demo
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
var planeGeometry = new THREE.PlaneGeometry(60, 20);
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0;
scene.add(cube);
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.x = 20;
sphere.position.y = 4;
sphere.position.z = 2;
sphere.castShadow = true;
scene.add(sphere);
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight);
document.getElementById("WebGL-output").appendChild(renderer.domElement);
renderer.render(scene, camera);
预览demo请移步至原文http://www.bettersmile.cn
下一章我们详细的讲一讲几何体。
转载请注明原文地址
初探three.js的更多相关文章
- 初探原生js根据json数据动态创建table
初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...
- 初探 Ext JS 6 (sencha touch/ext升级版)
Sencha Touch 现在已全面升级至Ext Js 6,那么我们如何使用他们呢? 首先去官网下载最新的sdk和帮助文档 sdk下载地址:https://www.sencha.com/product ...
- 初探grunt.js
package.js { "name": "ttd_v3", "version": "0.1.0", "aut ...
- 初探flow.js
第一部分:前言 我们知道JS是弱类型语言,在声明变量时不论是什么类型的变量我们都用var即可,所以js是非常灵活的,但是同时问题就是弱类型语言有可能会出错,比如在调用函数时,且往往在运行起来时才可以检 ...
- 前端初学者——初探Modernizr.js Modernizr.js笔记
什么是Modernizr? Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库. 目前,通过检验浏览器对一系列测试的处理情况,Modernizr 可以检测18项 CSS3 ...
- 初探node.js
一.定义及优势 定义:Node.js是一个基于 Chrome V8 引擎 的 JavaScript 运行时,它以事件驱动为基础实现了非阻塞模型. 优势:由于Web场景下的大多数任务(静态资源读取.数据 ...
- 初探three.js几何体
今天说说three.js的几何体,常见的几何体今天就不说了,今天说一说如何画直线,圆弧线,以及高级几何体. 1. 画一条直线 画直线我们使用THREE.Geometry()对象. //给空白几何体添加 ...
- 初探 Node.js 框架:eggjs (环境搭配篇)
eggjs 是一个优秀的 Node.js 框架 概述:为什么标题上说 eggjs 是一个优秀的 Node.js 框架(可跳过)? 换言之,我们为什么选择 eggjs 进行开发而不是之前初学时使用的 E ...
- 初探three.js几何体-Geometry
three.js几何体我们还没有说完,这一节我们说一说THREE.Geometry(),简单几何体都是继承了这个对象,使用它会相对麻烦一些,但是可操作性非常高,今天我们使用它制作一个自定义几何体-五角 ...
随机推荐
- C语言I博客作业05
内容 答案 这个作业属于哪个课程 C语言程序设计II 这个作业要求在哪里 C语言I作业05 我在这个课程的目标是 更熟练的运用编译函数问题 这个作业在哪个具体方面帮助我实现目标 PTA实验作业 参考文 ...
- day1-01 温度转换
一."温度转换"问题分析 1.1 温度转换 温度刻画的两种不同体系 摄氏度:中国等世界大多数国家使用 以1标准大气压下水的结冰点为0度,沸点为100度,将温度进行等分刻画 华氏度: ...
- C# WPF基础巩固
时间如流水,只能流去不流回. 学历代表你的过去,能力代表你的现在,学习能力代表你的将来. 学无止境,精益求精. 一.写作目的 做C# WPF开发,无论是工作中即将使用,还是只应付跳槽面试,开发基础是非 ...
- Leetcode Tags(5)Hash Table
一.500. Keyboard Row 给定一个单词列表,只返回可以使用在键盘同一行的字母打印出来的单词. 输入: ["Hello", "Alaska", &q ...
- 第三十九章 POSIX信号量与互斥锁
POSIX信号量相关函数 sem_open 功能: initialize and open a named semaphore 原型: sem_t *sem_open(const char *name ...
- 学习笔记26_MVC前台强类型参数
*一般在MVC中,aspx后台要往前台传递参数,使用ViewData["Key"] = obj; 前台就要 <%=(ViewData["key"] as ...
- 读书笔记——《MySQL DBA 工作笔记》
关于前言 作者在前言中提出的一些观点很具有参考价值, 梳理完整的知识体系 这是每一个技术流都应该追逐的,完整的知识体系能够使我们对知识的掌握更加全面,而不仅仅局限于点 建立技术连接的思维,面对需求,永 ...
- hack the box -- sizzle 渗透过程总结,之前对涉及到域内证书啥的还不怎么了解
把之前的笔记搬运过来 --- 1 开了443,用smbclient建立空连接查看共享 smbclient -N -L \\\\1.1.1.1 Department Shares Operatio ...
- 小奇的仓库:换根dp
一道很好的换根dp题.考场上现场yy十分愉快 给定树,求每个点的到其它所有点的距离异或上m之后的值,n=100000,m<=16 只能线性复杂度求解,m又小得奇怪.或者带一个log像kx一样打一 ...
- python学习之【第十篇】:Python中的内置函数
1.前言 内置函数,就是Python内部预先定义好的函数,可以直接使用,Python中内置函数有以下这么多个: 2.map() 描述: map() 会根据提供的函数对指定序列做映射.第一个参数 fun ...