Three.js基础探寻一

Three.js基础探寻一

 

1.webGL

  一种网络标准,定义了一些较底层的图形接口。

2.Three.js

  一个3Djs库,webGL开源框架中比较优秀的一个。除了webGL以外,Three.js还提供了基于Canvas、SVG标签的渲染器。

  这是一个开源项目

3.环境

  找一个喜欢的jsIDE。调试建议使用Chrome或者Firefox。

4.下载

  传送门

5.使用

<head>

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

</head>

  webGL的渲染需要canvas,Three.js可以生成,也可以自定义canvas:

<body onload="init()">

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

</body>

在js中定义一个init函数,在HTML加载后执行:

function init(){

  // ...

}

  Three.js程序要包括三大组建:

  场景(Scene)、相机(Camera)、渲染器(Renderer),以及你创建的物体。

6.渲染器(Renderer)

  渲染器将和Canvas元素进行绑定,接着上面的:

var renderer = new THREE.WebGLRenderer({

    canvas: document.getElementById(‘mainCanvas’)

});

  如果想要Three.js生成Canvas元素,在HTML中就不需要定义canvas,在js中可以这样写:

var renderer = new THREE.WebGLRenderer();

renderer.setSize(400,300);

document.getElementsByTagName(‘body’)[0].appendChild(renderer.domElement);

  第二行设置了Canvas的宽高。第三行将渲染器对应的Canvas元素添加到<body>中。

  下面这句可以设置背景为黑色:

renderer.setClearColor(0x000000);

7.场景(Scene)

  在Three.js中添加的物体都是添加到场景中的。在程序最开始的时候进行实例化,然后将物体添加到场景中即可。

var scene = new THREE.Scene();

8.照相机(Camera)

  webGL和Three.js使用的坐标系是右手坐标系:

  相机分正投影相机和透视投影相机。这里先定义一直透视投影的照相机,:

var camera = new THREE.PerspectiveCamera(45,4/3,1,1000);

//四个参数分别对应:视角、近处的裁面的距离、远处的裁面的距离、实际窗口的纵横比(后面会详细讨论)

camera.position.set(0,0,5);//设置相机位置

scene.add(camera);//添加到场景中。

9.长方体

  创建一个x,y,z方向长度分别为1、2、3的红色长方体:

var cube = new THREE.Mesh(new THREE.CubeGeometry(1,2,3),

  new THREE.MeshBasicMaterial({
 
    color: 0xff0000

  })

);

scene.add(cube);

  其中,THREE.Mesh表示网格模型;THREE.CubeGeometry表示立方体盒子;MeshBasicMaterial是一种材质:对光照无感,给几何体一种简单的颜色或显示线框。最后添加到场景中。

10.渲染

  在定义了场景中的物体,设置好的照相机之后,渲染器就知道如何渲染出二维的结果了。调用渲染器的渲染函数,就能使其渲染一次了。

renderer.render(scene, camera);

11.示例

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>3.js测试一</title>

</head>

<body onload="init()">

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

<script type="text/javascript" src="js/three.min.js"></script><!--路径改成你的-->

        <script type="text/javascript">

            function init() {

                // renderer 渲染器

                var renderer = new THREE.WebGLRenderer({

                    canvas: document.getElementById('mainCanvas')  //绑定canvas

                });

                renderer.setClearColor(0x000000); // black 

                // scene 场景

                var scene = new THREE.Scene();  //实例化场景

                // camera 照相机

                var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);  //透视投影相机参数设置

                camera.position.set(0, 0, 5);  //相机位置设置

                scene.add(camera);  //添加到场景

                // a cube in the scene 创建的物体

                var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),  //创建网格,参数一:几何体(立方体)

                        new THREE.MeshBasicMaterial({  //参数二:材质(网格基础材质)
                            color: 0xff0000  //设置颜色

                        })

                );

                scene.add(cube);  //添加到场景

                // render 渲染

                renderer.render(scene, camera);

            }

        </script>

</body>

