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. Python+PyQT5的子线程更新UI界面的实例《新手必学》

    今天小编就为大家分享一篇Python+PyQT5的子线程更新UI界面的实例,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧子线程里是不能更新UI界面的,在移动端方面.Android的U ...

  2. Kong 系列【六】添加插件---ip-restriction之黑白名单

    写在前边 本地postMan请求http://192.168.130.131:8000/test-route,可以正常访问,本地IP:192.168.130.1同样在虚拟机环境192.168.130. ...

  3. C++ Primer 抄书笔记（二）——变量和基本类型（上）

    一.基本内置类型 base build-in type[算数类型/类型转换/字面值常量] 基本内置类型(算数类型arithmetic type(整型integral type(字符,布尔bool),浮 ...

  4. javaSE学习笔记（17）---锁

    javaSE学习笔记(17)---锁 Java提供了种类丰富的锁,每种锁因其特性的不同,在适当的场景下能够展现出非常高的效率.本文旨在对锁相关源码(本文中的源码来自JDK 8).使用场景进行举例,为读 ...

  5. P2094运输

    -------------------- 链接:Miku ------------------- 这是一道水贪心,很容易想到做法就是把最贵的两个放在一块,让后当成一个重新放回队列 ---------- ...

  6. POJ 3253 Fence Repair 贪心 优先级队列

    Fence Repair Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 77001   Accepted: 25185 De ...

  7. thinkPHP5.1模型User设计

    创建一个User类,再引入think\Model,让User类继承Model 例: <?php namespace app\index\model; use think\Model; class ...

  8. 一台服务器搭建部署两个或多个Redis实例

    问题描述: 今天程序那边说测试服里面有两个项目,为了数据不冲突,想一台服务器搞两个Redis实例, 然后自己这边查询了一下,确实可以这么整,只需要区分端口号和区分配置文件方面就行, 原理与nginx和 ...

  9. js磁力线代码（非压缩，自己在压缩的版本上优化了代码，易于阅读）

    拿去白嫖吧: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" ...

  10. CodingPlus Blog Update Info

    CodingPlus更新啦! 我就是记录一下!您想知道现在的博客是第几代的吗?您想知道CodingPlus博客的发展历程吗?来,让我们一起看看! V3.5 最新版了! V3.5.0 很多人看到自然觉得 ...