Three.js的开始（附代码）

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的更多相关文章

三种动态加载js的jquery实例代码另附去除js方法
!-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...
Promise入门到精通(初级篇)-附代码详细讲解
Promise入门到精通(初级篇)-附代码详细讲解 Promise,中文翻译为承诺,约定,契约,从字面意思来看,这应该是类似某种协议,规定了什么事件发生的条件和触发方法. Pr ...
分布式消息总线，基于.NET Socket Tcp的发布-订阅框架之离线支持，附代码下载
一.分布式消息总线以及基于Socket的实现在前面的分享一个分布式消息总线,基于.NET Socket Tcp的发布-订阅框架,附代码下载一文之中给大家分享和介绍了一个极其简单也非常容易上的基于.N ...
分享5种风格的 jQuery 分页效果【附代码】
jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示源码下载各个 ...
[JS]以下是JS省市联动菜单代码
以下是JS省市联动菜单代码: 代码一: <html> <head> <title></title> <script language=" ...
js文字向上滚动代码
js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px; background:#edfafd; padding-top:2px; ...
Python进阶：函数式编程实例（附代码）
Python进阶:函数式编程实例(附代码) 上篇文章"几个小例子告诉你, 一行Python代码能干哪些事 -- 知乎专栏"中用到了一些列表解析.生成器.map.filter.lam ...
Js弹性漂浮广告代码
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码
PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码看看新闻网>看引擎>开源产品 0人收藏此文章, 发表于8小时前(2013-09-06 00:39) ...
c#万能视频播放器（附代码）
原文:c#万能视频播放器(附代码) c#万能视频播放器本人之前很多的文章中均提到了使用libvlc为播放器内核制作的播放器,也许有些朋友对此感兴趣,于是我用c#写了一个调用libvlc api实现的 ...

随机推荐

【idea激活码】，【WebStorm激活码】，【DataGrip激活码】，【IntelliJ 全家桶系列】，【定期更新】，【第一期】
IntelliJ IDEA.PyCharm.PhpStorm.WebStorm.RubyMide.AppCode.CLion.GoLand.DataGrip.Rider.Android Studio可 ...
oracle数据泵导入导出部分用户
问题描述:需要将140服务器中的tbomnew实例下的部分用户导入到118服务器下的tbompx实例中,本次导入导出的两个数据库均为19C 部分用户名:CORE,MSTDATA,BOMMGMT,CFG ...
ipad的12系统里提示更新到ipdos13，原来安装在12上的app是不是没有了，要重新下载
ipad的12系统里提示更新到ipdos13,原来安装在12上的app是不是没有了,要重新下载更新后原来的WiFi密码都还在不用重新连接WiFi,桌面壁纸也是原来12系统上的在Ipad的设置里将1 ...
What is NodeJS(学习过程)
为什么要学习node.首先是听说了这个和前后端分离有很大的关系.node作为一个基础的技术,需要提前学习.学习node,不打算直接先跟着视频去学习老师们的课程.因为想自己找到一种适合自己的学习方法.之 ...
JavaScript语法规则+JavaScript数据类型
JavaScript: ECMAScript + BOM +DOM javascript 标识符命名规则: 1.只能是字母.数字.下划线.$ 2.不能以数字开头 3.不能使用关键字和保留字省略var ...
Vue如何动态配置img标签的图片源src
(一)首先通过绑定数据给src提供图片地址 <template> <div> <img :src=image_path /> </div> </t ...
DC-8靶机渗透实战
前言: 本文将讲述通过信息收集,再web站点的sql注入漏洞加john爆破登录后台,然后找到远程代码执行漏洞getshell,最后用exim4命令提权漏洞进行权限提升拿到最终的flag. 0x00 环 ...
论文阅读笔记（二十二）【CVPR2017】：See the Forest for the Trees: Joint Spatial and Temporal Recurrent Neural Networks for Video-based Person Re-identiﬁcation
Introduction 在视频序列中,有些帧由于被严重遮挡,需要被尽可能的“忽略”掉,因此本文提出了时间注意力模型(temporal attention model,TAM),注重于更有相关性的帧. ...
关于Git GUI克隆代码
1.首先需要使用Git GUI生成一个SSH秘钥并将其拷贝到远程(码云或者GitHub)账号下的SSH公钥中(以码云为例) 将上一步生成的SSH密钥拷贝到下面的码云的公钥中 2.拷贝下码云上代码的SS ...
JN_0016：查找端口占用
Windows查看端口占用一. 查看所有进程占用的端口在开始-运行-cmd,输入:netstat –ano 可以查看所有进程二.查看占用指定端口的程序当你在用tomcat发布程序时,经常会 ...

Three.js的开始（附代码）_2