初探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(),简单几何体都是继承了这个对象,使用它会相对麻烦一些,但是可操作性非常高,今天我们使用它制作一个自定义几何体-五角 ...
随机推荐
- 3.1 C语言_实现AVL平衡二叉树
[序] 上节我们实现了数据结构中最简单的Vector,那么来到第三章,我们需要实现一个Set set的特点是 内部有序且有唯一元素值:同时各种操作的期望操作时间复杂度在O(n·logn): 那么标准的 ...
- 11.Linux用户特殊权限
1.特殊权限概述 前面我们已经学习过 r(读).w(写). x(执行)这三种普通权限,但是我们在査询系统文件权限时会发现出现了一些其他权限字母,比如: 2.特殊权限SUID set uid 简称sui ...
- 玩转OneNET物联网平台之MQTT服务④ —— 远程控制LED(设备自注册)+ Android App控制
授人以鱼不如授人以渔,目的不是为了教会你具体项目开发,而是学会学习的能力.希望大家分享给你周边需要的朋友或者同学,说不定大神成长之路有博哥的奠基石... QQ技术互动交流群:ESP8266&3 ...
- 自己动手破解Z.EntityFramework.Extensions 4.0.11.0的方法
因为项目中使用到Z.EntityFramework.Extensions 和 Z.EntityFramework.Plus(免费开源)两个类库,但是Z.EntityFramework.Extensio ...
- 解决Dubbo 2.7.3版本使用ConfigCenterConfig集成Apollo No Provider found的问题
Dubbo 2.7.3 集成Apollo 问题描述 Dubbo 2.7.3支持配置中心外部化配置, 因此只需要定义一个ConfigCenterConfig的Bean. @EnableDubbo(sca ...
- day2编程语言发展史
1.编程语言的发展史: 机器语言 优点:执行速度够快 缺点:开发效率非常低 汇编语言(通过英文字符组成) 优点:执行效率相较于机器语言略低. 缺点:执行效率相较于机器语言略高. 高级语言 c ,c++ ...
- 媒体查询文字大小.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 【从刷面试题到构建知识体系】Java底层-synchronized锁-2偏向锁篇
上一篇通过构建金字塔结构,来从不同的角度,由浅入深的对synchronized关键字做了介绍, 快速跳转:https://www.cnblogs.com/xyang/p/11631866.html 本 ...
- vue进入新页面,与原页面滚动到相同高度的解决方案
可以在vue路由新增scrollBehavior,控制跳转页面高度 import Router from 'vue-router' new Router({ scrollBehavior (to, f ...
- 在Linux上安装 nessus
Nessus有三种安装方式 1.源文件安装 源文件安装是最复杂的安装方式,用此方式安装可以修改配置参数. 2.rpm安装 rpm安装比起源文件安装更简单一些,它已经把一些底层的东西写好了,用户只要按步 ...