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

一：一个最简单的静态DEMO

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

二：Three.js功能概览

Cameras（照相机，控制投影方式）CameraOrthographicCameraPerspectiveCameraCore（核心对象）BufferGeometryClock（用来记录时间）EventDispatcherFace3Face4GeometryObject3DProjectorRaycaster（计算鼠标拾取物体时很有用的对象）Lights（光照）LightAmbientLightAreaLightDirectionalLightHemisphereLightPointLightSpotLightLoaders（加载器，用来加载特定文件）LoaderBinaryLoaderGeometryLoaderImageLoaderJSONLoaderLoadingMonitorSceneLoaderTextureLoaderMaterials（材质，控制物体的颜色、纹理等）MaterialLineBasicMaterialLineDashedMaterialMeshBasicMaterialMeshDepthMaterial
Cameras（照相机，控制投影方式）CameraOrthographicCameraPerspectiveCameraCore（核心对象）BufferGeometryClock（用来记录时间）EventDispatcherFace3Face4GeometryObject3DProjectorRaycaster（计算鼠标拾取物体时很有用的对象）Lights（光照）LightAmbientLightAreaLightDirectionalLightHemisphereLightPointLightSpotLightLoaders（加载器，用来加载特定文件）LoaderBinaryLoaderGeometryLoaderImageLoaderJSONLoaderLoadingMonitorSceneLoaderTextureLoaderMaterials（材质，控制物体的颜色、纹理等）MaterialLineBasicMaterialLineDashedMaterialMeshBasicMaterialMeshDepthMaterialMeshFaceMaterialMeshLambertMaterialMeshNormalMaterialMeshPhongMaterialParticleBasicMaterialParticleCanvasMaterialParticleDOMMaterialShaderMaterialSpriteMaterialMath（和数学相关的对象）Box2Box3ColorFrustumMathMatrix3Matrix4PlaneQuaternionRaySphereSplineTriangleVector2Vector3Vector4Objects（物体）BoneLineLODMesh（网格，最常用的物体）MorphAnimMeshParticleParticleSystemRibbonSkinnedMeshSpriteRenderers（渲染器，可以渲染到不同对象上）CanvasRendererWebGLRenderer（使用WebGL渲染，这是本书中最常用的方式）WebGLRenderTargetWebGLRenderTargetCubeWebGLShaders（着色器，在最后一章作介绍）Renderers / RenderablesRenderableFace3RenderableFace4RenderableLineRenderableObjectRenderableParticleRenderableVertexScenes（场景）FogFogExp2SceneTextures（纹理）CompressedTextureDataTextureTextureExtrasFontUtilsGeometryUtilsImageUtilsSceneUtilsExtras / AnimationAnimationAnimationHandlerAnimationMorphTargetKeyFrameAnimationExtras / CamerasCombinedCameraCubeCameraExtras / CoreCurveCurvePathGyroscopePathShapeExtras / Geometries（几何形状）CircleGeometryConvexGeometryCubeGeometryCylinderGeometryExtrudeGeometryIcosahedronGeometryLatheGeometryOctahedronGeometryParametricGeometryPlaneGeometryPolyhedronGeometryShapeGeometrySphereGeometryTetrahedronGeometryTextGeometryTorusGeometryTorusKnotGeometryTubeGeometryExtras / HelpersArrowHelperAxisHelperCameraHelperDirectionalLightHelperHemisphereLightHelperPointLightHelperSpotLightHelperExtras / ObjectsImmediateRenderObjectLensFlareMorphBlendMeshExtras / Renderers / PluginsDepthPassPluginLensFlarePluginShadowMapPluginSpritePluginExtras / ShadersShaderFlaresShaderSprite
22
1.3 Three.js功能概览
Cameras（照相机，控制投影方式）CameraOrthographicCameraPerspectiveCameraCore（核心对象）BufferGeometryClock（用来记录时间）EventDispatcherFace3Face4GeometryObject3DProjectorRaycaster（计算鼠标拾取物体时很有用的对象）Lights（光照）LightAmbientLightAreaLightDirectionalLightHemisphereLightPointLightSpotLightLoaders（加载器，用来加载特定文件）LoaderBinaryLoaderGeometryLoaderImageLoaderJSONLoaderLoadingMonitorSceneLoaderTextureLoaderMaterials（材质，控制物体的颜色、纹理等）MaterialLineBasicMaterialLineDashedMaterialMeshBasicMaterialMeshDepthMaterialMeshFaceMaterialMeshLambertMaterialMeshNormalMaterialMeshPhongMaterialParticleBasicMaterialParticleCanvasMaterialParticleDOMMaterialShaderMaterialSpriteMaterialMath（和数学相关的对象）Box2Box3ColorFrustumMathMatrix3Matrix4PlaneQuaternionRaySphereSplineTriangleVector2Vector3Vector4Objects（物体）BoneLineLODMesh（网格，最常用的物体）MorphAnimMeshParticleParticleSystemRibbonSkinnedMeshSpriteRenderers（渲染器，可以渲染到不同对象上）CanvasRendererWebGLRenderer（使用WebGL渲染，这是本书中最常用的方式）WebGLRenderTargetWebGLRenderTargetCubeWebGLShaders（着色器，在最后一章作介绍）Renderers / RenderablesRenderableFace3RenderableFace4RenderableLineRenderableObjectRenderableParticleRenderableVertexScenes（场景）FogFogExp2SceneTextures（纹理）CompressedTextureDataTextureTextureExtrasFontUtilsGeometryUtilsImageUtilsSceneUtilsExtras / AnimationAnimationAnimationHandlerAnimationMorphTargetKeyFrameAnimationExtras / CamerasCombinedCameraCubeCameraExtras / CoreCurveCurvePathGyroscopePathShapeExtras / Geometries（几何形状）CircleGeometryConvexGeometryCubeGeometryCylinderGeometryExtrudeGeometryIcosahedronGeometryLatheGeometryOctahedronGeometryParametricGeometryPlaneGeometryPolyhedronGeometryShapeGeometrySphereGeometryTetrahedronGeometryTextGeometryTorusGeometryTorusKnotGeometryTubeGeometryExtras / HelpersArrowHelperAxisHelperCameraHelperDirectionalLightHelperHemisphereLightHelperPointLightHelperSpotLightHelperExtras / ObjectsImmediateRenderObjectLensFlareMorphBlendMeshExtras / Renderers / PluginsDepthPassPluginLensFlarePluginShadowMapPluginSpritePluginExtras / Shaders
Cameras（照相机，控制投影方式）CameraOrthographicCameraPerspectiveCameraCore（核心对象）BufferGeometryClock（用来记录时间）EventDispatcherFace3Face4GeometryObject3DProjectorRaycaster（计算鼠标拾取物体时很有用的对象）Lights（光照）LightAmbientLightAreaLightDirectionalLightHemisphereLightPointLightSpotLightLoaders（加载器，用来加载特定文件）LoaderBinaryLoaderGeometryLoaderImageLoaderJSONLoaderLoadingMonitorSceneLoaderTextureLoaderMaterials（材质，控制物体的颜色、纹理等）MaterialLineBasicMaterialLineDashedMaterialMeshBasicMaterialMeshDepthMaterialMeshFaceMaterialMeshLambertMaterialMeshNormalMaterialMeshPhongMaterialParticleBasicMaterialParticleCanvasMaterialParticleDOMMaterialShaderMaterialSpriteMaterialMath（和数学相关的对象）Box2Box3ColorFrustumMathMatrix3Matrix4PlaneQuaternionRaySphereSplineTriangleVector2Vector3Vector4Objects（物体）BoneLineLODMesh（网格，最常用的物体）MorphAnimMeshParticleParticleSystemRibbonSkinnedMeshSpriteRenderers（渲染器，可以渲染到不同对象上）CanvasRendererWebGLRenderer（使用WebGL渲染，这是本书中最常用的方式）WebGLRenderTargetWebGLRenderTargetCubeWebGLShaders（着色器，在最后一章作介绍）Renderers / RenderablesRenderableFace3RenderableFace4RenderableLineRenderableObjectRenderableParticleRenderableVertexScenes（场景）FogFogExp2SceneTextures（纹理）CompressedTextureDataTextureTextureExtrasFontUtilsGeometryUtilsImageUtilsSceneUtilsExtras / AnimationAnimationAnimationHandlerAnimationMorphTargetKeyFrameAnimationExtras / CamerasCombinedCameraCubeCameraExtras / CoreCurveCurvePathGyroscopePathShapeExtras / Geometries（几何形状）CircleGeometryConvexGeometryCubeGeometryCylinderGeometryExtrudeGeometryIcosahedronGeometryLatheGeometryOctahedronGeometryParametricGeometryPlaneGeometryPolyhedronGeometryShapeGeometrySphereGeometryTetrahedronGeometryTextGeometryTorusGeometryTorusKnotGeometryTubeGeometryExtras / HelpersArrowHelperAxisHelperCameraHelperDirectionalLightHelperHemisphereLightHelperPointLightHelperSpotLightHelperExtras / ObjectsImmediateRenderObjectLensFlareMorphBlendMeshExtras / Renderers / PluginsDepthPassPluginLensFlarePluginShadowMapPluginSpritePluginExtras / ShadersShaderFlaresShaderSprite