</html>

  渲染的效果是:

  下一篇: Three.js基础探寻二

  整理自张雯莉《Three.js入门指南》

  其他参考:WebGL中文网

 
分类: HTML5

Three.js基础的更多相关文章

  1. js 基础篇(点击事件轮播图的实现)

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  2. js 基础

    js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...

  3. js基础练习二之简易日历

    今天学到了js基础教程3,昨天的课后练习还没来的及做,这个是类似简易日历的小案例,视频还没听完,今晚继续...... 先看效果图: 其实做过前面的Tab选项卡,这个就很好理解了,通过鼠标放在不同月份月 ...

  4. [JS复习] JS 基础知识

    项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display  :inline or bloc ...

  5. JS基础(超级简单)

    1     JS基础(超级简单) 1.1 数据类型 1.1.1   基本类型: 1)        Number:特别注意:NaN的检测方法:Nan!=NaN;或者使用isNaN方法 2)       ...

  6. Node.js基础与实战

    Node.js基础与实战 Node.jsJS高级进阶 NODE原理与解析 REPL交互环境 模块与NPM Buffer缓存区 fs文件操作 Stream流 TCP&UDP 异步编程 HTTP& ...

  7. js基础到精通全面教程--JS教程

    适合阅读范围:对JavaScript一无所知-离精通只差一步之遥的人 基础知识:HTML JavaScript就这么回事1:基础知识 1 创建脚本块 1: <script language=”J ...

  8. JS基础知识总结

      js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划() ...

  9. js基础篇——call/apply、arguments、undefined/null

    a.call和apply方法详解 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象 ...

  10. js基础知识总结(2016.11.1)

    js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...

随机推荐

  1. Js 验证中文字符长度

    代码如下: //Oracle Varchar2 一个中文对应3个Byte,所以用3个x替换 var commentValue = commentValue.replace(/[^\x00-\xff]/ ...

  2. sublime 自动编译

    Tools --> Build System --> New: { "shell_cmd": "cc.bat \"$file\"" ...

  3. ubuntu显示桌面的快捷键,以及修改方法

    在ubuntu下面,快速显示桌面,你可以这样做. 1,ctrl+alt+d (默认的) 2,alt+tab 可以切换到桌面 但是我想把它修改成和windows一样的,我该怎么做呢? 其实很简单. 系统 ...

  4. Ombrophobic Bovines 分类: POJ 图论 最短路 查找 2015-08-10 20:32 2人阅读 评论(0) 收藏

    Ombrophobic Bovines Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 16539 Accepted: 3605 ...

  5. LeetCode(7) - Reverse Integer

    题目的要求就是要反转一个Integer,例如输入123,则输出321,这一题比较tricky的地方就是它有可能越界,就是说1234567899,反过来是9987654321是一个越界的Integer, ...

  6. 编译android后找不到ramdisk-u.img[已解决]

    --- --- #!/bin/bash OUTDIR=out/target/product/tiny4412AHOSTBIN=out/host/linux-x86/bin # install vend ...

  7. [转载]移动终端浏览器初始设置apple-mobile-web-app-capable

    这两句话的确很有用,有了它,手机访问的时候像样了. 原文地址:移动终端浏览器初始设置apple-mobile-web-app-capable作者:素水凌心 移动终端浏览器默认设置视口的宽度和初始规模. ...

  8. Vue2.0父子组件之间和兄弟组件之间的数据交互

    熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结 ...

  9. Linux系列教程(十二)——Linux软件包管理之yum在线管理

    上一篇博客我们介绍了rpm包管理之rpm命令管理,我们发现在使用rpm命令手动安装rpm包的时候,会发现安装遇到到的依赖让你痛不欲生,安装一个rpm时会要先先安装某个依赖的rpm,而安装这个依赖的rp ...

  10. css学习の第五弹—单位和值

    一. >>1.颜色表示方法总结: 1.英文命令颜色 前面几个小节中经常用到的就是这种设置方法: p{color:red;} 2.RGB颜色 这个与 photoshop 中的 RGB 颜色是 ...