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. 浏览器LocalStroage使用

    http://www.cnblogs.com/st-leslie/p/5617130.html

  2. 用vi编辑文件

    原文:https://www.ibm.com/developerworks/library/l-lpic1-103-8/index.html Overview In this article, lea ...

  3. zeromq的安装，部署（号称最快的消息队列，消息中间件）

    1:Storm作为一个实时处理的框架,产生的消息需要快速的进行处理,比如存在消息队列ZeroMQ里面. 由于消息队列ZeroMQ是C++写的,而我们的程序是运行在JVM虚拟机里面的.所以需要jzmq这 ...

  4. noip宝藏

    题解: 我觉得状压比搜索不知道简单到哪里去了.. 为了练习搜索...想了一下这题的搜索.. 然后会发现想想就很容易想到dp.. 最后的搜索大概是这样的 我们会发现有一类搜索都是这样 你会重复(可能是指 ...

  5. WebApi 得到提交过来的 post 数据

    byte[] byts = new byte[System.Web.HttpContext.Current.Request.InputStream.Length]; System.Web.HttpCo ...

  6. Python_列表常用操作

    %d   数字 %f    浮点 %s    字符串 字符串常用功能: .strip()   默认去掉字符串两边空格#或者在括号里注明去除什么 查看列表方法:dir(列表名) .append(元素): ...

  7. Mac mumu模拟器设置代理

    adb devices adb connect 127.0.0.1:5555 adb shell am start -a android.intent.action.MAIN -n com.andro ...

  8. ncat

    ncat 或者说 nc 是一款功能类似 cat 的工具,但是是用于网络的.它是一款拥有多种功能的 CLI 工具,可以用来在网络上读.写以及重定向数据. 它被设计成可以被脚本或其他程序调用的可靠的后端工 ...

  9. Codeforces 877F Ann and Books 莫队

    转换成前缀和, 预处理一下然后莫队. #include<bits/stdc++.h> #define LL long long #define fi first #define se se ...

  10. JAVA中值类型和引用类型的不同（面试常考）

    转载:https://www.cnblogs.com/1ming/p/5227944.html 1. JAVA中值类型和引用类型的不同? [定义] 引用类型表示你操作的数据是同一个,也就是说当你传一个 ...