Three.js顾名思义3D的js库。是运行在浏览器的基于webgl的3D引擎。该引擎是github上的一个开源项目,下载地址:https://github.com/mrdoob/three.js/

1、搭建一个本地服务器。(本人用的是另外一台mac电脑的自带本地服务器)

2、下载three.js库。https://github.com/mrdoob/three.js/

准备好前面的操作后,接下来是创建一个项目的过程。

第一步:新建一个项目文件夹“Threejs”

第二步:在Threejs文件夹内新建一个html文件(index.html)。该文件是通过浏览器进入游戏的入口。

第三步:在Threejs文件夹内新建一个libs文件夹,用来存放three.js库和需要用到的其他库。

第四步:在Threejs文件夹内新建一个images文件夹,用来存放需要素材。

第五步:在Threejs文件夹内新建一个js文件夹,用来存放我们开发项目写的脚本。

html文件:

<!DOCTYPE html>
<html>
<head>
<title>three.js</title>
<script src="libs/three.js"></script>
<script src="js/main.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<script> </script>
<body>
</body>
</html>

下面开始写脚本。在js文件夹内新建一个main.js文件:


var renderer;
var scene;
var camera;
function init() {
scene = new THREE.Scene();//场景
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);//相机
renderer = new THREE.WebGLRenderer();//渲染
renderer.setClearColor(0x000000, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);
render();
}
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
window.onload = init;

代码分析:

init()函数是我们整个项目的入口,类似我们平时编程时的main函数。

上面的脚本中还包含scene; camera; renderer;分别是场景,相机,渲染器。每个项目必须得有这三样才能把显示模型显示在屏幕上。

scene:像电影上的场景,类似容器包含各种我们能看到的精灵、地图等。后面还会讲到灯光等。

camera:通过camera,我们才能看到场景上的画面,类似我们的眼睛,有视角等。

renderer:渲染器,把3D空间上的事物渲染到一个2D的平面。在屏幕上显示场景上的事物。

运行结果:

一片黑呜呜的。因为我们还没向场景添加任何东西。

我们可以向场景中添加一些元素。例如添加一个正方体,效果如下:



具体实现方法下一节讲。

