动手写第一个 Three.js 程序 认证专享

成为vip会员,免费看所有精品课程
  • 目录

    目录 收起>

    本课程介绍建立基本三维场景所需要的元素,并进一步添加相机控制、加载 OBJ 模型和添加天空盒以丰富场景。本课程通过动手写一个三维场景,让大家了解 Three.js 开发的基本过程,体验 Three.js 的高效与便捷。

    1.动手写一个简单的场景 00:13:31

    本课时讲解如何准备所需的开发环境,并使用最少的代码动手编写一个简单的 WebGL 场景。

    2.加入相机控制 00:08:34

    本课时讲解如何添加相机控制器,使场景能够进行鼠标交互。

    3.加载外部 OBJ 模型 00:08:13

    本课时将介绍外部模型的加载,并说明如何加入 OBJ 模型到场景中。

    4.加入天空盒 00:05:22

    本课时讲解如何添加天空盒到场景中。

    5.添加背景音乐 00:04:20

    本课时讲解如何使用 audio 标签为三维场景添加背景音乐。
  • 提问

    提交问题
  • 下载

  • 线路

    视频太卡?试试切换线路 √ 线路1 √ 线路2
  • 收藏

    收藏课程
  • 分享

连播

连续播放

关灯

关灯模式
视频加载太慢?

我们有两条线路可以选择,试试切换线路吧

动手写第一个 Three.js 程序

5课时,40分钟2015-08-03
huqingchao
huqingchao

极客学院签约布道师

课程背景:
Three.js 官方案例看起来非常吸引人,不过对于初学者,还是应该从简单的例子开始。动手写一个最简单的三维场景,逐步加入所需元素并丰富场景。通过这个过程,大家可以很容易地掌握 Three.js 的开发流程。

核心内容:
1.开发环境准备
2.三维场景基本要素
3.相机控制
4.OBJ 模型
5.天空盒

软件环境:Windows7、Chrome、WebStorm、Three.js

是否提供资料:

课程等级:初级

适合人群:
具有 HTML/CSS/JavaScript/三维动画基础的开发者
  • 技术问答
  • 1

    动手写一个简单的场景

    13:31

    本课时讲解如何准备所需的开发环境,并使用最少的代码动手编写一个简单的 WebGL 场景。

  • 2

    加入相机控制

    08:34

    本课时讲解如何添加相机控制器,使场景能够进行鼠标交互。

  • 3

    加载外部 OBJ 模型

    08:13

    本课时将介绍外部模型的加载,并说明如何加入 OBJ 模型到场景中。

  • 4

    加入天空盒

    05:22

    本课时讲解如何添加天空盒到场景中。

  • 5

    添加背景音乐

    04:20

    本课时讲解如何使用 audio 标签为三维场景添加背景音乐。

相关课程

  • Three.js 的魅力

    本课程将通过展示优秀作品和分析相关案例,让大家认识 Three.js 的魅力和价值。先不要去看 API 和代码了,先来领略一下 Three.js 的迷人之处吧。

    4课时 50分钟
    初级
    11069人学习
  • React 属性和状态详解

    React 的数据流动途径是属性和状态,这两者也是 React 的难点之一。本课程会讲解什么是属性和状态、两者的区别和联系以及如何正确使用属性和状态。

    4课时 41分钟
    初级
    12190人学习
  • React 组件的协同使用

    本课程会介绍多个组件之间如何协同使用,学完本课程之后可以构建结构复杂的组件。

    4课时 58分钟
    中级
    11736人学习
  • React 表单详解

    本课程会详细介绍表单写法、表单元素的用法和表单事件的监听。学完本课程之后可以使用最适合 React 的方式来编写表单组件。

    4课时 55分钟
    中级
    13335人学习