<Three.js>（第一节）环境搭建
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>（第一节）环境搭建的更多相关文章
- [Vue音乐项目] 第一节 环境搭建
1.Node安装 登录官网,下载最新版本并安装: 在我的电脑内,执行以下操作:右键->属性->高级->环境变量->系统变量->path 查看是否有node的安装路径,没有 ...
- 安卓学习第一节--环境搭建及Android Studio 安装
1.安装JDK 2.安装AS 安装参考网址 https://www.cnblogs.com/xiadewang/p/7820377.html 下载网址: http://www.android-stud ...
- centos LAMP第一部分-环境搭建 Linux软件删除方式,mysql安装,apache,PHP,apache和php结合,phpinfo页面,ldd命令 第十九节课
centos LAMP第一部分-环境搭建 Linux软件删除方式,mysql安装,apache,PHP,apache和php结合,phpinfo页面,ldd命令 第十九节课 打命令之后可以输入: e ...
- node.js之开发环境搭建
一.安装linux系统 (已安装linux可跳此步骤) 虚拟机推荐选择:VirtualBox 或者 Vmware (专业版永久激活码:5A02H-AU243-TZJ49-GTC7K-3C61N) 我这 ...
- 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/{ ...
- 一、Android学习第一天——环境搭建（转）
(转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 一. Android学习第一天——环境搭建 Android 开发环境的搭建 ...
- 《Node.js入门》CentOS 6.5下Node.js Web开发环境搭建笔记
近期想尝试一下英特尔的基于WebRTC协同通信开发套件,所以须要在本地搭建Node.js Web的开发測试环境. 这里讲的是CentOS 下的搭建方法.使用Windows的小伙伴请參考: <No ...
- ThinkPHP第一课 环境搭建
第一课 环境搭建 1.说明: ThinkPHP是一个开源的国产PHP框架,是为了简化企业级应用开发和敏捷WEB应用开发而诞生的. 最早诞生于2006年初.原名FCS.2007年元旦正式更名为Think ...
- Docker学习之——Node.js+MongoDB+Nginx环境搭建（一）
最近在学习Node.js相关知识,在环境搭建上耗费了不少功夫,故此把这个过程写下来同大家分享一下,今天我先来介绍一下Docker,有很多人都写过相关知识,还有一些教程,在此我只想写一下,我的学习过程中 ...
- 【Android开发】 第一课 环境搭建教程
Windows 开发环境部署: Android Studio 中文社区:http://www.android-studio.org/ 本教程将分为五个步骤来完成Android开发环境的部署. 第一步: ...
随机推荐
- JAVA网络编程--UDP通信
首先网络传输数据需了解例如以下三点 1.找到对方IP 2.数据要发送到对方指定的应用程序上,为了标识这些应用程序,所以给这些网络应用程序用数字进行了标识.为了方便称呼这个数字,叫做port,逻辑por ...
- 基于对话框的应用程序，点击button打开一个网页
核心:使用Webbrowser控件 加入一个新的对话框,右键 Insert ActiveX control,选中 双击对话框生成响应的类(Web).并为webbrowser绑定成员变量(m_Web) ...
- Thrift源代码分析（七）-- TServerserver分析
Thrift採用了TServer来作为server的抽象,提供了多种类型的server实现.用TServerTransport作为server的Acceptor抽象,来监听端口.创建clientSoc ...
- jQuery操作元素的属性与样式
本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt= ...
- tensorflow入门教程和底层机制简单解说——本质就是图计算，自动寻找依赖，想想spark机制就明白了
简介 本章的目的是让你了解和运行 TensorFlow! 在开始之前, 让我们先看一段使用 Python API 撰写的 TensorFlow 示例代码, 让你对将要学习的内容有初步的印象. 这段很短 ...
- hdoj--3666--THE MATRIX PROBLEM（差分约束+SPFA深搜）
THE MATRIX PROBLEM Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Other ...
- xBIM 基础14 使用LINQ实现最佳性能（优化查询）
系列目录 [已更新最新开发文章,点击查看详细] LINQ代表语言集成查询,它是3.5版以来的.NET Framework的一部分.它实现延迟执行,这意味着您可以链接查询语句,并且在您实际迭代结 ...
- 线上服务CPU100%问题快速定位实战--转
来自微信公众号 架构师之路 功能问题,通过日志,单步调试相对比较好定位. 性能问题,例如线上服务器CPU100%,如何找到相关服务,如何定位问题代码,更考验技术人的功底. 58到家架构部,运维部,58 ...
- (转载) 百度地图工具类封装(包括定位,附近、城市、范围poi检索,反地理编码)
目录视图 摘要视图 订阅 赠书 | 异步2周年,技术图书免费选 程序员8月书讯 项目管理+代码托管+文档协作,开发更流畅 百度地图工具类封装(包括定位,附近.城市.范围poi检索, ...
- Date日期类 Calendar日历类 完成可视化日历
package com.test; import java.text.DateFormat; import java.text.ParseException; import java.text.Sim ...