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. 得心应用的Vue高级技巧---vue中文社区

    1,require.context()一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多 ...

  2. Umi 小白纪实（三）—— 震惊！路由竟然如此强大！

    在<Umi 小白纪实(一)>中有提到过简单的路由配置和使用,但这只是冰山一角 借用一句广告词,Umi 路由的能量,超乎你的想象 一.基本用法 Umi 的路由根结点是全局 layout  s ...

  3. Android中通过Fragment进行简单的页面切换

    首先是activity中的布局 <?xml version="1.0" encoding="utf-8"?> <androidx.constr ...

  4. 回炉重造之重读Windows核心编程-001-错误处理

    Windows处理错误靠的是API的返回值,类型不止一种种: VOID,函数不可能失败,Windows API的返回值很少是这个情况. BOOL,如果函数失败,则返回值是0,否则返回是非零值.不要测试 ...

  5. 程序员为什么害怕低代码？ZT

    转自:https://www.jianshu.com/p/cd89fe94cd30 低代码 是一种近些年兴起的企业软件快速开发技术和工具.借助低代码使用者无需编码即可完成企业应用的常用功能,少量编码扩 ...

  6. AGC014-F Strange Sorting

    题意 \(n\)-排列,反复进行:将序列中为前缀最大值的数全部移动到序列末(两种数不改变相对位置),问经过多少次后第一次全部升序排列 做法 定义:用high表示为前缀最大值,low则反之 考虑忽略\( ...

  7. LeetCode 面试题 02.06. 回文链表

    题目链接:https://leetcode-cn.com/problems/palindrome-linked-list-lcci/ 编写一个函数,检查输入的链表是否是回文的. 示例 1: 输入: 1 ...

  8. 如何利用 WPS Office 进行 IIS Log 分析

    找到 IIS Log 打开 Internet Information Service (IIS) Manager 点击左侧 Connections > Sites,在右侧 Sites 列表中定位 ...

  9. Redis 安装 (未)

    Redis 安装步骤 1. 下载地址 2.  版本选择 3.  配置主要参数 4.  关联操作

  10. SQL Server远程数据库操作(备份、还原等)

    · SQL Server远程数据库备份到本地: exp sauser/sapassword@192.168.8.233:1433/DBName file=d:/backup.dmp OWNER=sum ...