一：一个最简单的静态DEMO

  1. //body加载完后触发init()
  2. //WebGL的渲染是需要HTML5 Canvas元素的，你可以手动在HTML的<body>部分中定义Canvas元素，或者让Three.js帮你生成。这两种选择一般没有多大差别，我们在此手动在HTML中定义：
  3. <body onload="init()">
  4.     <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
  5. </body>
  6. <script>
  7.     function init() {
  8.  
  9.         var renderer = new THREE.WebGLRenderer({
  10.         canvas: document.getElementById('mainCanvas')
  11.         });
  12.  
  13.     renderer.setClearColor(0x000000);  
  14.  
  15.     var scene = new THREE.Scene();
  16.     var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
  17.     camera.position.set(0, 0, 5);
  18.     scene.add(camera);
  19.     var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),new THREE.MeshBasicMaterial({color: 0xff0000}));scene.add(cube);
  20.     renderer.render(scene, camera);
  21.     }
  22.  
  23. </script>

二：Three.js功能概览

  1. Cameras（照相机，控制投影方式）
  2.  
  3.     Camera
  4.     OrthographicCamera
  5.     PerspectiveCamera
  6.  
  7. Core（核心对象）
  8.  
  9.     BufferGeometry
  10.     Clock（用来记录时间）
  11.     EventDispatcher
  12.     Face3
  13.     Face4
  14.     Geometry
  15.     Object3D
  16.     Projector
  17.     Raycaster（计算鼠标拾取物体时很有用的对象）
  18.  
  19. Lights（光照）
  20.     Light
  21.     AmbientLight
  22.     AreaLight
  23.     DirectionalLight
  24.     HemisphereLight
  25.     PointLight
  26.     SpotLight
  27.  
  28. Loaders（加载器，用来加载特定文件）
  29.     Loader
  30.     BinaryLoader
  31.     GeometryLoader
  32.     ImageLoader
  33.     JSONLoader
  34.     LoadingMonitor
  35.     SceneLoader
  36.     TextureLoader
  37.  
  38. Materials（材质，控制物体的颜色、纹理等）
  39.     Material
  40.     LineBasicMaterial
  41.     LineDashedMaterial
  42.     MeshBasicMaterial
  43.     MeshDepthMaterial
  44. Cameras（照相机，控制投影方式）
  45.  
  46.     Camera
  47.     OrthographicCamera
  48.     PerspectiveCamera
  49.  
  50. Core（核心对象）
  51.  
  52.     BufferGeometry
  53.     Clock（用来记录时间）
  54.     EventDispatcher
  55.     Face3
  56.     Face4
  57.     Geometry
  58.     Object3D
  59.     Projector
  60.     Raycaster（计算鼠标拾取物体时很有用的对象）
  61.  
  62. Lights（光照）
  63.     Light
  64.     AmbientLight
  65.     AreaLight
  66.     DirectionalLight
  67.     HemisphereLight
  68.     PointLight
  69.     SpotLight
  70.  
  71. Loaders（加载器，用来加载特定文件）
  72.     Loader
  73.     BinaryLoader
  74.     GeometryLoader
  75.     ImageLoader
  76.     JSONLoader
  77.     LoadingMonitor
  78.     SceneLoader
  79.     TextureLoader
  80.  
  81. Materials（材质，控制物体的颜色、纹理等）
  82.     Material
  83.     LineBasicMaterial
  84.     LineDashedMaterial
  85.     MeshBasicMaterial
  86.     MeshDepthMaterial
  87.     MeshFaceMaterial
  88.     MeshLambertMaterial
  89.     MeshNormalMaterial
  90.     MeshPhongMaterial
  91.     ParticleBasicMaterial
  92.     ParticleCanvasMaterial
  93.     ParticleDOMMaterial
  94.     ShaderMaterial
  95.     SpriteMaterial
  96.  
  97. Math（和数学相关的对象）
  98.  
  99.     Box2
  100.     Box3
  101.     Color
  102.     Frustum
  103.     Math
  104.     Matrix3
  105.     Matrix4
  106.     Plane
  107.     Quaternion
  108.     Ray
  109.     Sphere
  110.     Spline
  111.     Triangle
  112.     Vector2
  113.     Vector3
  114.     Vector4
  115.  
  116. Objects（物体）
  117.  
  118.     Bone
  119.     Line
  120.     LOD
  121.     Mesh（网格，最常用的物体）
  122.     MorphAnimMesh
  123.     Particle
  124.     ParticleSystem
  125.     Ribbon
  126.     SkinnedMesh
  127.     Sprite
  128.  
  129. Renderers（渲染器，可以渲染到不同对象上）
  130.  
  131.     CanvasRenderer
  132.     WebGLRenderer（使用WebGL渲染，这是本书中最常用的方式）
  133.     WebGLRenderTarget
  134.     WebGLRenderTargetCube
  135.     WebGLShaders（着色器，在最后一章作介绍）
  136.  
  137. Renderers / Renderables
  138.  
  139.     RenderableFace3
  140.     RenderableFace4
  141.     RenderableLine
  142.     RenderableObject
  143.     RenderableParticle
  144.     RenderableVertex
  145.  
  146. Scenes（场景）
  147.  
  148.     Fog
  149.     FogExp2
  150.     Scene
  151.  
  152. Textures（纹理）
  153.  
  154.     CompressedTexture
  155.     DataTexture
  156.     Texture
  157.  
  158. Extras
  159.  
  160.     FontUtils
  161.     GeometryUtils
  162.     ImageUtils
  163.     SceneUtils
  164.  
  165. Extras / Animation
  166.  
  167.     Animation
  168.     AnimationHandler
  169.     AnimationMorphTarget
  170.     KeyFrameAnimation
  171.  
  172. Extras / Cameras
  173.  
  174.     CombinedCamera
  175.     CubeCamera
  176.  
  177. Extras / Core
  178.  
  179.     Curve
  180.     CurvePath
  181.     Gyroscope
  182.     Path
  183.     Shape
  184.  
  185. Extras / Geometries（几何形状）
  186.  
  187.     CircleGeometry
  188.     ConvexGeometry
  189.     CubeGeometry
  190.     CylinderGeometry
  191.     ExtrudeGeometry
  192.     IcosahedronGeometry
  193.     LatheGeometry
  194.     OctahedronGeometry
  195.     ParametricGeometry
  196.     PlaneGeometry
  197.     PolyhedronGeometry
  198.     ShapeGeometry
  199.     SphereGeometry
  200.     TetrahedronGeometry
  201.     TextGeometry
  202.     TorusGeometry
  203.     TorusKnotGeometry
  204.     TubeGeometry
  205.  
  206. Extras / Helpers
  207.  
  208.     ArrowHelper
  209.     AxisHelper
  210.     CameraHelper
  211.     DirectionalLightHelper
  212.     HemisphereLightHelper
  213.     PointLightHelper
  214.     SpotLightHelper
  215.  
  216. Extras / Objects
  217.  
  218.     ImmediateRenderObject
  219.     LensFlare
  220.     MorphBlendMesh
  221.  
  222. Extras / Renderers / Plugins
  223.  
  224.     DepthPassPlugin
  225.     LensFlarePlugin
  226.     ShadowMapPlugin
  227.     SpritePlugin
  228.  
  229. Extras / Shaders
  230.  
  231.     ShaderFlares
  232.     ShaderSprite
  233. 22
  234. 1.3 Three.js功能概览
  235. Cameras（照相机，控制投影方式）
  236.  
  237.     Camera
  238.     OrthographicCamera
  239.     PerspectiveCamera
  240.  
  241. Core（核心对象）
  242.  
  243.     BufferGeometry
  244.     Clock（用来记录时间）
  245.     EventDispatcher
  246.     Face3
  247.     Face4
  248.     Geometry
  249.     Object3D
  250.     Projector
  251.     Raycaster（计算鼠标拾取物体时很有用的对象）
  252.  
  253. Lights（光照）
  254.     Light
  255.     AmbientLight
  256.     AreaLight
  257.     DirectionalLight
  258.     HemisphereLight
  259.     PointLight
  260.     SpotLight
  261.  
  262. Loaders（加载器，用来加载特定文件）
  263.     Loader
  264.     BinaryLoader
  265.     GeometryLoader
  266.     ImageLoader
  267.     JSONLoader
  268.     LoadingMonitor
  269.     SceneLoader
  270.     TextureLoader
  271.  
  272. Materials（材质，控制物体的颜色、纹理等）
  273.     Material
  274.     LineBasicMaterial
  275.     LineDashedMaterial
  276.     MeshBasicMaterial
  277.     MeshDepthMaterial
  278.     MeshFaceMaterial
  279.     MeshLambertMaterial
  280.     MeshNormalMaterial
  281.     MeshPhongMaterial
  282.     ParticleBasicMaterial
  283.     ParticleCanvasMaterial
  284.     ParticleDOMMaterial
  285.     ShaderMaterial
  286.     SpriteMaterial
  287.  
  288. Math（和数学相关的对象）
  289.  
  290.     Box2
  291.     Box3
  292.     Color
  293.     Frustum
  294.     Math
  295.     Matrix3
  296.     Matrix4
  297.     Plane
  298.     Quaternion
  299.     Ray
  300.     Sphere
  301.     Spline
  302.     Triangle
  303.     Vector2
  304.     Vector3
  305.     Vector4
  306.  
  307. Objects（物体）
  308.  
  309.     Bone
  310.     Line
  311.     LOD
  312.     Mesh（网格，最常用的物体）
  313.     MorphAnimMesh
  314.     Particle
  315.     ParticleSystem
  316.     Ribbon
  317.     SkinnedMesh
  318.     Sprite
  319.  
  320. Renderers（渲染器，可以渲染到不同对象上）
  321.  
  322.     CanvasRenderer
  323.     WebGLRenderer（使用WebGL渲染，这是本书中最常用的方式）
  324.     WebGLRenderTarget
  325.     WebGLRenderTargetCube
  326.   WebGLShaders（着色器，在最后一章作介绍）
  327.  
  328. Renderers / Renderables
  329.  
  330.     RenderableFace3
  331.     RenderableFace4
  332.     RenderableLine
  333.     RenderableObject
  334.     RenderableParticle
  335.     RenderableVertex
  336.  
  337. Scenes（场景）
  338.  
  339.     Fog
  340.     FogExp2
  341.     Scene
  342.  
  343. Textures（纹理）
  344.  
  345.     CompressedTexture
  346.     DataTexture
  347.     Texture
  348.  
  349. Extras
  350.  
  351.     FontUtils
  352.     GeometryUtils
  353.     ImageUtils
  354.     SceneUtils
  355.  
  356. Extras / Animation
  357.  
  358.     Animation
  359.     AnimationHandler
  360.     AnimationMorphTarget
  361.     KeyFrameAnimation
  362.  
  363. Extras / Cameras
  364.  
  365.     CombinedCamera
  366.     CubeCamera
  367.  
  368. Extras / Core
  369.  
  370.     Curve
  371.     CurvePath
  372.     Gyroscope
  373.     Path
  374.  Shape
  375.  
  376. Extras / Geometries（几何形状）
  377.  
  378.     CircleGeometry
  379.     ConvexGeometry
  380.     CubeGeometry
  381.     CylinderGeometry
  382.     ExtrudeGeometry
  383.     IcosahedronGeometry
  384.     LatheGeometry
  385.     OctahedronGeometry
  386.     ParametricGeometry
  387.     PlaneGeometry
  388.     PolyhedronGeometry
  389.     ShapeGeometry
  390.     SphereGeometry
  391.     TetrahedronGeometry
  392.     TextGeometry
  393.     TorusGeometry
  394.     TorusKnotGeometry
  395.     TubeGeometry
  396.  
  397. Extras / Helpers
  398.  
  399.     ArrowHelper
  400.     AxisHelper
  401.     CameraHelper
  402.     DirectionalLightHelper
  403.     HemisphereLightHelper
  404.     PointLightHelper
  405.     SpotLightHelper
  406.  
  407. Extras / Objects
  408.  
  409.     ImmediateRenderObject
  410.     LensFlare
  411.     MorphBlendMesh
  412.  
  413. Extras / Renderers / Plugins
  414.  
  415.     DepthPassPlugin
  416.     LensFlarePlugin
  417.     ShadowMapPlugin
  418.     SpritePlugin
  419.  
  420. Extras / Shaders
  421. Cameras（照相机，控制投影方式）
  422.  
  423.     Camera
  424.     OrthographicCamera
  425.     PerspectiveCamera
  426.  
  427. Core（核心对象）
  428.  
  429.     BufferGeometry
  430.     Clock（用来记录时间）
  431.     EventDispatcher
  432.     Face3
  433.     Face4
  434.     Geometry
  435.     Object3D
  436.     Projector
  437.     Raycaster（计算鼠标拾取物体时很有用的对象）
  438.  
  439. Lights（光照）
  440.     Light
  441.     AmbientLight
  442.     AreaLight
  443.     DirectionalLight
  444.     HemisphereLight
  445.     PointLight
  446.     SpotLight
  447.  
  448. Loaders（加载器，用来加载特定文件）
  449.     Loader
  450.     BinaryLoader
  451.     GeometryLoader
  452.     ImageLoader
  453.     JSONLoader
  454.     LoadingMonitor
  455.     SceneLoader
  456.     TextureLoader
  457.  
  458. Materials（材质，控制物体的颜色、纹理等）
  459.     Material
  460.     LineBasicMaterial
  461.     LineDashedMaterial
  462.     MeshBasicMaterial
  463.     MeshDepthMaterial
  464.     MeshFaceMaterial
  465.     MeshLambertMaterial
  466.     MeshNormalMaterial
  467.     MeshPhongMaterial
  468.     ParticleBasicMaterial
  469.     ParticleCanvasMaterial
  470.     ParticleDOMMaterial
  471.     ShaderMaterial
  472.     SpriteMaterial
  473.  
  474. Math（和数学相关的对象）
  475.  
  476.     Box2
  477.     Box3
  478.     Color
  479.     Frustum
  480.     Math
  481.     Matrix3
  482.     Matrix4
  483.     Plane
  484.     Quaternion
  485.     Ray
  486.     Sphere
  487.     Spline
  488.     Triangle
  489.     Vector2
  490.     Vector3
  491.     Vector4
  492.  
  493. Objects（物体）
  494.  
  495.     Bone
  496.     Line
  497.     LOD
  498.     Mesh（网格，最常用的物体）
  499.     MorphAnimMesh
  500.     Particle
  501.     ParticleSystem
  502.     Ribbon
  503.     SkinnedMesh
  504.     Sprite
  505.  
  506. Renderers（渲染器，可以渲染到不同对象上）
  507.  
  508.     CanvasRenderer
  509.     WebGLRenderer（使用WebGL渲染，这是本书中最常用的方式）
  510.     WebGLRenderTarget
  511.     WebGLRenderTargetCube
  512.     WebGLShaders（着色器，在最后一章作介绍）
  513.  
  514. Renderers / Renderables
  515.  
  516.     RenderableFace3
  517.     RenderableFace4
  518.     RenderableLine
  519.     RenderableObject
  520.     RenderableParticle
  521.     RenderableVertex
  522.  
  523. Scenes（场景）
  524.  
  525.     Fog
  526.     FogExp2
  527.     Scene
  528.  
  529. Textures（纹理）
  530.  
  531.     CompressedTexture
  532.     DataTexture
  533.     Texture
  534.  
  535. Extras
  536.  
  537.     FontUtils
  538.     GeometryUtils
  539.     ImageUtils
  540.     SceneUtils
  541.  
  542. Extras / Animation
  543.  
  544.     Animation
  545.     AnimationHandler
  546.     AnimationMorphTarget
  547.     KeyFrameAnimation
  548.  
  549. Extras / Cameras
  550.  
  551.     CombinedCamera
  552.     CubeCamera
  553.  
  554. Extras / Core
  555.  
  556.     Curve
  557.     CurvePath
  558.     Gyroscope
  559.     Path
  560.     Shape
  561.  
  562. Extras / Geometries（几何形状）
  563.  
  564.     CircleGeometry
  565.     ConvexGeometry
  566.     CubeGeometry
  567.     CylinderGeometry
  568.     ExtrudeGeometry
  569.     IcosahedronGeometry
  570.     LatheGeometry
  571.     OctahedronGeometry
  572.     ParametricGeometry
  573.     PlaneGeometry
  574.     PolyhedronGeometry
  575.     ShapeGeometry
  576.     SphereGeometry
  577.     TetrahedronGeometry
  578.     TextGeometry
  579.     TorusGeometry
  580.     TorusKnotGeometry
  581.     TubeGeometry
  582.  
  583. Extras / Helpers
  584.  
  585.     ArrowHelper
  586.     AxisHelper
  587.     CameraHelper
  588.     DirectionalLightHelper
  589.     HemisphereLightHelper
  590.     PointLightHelper
  591.     SpotLightHelper
  592.  
  593. Extras / Objects
  594.  
  595.     ImmediateRenderObject
  596.     LensFlare
  597.     MorphBlendMesh
  598.  
  599. Extras / Renderers / Plugins
  600.  
  601.     DepthPassPlugin
  602.     LensFlarePlugin
  603.     ShadowMapPlugin
  604.     SpritePlugin
  605.  
  606. Extras / Shaders
  607.  
  608.     ShaderFlares
  609.     ShaderSprite

