1 下载Three.js代码

https://github.com/mrdoob/three.js/tree/master/build

2 引用方法

在HTML中添加以下代码：

<script type="text/javascript" src="js/three.js"></script>

3 定义Canvas元素

手动定义Canvas元素（WebGL渲染的需要）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>1</title>

    <script type="text/javascript" src="js/three.js"></script>

    <script>

        function init() {

        }

    </script>

</head>

<body onload="init()">

    <canvas id="mainCanvas" width="400px" height="300px"></canvas>

</body>

</html>

4 定义三大件

三大件指创建一个典型的Three.js程序中至少应包含的三个基本元素：渲染器、场景和照相机。

4.1 渲染器（Renderer）

4.2 场景（Scene）

4.3 照相机（Camera）

他们之间的关系

　　场景就像一个舞台，上面可以放各种各样的东西

　　渲染器就像舞台上的灯光，它决定了观众看到的东西是是什么样的效果

　　照相机就像观众的眼睛，观众站的位置不一样，看到的舞台上的东西也不会完全相同

　　而舞台上的东西则需要通过  scene.add() 来放上去

本节完整代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>1</title>

    <script type="text/javascript" src="js/three.js"></script>

    <script>

        function init() {

            // 定义三大件

            var renderer = new THREE.WebGLRenderer(  // 定义渲染器

                {

                    canvas:document.getElementById('mainCanvas') // 与手动定义的Canvas的id的名字一致

                    /*  也可以通过three.js自行生成Canvas元素

                    renderer.setSize(400,300);

                    document.getElementsByTagName('body')[0].appendChild(renderer.domElement); */

                }

            );

            renderer.setClearColor(0x000000);  // 将背景色设为黑（清除图像）

            var scene = new THREE.Scene()  // 定义场景

            var camera = new THREE.PerspectiveCamera(45,4/3,1,1000);  // 定义一个透视投影照相机

            camera.position.set(0,0,5);  // 设置照相机的坐标

            scene.add(camera)  // 将照相机添加进场景中

        }

    </script>

</head>

<body onload="init()">

    <canvas id="mainCanvas" width="400px" height="300px"></canvas>

</body>

</html>

 注：本系列Three.js文章主要为《Three.js入门指南》的学习笔记以及一些个人理解，欢迎交流讨论，感谢作者张雯莉~

 OVER~

Three.js的开始（附代码）_2的更多相关文章

  1. 三种动态加载js的jquery实例代码另附去除js方法

    !-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...

  2. Promise入门到精通(初级篇)-附代码详细讲解

    Promise入门到精通(初级篇)-附代码详细讲解 ​     Promise,中文翻译为承诺,约定,契约,从字面意思来看,这应该是类似某种协议,规定了什么事件发生的条件和触发方法. ​     Pr ...

  3. 分布式消息总线，基于.NET Socket Tcp的发布-订阅框架之离线支持，附代码下载

    一.分布式消息总线以及基于Socket的实现 在前面的分享一个分布式消息总线,基于.NET Socket Tcp的发布-订阅框架,附代码下载一文之中给大家分享和介绍了一个极其简单也非常容易上的基于.N ...

  4. 分享5种风格的 jQuery 分页效果【附代码】

    jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示      源码下载 各个 ...

  5. [JS]以下是JS省市联动菜单代码

    以下是JS省市联动菜单代码: 代码一: <html> <head> <title></title> <script language=" ...

  6. js文字向上滚动代码

    js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px;  background:#edfafd; padding-top:2px; ...

  7. Python进阶：函数式编程实例（附代码）

    Python进阶:函数式编程实例(附代码) 上篇文章"几个小例子告诉你, 一行Python代码能干哪些事 -- 知乎专栏"中用到了一些列表解析.生成器.map.filter.lam ...

  8. Js弹性漂浮广告代码

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  9. PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码

    PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码 看看新闻网>看引擎>开源产品 0人收藏此文章, 发表于8小时前(2013-09-06 00:39) ...

  10. c#万能视频播放器（附代码）

    原文:c#万能视频播放器(附代码) c#万能视频播放器 本人之前很多的文章中均提到了使用libvlc为播放器内核制作的播放器,也许有些朋友对此感兴趣,于是我用c#写了一个调用libvlc api实现的 ...

随机推荐

  1. MySQL基础（5） | 存储过程

    MySQL基础(5) | 存储过程 一.基础 结束符[重要] mysql的命令行执行每一条命令是以分号结尾的,也就是说识别是否为一条命令,是根据分号决定的. 然而存储过程中设计多条语句,很可能出现多个 ...

  2. 常用 PostgreSQL 脚本

    数据定义 数据库 -- 创建数据库 -- https://www.postgresql.org/docs/current/static/multibyte.html -- database_name, ...

  3. idea git pull fatal: bad config line 1 in file /.gitconfig 问题处理

    在网上搜好多都是直接改username和useremail的,但是没有说明原理. 因为我的电脑是新入职接手上一家的电脑 后来在git bash 里面用$ git config user.name 原来 ...

  4. centos7网卡启动不了

    网上查了很多资料了解网卡启动不了的原因,今天总结一下几种网卡启动不了的解决方案,以备参考. systemctl restart network         //重启网卡 返回报错: Restart ...

  5. Tunnel Warfare HDU - 1540

    #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> us ...

  6. 安装Jenkins到Ubuntu（APT）

    运行环境 系统版本:Ubuntu 16.04.4 LTS 软件版本:Jenkins-2.176.2 硬件要求:最低内存:256MB.磁盘:1GB 安装过程 1.配置APT-Jenkins存储库 APT ...

  7. Python安装和配置环境变量（简明教程）

    声明:借鉴Python 简明教程 安装我们在本书中提到的「Python 3」指的是 Python 版本大于或等于 Python 3.6.0. 针对Python3.6.版本:注意数据的缓存机制 # ## ...

  8. Unity3D制作3D虚拟漫游场景（一）

    开始前先说一些题外话,本来这个工程是已经完成了超过一半了,然而由于手残重装了系统不小心删除了,现在只好再做一遍了.顺便写一下博供今后写代码参考. 这是一款使用unity3D开发的虚拟城市漫游游戏,实际 ...

  9. 用友UAP NC 开发环境抛出"JDK默认编辑器找不到"

    此节点是升级65之前开发的,已经很久不使用,今天在开发环境使用,点查询抛出此异常. 最后问了人解决方法,就是往JRE系统库加入对应的jar包

  10. 快速安装字体.bat批处理脚本

    因为经常要做些美工,暑假才换的笔记本上还没装什么字体,这次找到了字体资源,索性一次性装了~ 下载下来的字体包是\(.zip\)压缩文件,解压后如果一个个点\(.ttf\)文件来安装比较麻烦,所以写了一 ...