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. WARN conf.FlumeConfiguration: Could not configure sink sink1 due to: No channel configured for sink: sink1 org.apache.flume.conf.ConfigurationException: No channel configured for sink: sink1

    1.错误如下所示,启动flume采集文件到hdfs案例的时候,出现如下所示的错误: 大概是说No channel configured for sink,所以应该是sink哪里配置出现了错误,百度了一 ...

  2. rabbitmq3.7.5 centos7 安装笔记

    先安装各种依赖文件: yum -y install gcc glibc-devel make ncurses-devel openssl-devel xmlto perl wget vim 1. ra ...

  3. 【UOJ 209】【UER #6】票数统计

    题解: jls的题目还是比较好的 首先比较显然我们可以分析出 当x<y时,显然只能满足前缀条件 针对这一档部分分,是个简单的组合数 考虑一下后缀限制,发现真的不好搞.. 看了题解发现,枚举总共的 ...

  4. docker-java Docker的java API

    docker-java docker-java 是 Docker的 Java 版本API Docker 当前的实现基于 Jersey 2.x 因此 classpath 不兼容老版本的 Jersey 1 ...

  5. kudu的写数据流程

    写入操作是指需进行插入.更新或删除操作的一组行.需要注意的事项是Kudu强制执行主关键字的唯一性,主关键字是可以更改行的唯一标识符.为了强制执行此约束条件,Kudu必须以不同的方式处理插入和更新操作, ...

  6. ip转城市接口,ip转省份接口,ip转城市PHP方法

    新浪接口(速度快) $url = 'http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=json&ip='.$ip; $arr ...

  7. AtCoder Regular Contest 099 (ARC099) E - Independence 二分图

    原文链接https://www.cnblogs.com/zhouzhendong/p/9224878.html 题目传送门 - ARC099 E - Independence 题意 给定一个有 $n$ ...

  8. BZOJ1503 [NOI2004]郁闷的出纳员 splay

    原文链接http://www.cnblogs.com/zhouzhendong/p/8086240.html 题目传送门 - BZOJ1503 题意概括 如果某一个员工的工资低于了min,那么,他会立 ...

  9. 【转】Linux 虚拟内存和物理内存的理解

    http://www.cnblogs.com/dyllove98/archive/2013/06/12/3132940.html 首先,让我们看下虚拟内存: 第一层理解 1.         每个进程 ...

  10. 导入项目报错：Type Java compiler level does not match the version

    1,导入项目报错一般是因为缺少jar包或者是jar包冲突 2,导入的jar包版本问题 3,环境需要重新修改,比如build path 中重新add libararies 遇到这种compiler环境问 ...