系列博文-Three.js入门指南(张雯莉)-静态demo和three.js功能概览的更多相关文章

  1. 系列博文-Three.js入门指南(张雯莉)-网格 setInterval方法 requestAnimationFrame方法 使用stat.js记录FPS

    第6章 动画 在本章之前,所有画面都是静止的,本章将介绍如果使用Three.js进行动态画面的渲染.此外,将会介绍一个Three.js作者写的另外一个库,用来观测每秒帧数(FPS). CSS3动画那么 ...

  2. 系列博文-Three.js入门指南(张雯莉)-照相机

    照相机就是这样一个抽象,它定义了三维空间到二维屏幕的投影方式,用“照相机”这样一个类比,可以使我们直观地理解这一投影方式.而针对投影方式的不同,照相机又分为正交投影照相机与透视投影照相机.我们需要为自 ...

  3. 一起学微软Power BI系列-官方文档-入门指南(1)Power BI初步介绍

    我们在前一篇文章微软新神器-Power BI,一个简单易用,还用得起的BI产品中,我们初步介绍了Power BI的基本知识.由于Power BI是去年开始微软新发布的一个产品,虽然已经可以企业级应用, ...

  4. 一起学微软Power BI系列-官方文档-入门指南(2)获取源数据

    我们在文章: 一起学微软Power BI系列-官方文档-入门指南(1)Power BI初步介绍中,我们介绍了官方入门文档的第一章.今天继续给大家介绍官方文档中,如何获取数据源的相关内容.虽然是英文,但 ...

  5. 一起学微软Power BI系列-官方文档-入门指南(3)Power BI建模

    我们前2篇文章:一起学微软Power BI系列-官方文档-入门指南(1)Power BI初步介绍 和一起学微软Power BI系列-官方文档-入门指南(2)获取源数据 中,我们介绍了官方入门文档与获取 ...

  6. 一起学微软Power BI系列-官方文档-入门指南(4)Power BI的可视化

    在前面的系列文章中,我们介绍了官方有关获取数据,以及建模的原始文档和基本介绍.今天继续给大家介绍官方文档中,有关可视化的内容.实际上获获取数据和建模更注重业务关系的处理,而可视化则关注对数据的解读.这 ...

  7. 一起学微软Power BI系列-官方文档-入门指南(5)探索数据奥秘

    我们几篇系列文章中,我们介绍了官方入门文档与获取数据等基本知识.今天继续给大家另外一个重点,探索数据奥秘.有了数据源,有了模型,下一步就是如何解析数据了.解析数据的过程需要很多综合技能,不仅仅是需要掌 ...

  8. 一起学微软Power BI系列-官方文档-入门指南(6)Power BI与Excel

    今天介绍了官方入门文档中有关PowerBI和Excel的知识.前几篇入门文档有点仓促,加上最近时间的研究,会有更多技巧性和入门型的文章或者视频发布,最后2篇入门文档将更加详细一点,因为部分文章进行简单 ...

  9. 一起学微软Power BI系列-官方文档-入门指南(7)发布与共享-终结篇+完整PDF文档

    接触Power BI的时间也只有几个月,虽然花的时间不多,但通过各种渠道了解收集,谈不上精通,但对一些重要概念和细节还是有所了解.在整理官方文档的过程中,也熟悉和了解了很多概念.所以从前到后把微软官方 ...

