ThreeJS笔记(一)

ThreeJS的本质是WebGL，但是webGL使用起来不是很方便，threeJS则提供了比较上层的封装，开发起来更加轻便。

环境配置

  • 首先从github下载源码
  • 把ThreeJS包含到工程目录
  • 写个代码测试一下

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>ThreeJS测试</title>

    <script src="three.js"></script>

    <script src="index.js"></script>

</head>

<body>

</body>

</html>

index.js

"use strict";

console.log(THREE.REVISION) //测试版本号

ThreeJS的版本更新非常频繁，目前输出的是83

测试样例

index.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>测试样例</title>

    <script src="three.js"></script>

</head>

<body>

<canvas id="canvas" width="400" height="400" style="border: dashed"></canvas>

<script src="index.js"></script>

</body>

</html>

index.js

"use strict"

var renderer, camera, scene, cube,width, height

// 初始化renderer

function initRenderer() {

    width = document.getElementById('canvas').clientWidth

    height = document.getElementById('canvas').clientHeight

    renderer = new THREE.WebGLRenderer({

        canvas: document.getElementById('canvas')

    })

    renderer.setSize(width, height)

    renderer.setClearColor(0xFFFFFF, 1.0) //设置清除颜色和透明度

}

function initCamera() {

    // 使用正投影照相机

    camera = new THREE.OrthographicCamera(width/-2, width/2, height/2, height/-2,1,1000)

    // 找相机位置设定

    camera.position.x = 0

    camera.position.y = 0

    camera.position.z = 200

    // 照相机顶部矢量设定(相当于人的头顶)，这里采用右手坐标系，因此是向上

    camera.up.x = 0

    camera.up.y = 1

    camera.up.z = 0

    // 视线的目标点

    camera.lookAt({

        x: 0,

        y: 0,

        z: 0

    })

}

// 新建场景，作为容器

function initScene() {

    scene = new THREE.Scene()

}

function initObject() {

    // 新建cube对象，定义形状

    var geometry = new THREE.CubeGeometry(100, 100, 100)

    // 新建material对象，定义性质

    var material = new THREE.MeshNormalMaterial();

    cube = new THREE.Mesh(geometry, material);

    scene.add(cube)

    // 以下是博主自己定义的

    cube.vx = 1

    cube.vy = 1

}

// 使用requestAnimationFrame回调render进行试试更新

function render() {

    requestAnimationFrame(render)

    cube.rotation.x += 0.05

    cube.rotation.y += 0.05

    // 平移加一些随机扰动

    if(cube.position.x>width/2 || cube.position.x<-width/2)

        cube.vx = -cube.vx + Math.random() - 0.5

    if(cube.position.y>height/2 || cube.position.y<-height/2)

        cube.vy = -cube.vy + Math.random() - 0.5

    cube.position.x += cube.vx

    cube.position.y += cube.vy

    renderer.render(scene, camera)

}

// 总调度

function start()

{

    initRenderer()

    initCamera()

    initScene()

    initObject()

    render()

}

// 载入函数

window.onload = start()

运行结果

ThreeJS笔记(一)的更多相关文章

  1. webgl,threejs教程、笔记

    发现一个不错的博客,学学. webgl和threejs教程

  2. threejs的学习笔记

    很多时候,我们在开发3d效果的时候,容易搞不清楚x,y,z坐标分别指示哪个方向 在开发threejs的时候可以先把坐标系添加到场景中,起到一个启示作用. js // show axes in the ...

  3. threejs学习笔记（二）

    THREE.WebGLRenderer THREE.Scene THREE.OrthographicCamera正交相机 THREE.PerspectiveCamera透视相机 renderer.se ...

  4. threejs学习笔记（一）

    得到webgl的渲染管线

  5. gis和threejs的学习资料

    *********************************** 基础知识/名词 瓦片/矢量瓦片GeoJson - 绘制GeoJson看数据, geojson规范, 中文版 ********** ...

  6. Three入门学习笔记整理

    一.官方网站:https://threejs.org 二.关于Three.js 三.开始 四.实例 基本结构 结果 五.概念 坐标系 场景 相机 灯光 3D模型 六.简单动画 七.交互控制 结束 # ...

  7. 【带着canvas去流浪（11）】Three.js入门学习笔记

    目录 一. 资料推荐及建议 二. Three.js中的基本概念 三.重点笔记 四.补充示例 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址: ...

  8. git-简单流程（学习笔记）

    这是阅读廖雪峰的官方网站的笔记,用于自己以后回看 1.进入项目文件夹 初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file ...

  9. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

随机推荐

  1. JQuery 标签之间组合取值

    <body> <div></div> <input type="text" value="first-1" /> ...

  2. hadoop集群运行jps命令以后Datanode节点未启动的解决办法

    出现该问题的原因:在第一次格式化dfs后,启动并使用了hadoop,后来又重新执行了格式化命令(hdfs namenode -format),这时namenode的clusterID会重新生成,而da ...

  3. JVM 方法区内存扩大 以及开启GC

    因为应用使用了OSGi框架,<深入理解JAVA虚拟机>中对使用OSGi时可能产生的方法区溢出有所描述 第一部分: 第二部分 可见,OSGi会动态生成大量Class,在OSGi中,即使是同一 ...

  4. Python_list部分功能介绍

    x.append():在列表尾部添加一个元素 x.clear():把列表清空 x.count():判断某个元素出现的次数 x.extend():合并两个列表,或者一个元组 x.index():获取元素 ...

  5. MyEclipse 安装插件 Github安装/使用 教程

    2016年02月18日 09:45:23 阅读数:4531 本文的目的是 1.在 Myeclipse10.7中 集成Github并使用. 选择的安装方式是:MyEclipse 中设置下文中1后,下载g ...

  6. BZOJ2212 [Poi2011]Tree Rotations 线段树合并 逆序对

    原文链接http://www.cnblogs.com/zhouzhendong/p/8079786.html 题目传送门 - BZOJ2212 题意概括 给一棵n(1≤n≤200000个叶子的二叉树, ...

  7. IDEA学习——模板及其常用模板

    模板及其常用模板 (1)psvm (2)sout sout / soutp / soutv / 变量.sout (3)fori iter增强for循环 itar普通for循环 (4)list.for ...

  8. JavaSE| String常用方法

    字符串 * java.lang.String类型:字符串类型 * 1.String类型是final修饰,不能被继承的 * 2.Java 程序中的所有字符串字面值(如 "abc" ) ...

  9. 059 SparkStream介绍

    离线计算框架:MR,hive-->对时间要求不严格 实时计算框架:SparkCore-->要求job执行时间比较快 交互式计算框架:SparkSQL,Hive,-->提供SQL操作的 ...

  10. Python replace() 和 re.sub() 字符串字符替换

    Python replace() 和 re.sub() 字符串字符替换 replace() testStr = 'aa:bb[cc' testStr.replace(':','_') 每次只能替换一个 ...