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. node.js vue-axios和vue-resource

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Nginx安装配置&反向代理

    使用Nginx作为前端服务能够更快更及时的响应静态页面.js.图片等,当客户端请求访问动态页面时由Nginx的反向代理给Apache处理,Apache处理完再交予Nginx返回给客户端. Nginx更 ...

  3. Hadoop的namenode的管理机制，工作机制和datanode的工作原理

    HDFS前言: 1) 设计思想 分而治之:将大文件.大批量文件,分布式存放在大量服务器上,以便于采取分而治之的方式对海量数据进行运算分析: 2)在大数据系统中作用: 为各类分布式运算框架(如:mapr ...

  4. 解决Python安装模块出错 ImportError: No module named setuptools

    1.下载ez_setup.py文件 下载地址:https://bootstrap.pypa.io/ez_setup.py 百度地址:http://pan.baidu.com/s/1jIgMO9w 2. ...

  5. 【前端基础系列】slice方法将类数组转换数组实现原理

    问题描述 在日常编码中会遇到将类数组对象转换为数组的问题,其中常用到的一种方式使用Array.prototype.slice()方法. 类数组对象 所谓的类数组对象,JavaScript对它们定义为: ...

  6. 【AtCoder】ARC072

    ARC072 C - Sequence 直接认为一个数是正的,或者第一个数是负的,每次将不合法的负数前缀和改成+1正数前缀和改成-1 #include <bits/stdc++.h> #d ...

  7. ionic2中使用moment.js

    安装 npm i moment --save 使用 import { Pipe, PipeTransform } from '@angular/core'; import Moment from 'm ...

  8. Codeforces 746F Music in Car

    Music in Car 用两个Set维护一下尺取的过程. #include<bits/stdc++.h> #define LL long long #define fi first #d ...

  9. F. Shovels Shop 背包DP

    题意: 商店里有n把铲子 每个铲子有其标价 一个人要买k吧 有m个优惠政策 每个优惠政策有两个元素x,y 表示   正好买x个铲子的时候  这x个铲子中最便宜的y个铲子免单 求用最少的前买到k个铲子 ...

  10. JavaSE| 面向对象-类的五大成员

    面向对象 面向对象只是其中一种编程思想,还有很多其他的编程思想:面向过程.面向切面.面向服务编程... 面向过程的思维方式:注重步骤.过程,面向过程强调的是功能行为: 面向对象的思维方式:关注的是“对 ...