随机推荐

  1. OpenCV——彩色图像转成灰度图像

    // PS_Algorithm.h #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_H_INCLUDED #include <iostr ...

  2. 坚持自己的追求，迎来 “中国系统开发网” （CSDN）的专访

    坚持自己的追求,迎来 "中国系统开发网" (CSDN)的专访: 专访马根峰:海量数据处理与分析大师的中国本土程序员" http://www.csdn.net/articl ...

  3. LeetCode（28）-Remove Duplicates from Sorted Array

    题目: Given a sorted array, remove the duplicates in place such that each element appear only once and ...

  4. .Net中的并行编程-7.基于BlockingCollection实现高性能异步队列

    三年前写过基于ConcurrentQueue的异步队列,今天在整理代码的时候发现当时另外一种实现方式-使用BlockingCollection实现,这种方式目前依然在实际项目中使用.关于Blockin ...

  5. G1 GC技术解析

    介绍 G1 GC,全称Garbage-First Garbage Collector,通过-XX:+UseG1GC参数来启用.G1收集器是工作在堆内不同分区上的收集器,分区既可以是年轻代也可以是老年代 ...

  6. 学习一下DOM中的cloneNode（）与cloneNode（true）的基础知识

    带你去熟悉HTML dom中当然cloneNode()与cloneNode(true)之间区别 code <!DOCTYPE html> <html> <head> ...

  7. intersection of two linked lists.(两个链表交叉的地方)

    Write a program to find the node at which the intersection of two singly linked lists begins. For ex ...

  8. jframe 对象（GroupedAction）传递无法调用对象的方法解决办法

    Display.getDefault().syncExec(new Runnable() { public void run() { pmtsStreamViewsAction.refreshPers ...

  9. C#学习笔记 day_two

    C#学习笔记 day two Chapter 2 c#基本概念 2.1编译与运行hello world应用程序 点击f5或者vs2010中的运行图标即可 2.3C#的概念拓展 (1)继承性:一个类含有 ...

  10. 服务治理利器Hystrix-理论篇

    引言 现在的大中型应用,很多都在朝着服务化.分布式的方向发展.这有多方面的考虑,比如说,方便治理.便于扩展.服务隔离等等.不过在带来如此多利好的同时,不可避免的也会带来麻烦,比如系统架构复杂.服务依赖 ...