相信大多数选择前端的小伙伴都有一个设计师的梦,今天我来说一说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

  1. var scene = new THREE.Scene();
  2. var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
  3. var renderer = new THREE.WebGLRenderer();
  4. renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
  5. renderer.setSize(window.innerWidth, window.innerHeight);
  6. renderer.shadowMapEnabled = true;
  7. var planeGeometry = new THREE.PlaneGeometry(60, 20);
  8. var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
  9. var plane = new THREE.Mesh(planeGeometry, planeMaterial);
  10. plane.receiveShadow = true;
  11. plane.rotation.x = -0.5 * Math.PI;
  12. plane.position.x = 15;
  13. plane.position.y = 0;
  14. plane.position.z = 0;
  15. scene.add(plane);
  16. var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
  17. var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
  18. var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  19. cube.castShadow = true;
  20. cube.position.x = -4;
  21. cube.position.y = 3;
  22. cube.position.z = 0;
  23. scene.add(cube);
  24. var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
  25. var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
  26. var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
  27. sphere.position.x = 20;
  28. sphere.position.y = 4;
  29. sphere.position.z = 2;
  30. sphere.castShadow = true;
  31. scene.add(sphere);
  32. camera.position.x = -30;
  33. camera.position.y = 40;
  34. camera.position.z = 30;
  35. camera.lookAt(scene.position);
  36. var spotLight = new THREE.SpotLight(0xffffff);
  37. spotLight.position.set(-40, 60, -10);
  38. spotLight.castShadow = true;
  39. scene.add(spotLight);
  40. document.getElementById("WebGL-output").appendChild(renderer.domElement);
  41. renderer.render(scene, camera);

预览demo请移步至原文http://www.bettersmile.cn

下一章我们详细的讲一讲几何体。

转载请注明原文地址

初探three.js的更多相关文章

  1. 初探原生js根据json数据动态创建table

    初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...

  2. 初探 Ext JS 6 (sencha touch/ext升级版)

    Sencha Touch 现在已全面升级至Ext Js 6,那么我们如何使用他们呢? 首先去官网下载最新的sdk和帮助文档 sdk下载地址:https://www.sencha.com/product ...

  3. 初探grunt.js

    package.js { "name": "ttd_v3", "version": "0.1.0", "aut ...

  4. 初探flow.js

    第一部分:前言 我们知道JS是弱类型语言,在声明变量时不论是什么类型的变量我们都用var即可,所以js是非常灵活的,但是同时问题就是弱类型语言有可能会出错,比如在调用函数时,且往往在运行起来时才可以检 ...

  5. 前端初学者——初探Modernizr.js Modernizr.js笔记

    什么是Modernizr? Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库. 目前,通过检验浏览器对一系列测试的处理情况,Modernizr 可以检测18项 CSS3 ...

  6. 初探node.js

    一.定义及优势 定义:Node.js是一个基于 Chrome V8 引擎 的 JavaScript 运行时,它以事件驱动为基础实现了非阻塞模型. 优势:由于Web场景下的大多数任务(静态资源读取.数据 ...

  7. 初探three.js几何体

    今天说说three.js的几何体,常见的几何体今天就不说了,今天说一说如何画直线,圆弧线,以及高级几何体. 1. 画一条直线 画直线我们使用THREE.Geometry()对象. //给空白几何体添加 ...

  8. 初探 Node.js 框架:eggjs (环境搭配篇)

    eggjs 是一个优秀的 Node.js 框架 概述:为什么标题上说 eggjs 是一个优秀的 Node.js 框架(可跳过)? 换言之,我们为什么选择 eggjs 进行开发而不是之前初学时使用的 E ...

  9. 初探three.js几何体-Geometry

    three.js几何体我们还没有说完,这一节我们说一说THREE.Geometry(),简单几何体都是继承了这个对象,使用它会相对麻烦一些,但是可操作性非常高,今天我们使用它制作一个自定义几何体-五角 ...

随机推荐

  1. selenium-显式等待与隐式等待(3)

    示例代码: from selenium.webdriver.support.wait import WebDriverWait as WD def find_element(self, by, loc ...

  2. prefer-object-spread

    eslint报错: Use an object spread instead of `Object.assign` eg: `{ ...foo }`.(prefer-object-spread) 即: ...

  3. spring boot 中的路径映射

    在spring boot中集成thymeleaf后,我们知道thymeleaf的默认的html的路径为classpath:/templates也就是resources/templates,那如何访问这 ...

  4. WebStorm 使用过程中出现的一些问题以及解决方案

    标签: WebStorm 配置 描述: 有关 WebStorm 使用过程中出现的一些问题以及其解决方案的汇总 "unresolved function or method" 问题描 ...

  5. C语言文件输入/输出 ACM改进版(用freopen函数方便检验)

    这次用到的文件打开函数不再是fopen,而是stdio.h中包含的另一个函数freopen FILE * freopen ( const char * filename,const char * mo ...

  6. 如何在python文件中测试sql语句

    在manage.py的同级目录下新建一个run.py import os if __name__ == '__main__': #加载Django项目的配置信息 os.environ.setdefau ...

  7. 无法打开msvcrtd.lib

  8. JVM内存结构、参数调优和内存泄露分析

    1. JVM内存区域和参数配置 1.1 JVM内存结构 Java堆(Heap) Java堆是被所有线程共享的一块内存区域,在虚拟机启动时创建.此内存区域的唯一目的就是存放对象实例,几乎所有的对象实例都 ...

  9. 前后端对称加密(AES)

    后端实现(JAVA) package com.vcgeek.hephaestus.demo; import org.apache.commons.codec.binary.Base64; import ...

  10. data-*设置自定义属性注意事项一

    本人才疏学浅,偶遇一个data自定义属性应当注意的小问题,随笔记下. 1.看下面代码:首先在a标签设置自定义两个属性 <a class="btn" href="ja ...