转载于:https://www.cnblogs.com/cndotabestdota/p/5746009.html

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

Three.js入门指南
1.threejs导入3d模型到web端,3d模型的文件格式可以找个建模软件转化为threejs所支持的格式,如.dae .obj .mtl stl gld等 harp.gl 3D地图渲染引擎 key ...
物理世界的互动之旅：Matter.js入门指南
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群本文简介戴尬猴,我是德育处主任欢迎来到<物理世界的互动之旅:Matter.js入门指南>. 本文将带您探索 Matter. ...
d3.js 入门指南 - 仪表盘
D3的全称是Data-Driven Documents(数据驱动的文档),是一个用来做数据可视化的JavaScript函数库,而JavaScript文件的后缀通常为.js,所以D3被称为D3.js. ...
d3.js 入门指南
说到数据可视化,我们会行到很多优秀的框架,像echarts.highcharts,这些框架很优雅,健壮,能满足我们对可视化的大部分需求,但是缺点也很明显,就是这些框架几乎是不可定制化的,当遇到特殊的需 ...
一起学微软Power BI系列-官方文档-入门指南(2)获取源数据
阅读目录 1.系列文章说明 2.入门指南(2)获取数据源 3.资源我们在文章: 一起学微软Power BI系列-官方文档-入门指南(1)Power BI初步介绍中,我们介绍了官方入门文档的第一章.今 ...
html5怎么兼容js 插件,Modernizr.js入门指南(HTML5CSS3浏览器兼容插件)
HTML5 和 CSS3 的快速发展,给我们带来了极大的便利,比如从此再也不用花费大量的时间只是为了设计一个圆角的效果. 但是!我们不能像控制机器一样来控制所有的人都一夜之间升级到现代浏览器,因为那些 ...
张雯莉 Olivia 成为首批 GitHub Stars!
点击上方"开源社"关注我们 | 编辑:陈梅梅 | 设计:叶修缘丶开源社引言张雯莉 Wenli (Olivia) 是 Apache ECharts (孵化中) 的项目负责人,她成 ...
PYTHON系列-从零开始的爬虫入门指南
入门 0.准备工作需要准备的东西: Python.scrapy.一个IDE或者随便什么文本编辑工具. 1.技术部已经研究决定了,你来写爬虫. 随便建一个工作目录,然后用命令行建立一个工程,工程名为m ...
Vue.js 入门指南之“前传”（含sublime text 3 配置）
题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的"入门",就算是"入门指南&quo ...

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

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

最新文章

热门文章