初探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(),简单几何体都是继承了这个对象,使用它会相对麻烦一些,但是可操作性非常高,今天我们使用它制作一个自定义几何体-五角 ...
随机推荐
- selenium-显式等待与隐式等待(3)
示例代码: from selenium.webdriver.support.wait import WebDriverWait as WD def find_element(self, by, loc ...
- prefer-object-spread
eslint报错: Use an object spread instead of `Object.assign` eg: `{ ...foo }`.(prefer-object-spread) 即: ...
- spring boot 中的路径映射
在spring boot中集成thymeleaf后,我们知道thymeleaf的默认的html的路径为classpath:/templates也就是resources/templates,那如何访问这 ...
- WebStorm 使用过程中出现的一些问题以及解决方案
标签: WebStorm 配置 描述: 有关 WebStorm 使用过程中出现的一些问题以及其解决方案的汇总 "unresolved function or method" 问题描 ...
- C语言文件输入/输出 ACM改进版(用freopen函数方便检验)
这次用到的文件打开函数不再是fopen,而是stdio.h中包含的另一个函数freopen FILE * freopen ( const char * filename,const char * mo ...
- 如何在python文件中测试sql语句
在manage.py的同级目录下新建一个run.py import os if __name__ == '__main__': #加载Django项目的配置信息 os.environ.setdefau ...
- 无法打开msvcrtd.lib
- JVM内存结构、参数调优和内存泄露分析
1. JVM内存区域和参数配置 1.1 JVM内存结构 Java堆(Heap) Java堆是被所有线程共享的一块内存区域,在虚拟机启动时创建.此内存区域的唯一目的就是存放对象实例,几乎所有的对象实例都 ...
- 前后端对称加密(AES)
后端实现(JAVA) package com.vcgeek.hephaestus.demo; import org.apache.commons.codec.binary.Base64; import ...
- data-*设置自定义属性注意事项一
本人才疏学浅,偶遇一个data自定义属性应当注意的小问题,随笔记下. 1.看下面代码:首先在a标签设置自定义两个属性 <a class="btn" href="ja ...