<Three.js>(第一节)环境搭建的更多相关文章

  1. [Vue音乐项目] 第一节 环境搭建

    1.Node安装 登录官网,下载最新版本并安装: 在我的电脑内,执行以下操作:右键->属性->高级->环境变量->系统变量->path 查看是否有node的安装路径,没有 ...

  2. 安卓学习第一节--环境搭建及Android Studio 安装

    1.安装JDK 2.安装AS 安装参考网址 https://www.cnblogs.com/xiadewang/p/7820377.html 下载网址: http://www.android-stud ...

  3. centos LAMP第一部分-环境搭建 Linux软件删除方式,mysql安装,apache,PHP,apache和php结合,phpinfo页面,ldd命令 第十九节课

    centos LAMP第一部分-环境搭建  Linux软件删除方式,mysql安装,apache,PHP,apache和php结合,phpinfo页面,ldd命令 第十九节课 打命令之后可以输入: e ...

  4. node.js之开发环境搭建

    一.安装linux系统 (已安装linux可跳此步骤) 虚拟机推荐选择:VirtualBox 或者 Vmware (专业版永久激活码:5A02H-AU243-TZJ49-GTC7K-3C61N) 我这 ...

  5. centos LNMP第一部分环境搭建 LAMP LNMP安装先后顺序 php安装 安装nginx 编写nginx启动脚本 懒汉模式 mv /usr/php/{p.conf.default,p.conf} php运行方式SAPI介绍 第二十三节课

    centos  LNMP第一部分环境搭建 LAMP安装先后顺序  LNMP安装先后顺序 php安装 安装nginx  编写nginx启动脚本   懒汉模式  mv   /usr/local/php/{ ...

  6. 一、Android学习第一天——环境搭建(转)

    (转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 一. Android学习第一天——环境搭建 Android 开发环境的搭建 ...

  7. 《Node.js入门》CentOS 6.5下Node.js Web开发环境搭建笔记

    近期想尝试一下英特尔的基于WebRTC协同通信开发套件,所以须要在本地搭建Node.js Web的开发測试环境. 这里讲的是CentOS 下的搭建方法.使用Windows的小伙伴请參考: <No ...

  8. ThinkPHP第一课 环境搭建

    第一课 环境搭建 1.说明: ThinkPHP是一个开源的国产PHP框架,是为了简化企业级应用开发和敏捷WEB应用开发而诞生的. 最早诞生于2006年初.原名FCS.2007年元旦正式更名为Think ...

  9. Docker学习之——Node.js+MongoDB+Nginx环境搭建(一)

    最近在学习Node.js相关知识,在环境搭建上耗费了不少功夫,故此把这个过程写下来同大家分享一下,今天我先来介绍一下Docker,有很多人都写过相关知识,还有一些教程,在此我只想写一下,我的学习过程中 ...

  10. 【Android开发】 第一课 环境搭建教程

    Windows 开发环境部署: Android Studio 中文社区:http://www.android-studio.org/ 本教程将分为五个步骤来完成Android开发环境的部署. 第一步: ...

随机推荐

  1. Ansible@一个高效的配置管理工具--Ansible configure management--翻译(七)

    如无书面授权,请勿转载 Larger Projects Until now, we have been looking at single plays in one playbook file. Th ...

  2. bzoj1066: [SCOI2007]蜥蜴(最大流)

    1066: [SCOI2007]蜥蜴 题目:传送门 题解: 哇QTT大佬一眼秒算法...ORT 其实很容易就可以看出来是一道最大流 因为有边的使用限制,那么就可以直接当成是流量来处理嘛 因为是对点进行 ...

  3. JAVA设计模式之【代理模式】

    代理模式 通过代理对象间接访问 代购 客户端不想或者不能直接访问一个对象,可以通过一个称为代理的第三者来实现间接访问,该方案称为代理模式 角色 抽象主题角色Subject 声明真实主题类与代理类的公共 ...

  4. 在ubuntu下访问windows硬盘出现错误:Error mounting /dev/sda7 at /media

    在终端输入以下代码: sudo apt-get install ntfs-3g sudo ntfsfix /dev/sda7 运行完后: 这样就可以成功访问了.

  5. VC6之MAP文件生成及格式

    文件生成方式: 在 VC 中,我们可以按下 Alt+F7 ,打开“Project Settings”选项页,选择 C/C++ 选项卡,并在最下面的 Project Options 里面输入:/Zd , ...

  6. hiho1080 - 数据结构 线段树(入门题,两个lazy tag)

    题目链接 维护区间和,两个操作:一个是将某个区间设置成一个值,一个是将某个区间增加一个固定值 /**************************************************** ...

  7. HDU 1394 Minimum Inversion Number【 树状数组 】

    题意:给出n个数,每次可以把第一个数挪到最后一个位置去,问这n种排列里面的最小逆序对数 先把最开始的逆序对数求出来 然后对于一个数a[i],比它小的数有a[i] - 1个,比它大的数有n - a[i] ...

  8. HDU 1171 Big Event in HDU【01背包】

    题意:给出n个物品的价值和数目,将这一堆物品分给A,B,问怎样分使得两者的价值最接近,且A的要多于B 第一次做的时候,没有思路---@_@ 因为需要A,B两者最后的价值尽可能接近,那么就可以将背包的容 ...

  9. lua-C++ userdata使用

    lua-C++ userdata使用 所负责的产品使用非常灵活,可设置的参数上千个,而且还支持用户用lua进行流程控制,所以开发中要用到很多lua.C++混合编程.之前对这些也还是一知半解,只会依葫芦 ...

  10. shell-1.shell概述、2.shell脚本执行方式

    目录