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. ORA-01261: Parameter db_recovery_file_dest destination string cannot be translat

    查看了Oracle的初始化文件. $cat /oracle/oms/102_64/dbs/initSID.ora 如:db_recovery_file_dest='/oracle/oms/flash_ ...

  2. [jzoj 5343] [NOIP2017模拟9.3A组] 健美猫 解题报告 （差分）

    题目链接: http://172.16.0.132/senior/#main/show/5343 题目: 题解: 记旋转i次之后的答案为$ans_i$,分别考虑每个元素对ans数组的贡献 若$s_i& ...

  3. [JZOJ 5875] [NOIP2018提高组模拟9.20] 听我说，海蜗牛 解题报告（BFS+二分）

    题目链接: http://172.16.0.132/senior/#main/show/5875 题目: 题解: 注意这题只能经过开放的港口 我们考虑用vector存下每个点不能到的点,并把并让vec ...

  4. 15-11-24 system同步与异步

    //打开关闭qq #define _CRT_SECURE_N0_WARNINGS #define _CRT_SECURE_NO_WARNINGS #include<stdlib.h> #i ...

  5. python中使用easygui

    在阅读<跟孩子一起学编程>的同学对easygui应该不会陌生.书中给出的下载链接有时会连不上,可以试一下http://www.ferg.org/easygui/download.html ...

  6. 51nod 1435 位数阶乘 （手动计算）

    题目: 1435 位数阶乘 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 X是一个n位数的正整数 (x=a0a1...an−1) ...

  7. hiho1605 - 递推+1000000000=矩阵快速幂

    题目链接 题目大意 小Hi最近对生成树(包含所有顶点的联通无环子图.)非常的感兴趣,他想知道对于特定的简单平面无向图是不是存在求生成树个数的简单方法. 小Hi定义了这样的图:一个以{0,1,2……n} ...

  8. schema文件及XML文件的DOM和Sax解析

    schema文件 <?xml version="1.0" encoding="UTF-8"?> <schema xmlns="htt ...

  9. echars自定义提示框位置

    tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)", position:function ...

  10. NodeJS学习笔记 (5)网络服务-http-req(ok)

    原文:https://github.com/chyingp/nodejs-learning-guide 自己敲代码: 概览 本文的重点会放在req这个对象上.前面已经提到,它其实是http.Incom ...