web前端开发

ThreeJS

官网对Threejs的介绍非常简单:“Javascript 3D library”。openGL是一个跨平台3D/2D的绘图标准,WebGL则是openGL在浏览器上的一个实现。web前端开发人员可以直接用WebGL接口进行编程,但WebGL只是非常基础的绘图API,需要编程人员有很多的数学知识、绘图知识才能完成3D编程任务,而且代码量巨大。Threejs对WebGL进行了封装,让前端开发人员在不需要掌握很多数学知识和绘图知识的情况下,也能够轻松进行web 3D开发,降低了门槛,同时大大提升了效率。

  • HTML
  • CSS
  • HTML5
  • CSS3
  • JavaScript

ThreeJS

  • Three.js入门教程03—— 浏览器支持(Browser support)

    Three.js入门教程03—— 浏览器支持(Browser support)

    在所有现代浏览器中,Three.js可以使用WebGL来渲染场景。对于较旧的浏览器,特别是Internet Explorer 10或者更低版本浏览器,你将需要回落到其它renderers(CSS2DRenderer、CSS3DRenderer、SVGRenderer)。此外,你或许不得不包含一些额外的“填充物”来解决兼容性问题,特别是当你使用/examples目录中的文件时。

    注意:如果你并不需要支持较旧的浏览器,那就不推荐使用其他渲染器来进行渲染,因为与WebGLRenderer相比,其它渲染器渲

    admin:杨小二时间:2019-08-12

    阅读全文
  • Three.js入门教程07—— 画线(Drawing lines)

    Three.js入门教程07—— 画线(Drawing lines)

    假设你将要画一个圆或者画一条线,而不是一个线框模型,或者说不是一个Mesh(网格)。 第一步我们要做的,是设置好renderer(渲染器)、scene(场景)和camera(相机)-(如果对这里所提到的东西,还不了解,请阅读本手册第一章“创建一个场景 - Creating a scene”)。

    admin:杨小二时间:2019-08-12

    阅读全文
  • Three.js入门教程11——如何废置对象(How to dispose of objects)

    Three.js入门教程11——如何废置对象(How to dispose of objects)

    为了提高性能,并避免应用程序中的内存泄露,一个重要的方面是废置未使用的类库实体。 每当你创建一个three.js中的实例时,都会分配一定数量的内存。然而,three.js会创建在渲染中所必需的特定对象, 例如几何体或材质,以及与WebGL相关的实体,例如buffers或着色器程序。 非常值得注意的是,这些对象并不会被自动释放;相反,应用程序必须使用特殊的API来释放这些资源。 本指南简要概述了这一API是如何使用的,以及哪些对象是和这一环境相关的。

    admin:杨小二时间:2019-08-12

    阅读全文
  • Three.js入门教程02—— 通过模块来引入(Import via modules)

    Three.js入门教程02—— 通过模块来引入(Import via modules)

    虽然通过script标签来引入three.js是一个能够快速起步、快速运行的方式,但这种方式对于一些具有较长生命周期的项目来说是有一些缺点的。比如说:
    你必须手动获得并在你的源代码中包含这个库的一个拷贝
    更新这个库的版本是一个手动操作的过程
    在检查新版本的库时,你的版本差异对比将会被许多行给弄乱。
    使用像npm这样的依赖包管理器可以很好地避免这些需要注意的问题,只需在你的电脑上下载并导入你所需要的库的版本即可。

    admin:杨小二时间:2019-08-12

    阅读全文
  • 【Threejs 基础教程】第1章 开启Threejs之旅(一)

    【Threejs 基础教程】第1章 开启Threejs之旅(一)

    技术在进步,如果半年不学习新技术,那么我就落后了。本教程将带你进入一个全新的技术世界,它叫做WebGL。

    我非常激动,WebGL给了我很多灵感。让我去创造一个三维的世界,去创造一个神奇的网站或者游戏。最为神奇之处是它能够在浏览器上运行。

    随着数月的流逝,我们想一想90年代的浏览器,它只能显示简单的文字和图片;大约在2000左右,浏览器已经能够显示丰富的多媒体信息了;但是相对与传 统的桌面程序来说,它还是有一些不足,例如,很难写出高质量的三维程序。

    admin:杨小二时间:2019-08-12

    阅读全文
  • Three.js入门教程01—— 创建一个场景(Creating a scene)

    Three.js入门教程01—— 创建一个场景(Creating a scene)

    第一个属性是视野角度(FOV)。视野角度就是无论在什么时候,你所能在显示器上看到的场景的范围,它的值是一个角度。
    第二个值是长宽比(aspect ratio)。 也就是你用一个物体的宽除以它的高的比值。比如说,当你在一个宽屏电视上播放老电影时,可以看到图像仿佛是被压扁的。
    接下来的两个值是远剪切面和近剪切面。 也就是说当物体所在的位置比摄像机的远剪切面远或者所在位置比近剪切面近的时候,该物体超出的部分将不会被渲染到场景中。现在你或许并不用担心这个值的影响,但未来为了获得更好的渲染性能,你将可以在你的应

    admin:杨小二时间:2019-08-12

    阅读全文
  • Three.js入门教程09—— 载入3D模型(Loading 3D models)

    Three.js入门教程09—— 载入3D模型(Loading 3D models)

    目前,3D模型的格式有成千上万种可供选择,但每一种格式都具有不同的目的、用途以及复杂性。 虽然three.js已经提供了多种导入工具, 但是选择正确的文件格式以及工作流程将可以节省很多时间,以及避免遭受很多挫折。某些格式难以使用,或者实时体验效率低下,或者目前尚未得到完全支持。

    对大多数用户,本指南向你推荐了一个工作流程,并向你提供了一些当没有达到预期效果时的建议。

    admin:杨小二时间:2019-08-12

    阅读全文
  • 基于 Threejs 的 web 3D 开发入门

    基于 Threejs 的 web 3D 开发入门

    随着软硬件的发展,在PC和移动端浏览器上进行web 3D开发的条件已经基本成熟了,出现了不少js 3D库,Threejs是js 3D库中的佼佼者。国内也有企业开始做一些应用尝试,某宝2016年双11就用ThreeJS做了一个比较酷炫的3D宣传页面刷爆了朋友圈。
    下图是用Threejs绘制的一个3D立方体动画的截图,在这个demo里,立方体会动态的旋转,threeJS 30行代码就可以完成这么一个demo。Threejs让没有丰富3D编程经验的web前端开发人员,也可以快速上手开发web 3D应用。

    admin:杨小二时间:2019-08-12

    阅读全文