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. CC攻击原理及防范方法和如何防范CC攻击

    一. CC攻击的原理: CC攻击的原理就是攻击者控制某些主机不停地发大量数据包给对方服务器造成服务器资源耗尽,一直到宕机崩溃.CC主要是用来消耗服务器资源的,每个人都有这样的体验:当一个网页访问的人数 ...

  2. github的pull request是指什么意思

    有一个仓库,叫Repo A.你如果要往里贡献代码,首先要Fork这个Repo,于是在你的Github账号下有了一个Repo A2,.然后你在这个A2下工作,Commit,push等.然后你希望原始仓库 ...

  3. Flink运行在yarn上

    在一个企业中,为了最大化的利用集群资源,一般都会在一个集群中同时运行多种类型的 Workload.因此 Flink 也支持在 Yarn 上面运行: flink on yarn的前提是:hdfs.yar ...

  4. go-无法下载websocket的问题

    由于限制问题,国内使用 go get 安装 golang 官方包可能会失败,如我自己在安装 collidermain 时,出现了以下报错: $ go get collidermain package ...

  5. c#生成连续单号

    bill.BillCode = GetBillCode("JH");//生成单号 if (bill.BillCode == "no") { bill.BillC ...

  6. 001 Hello Security 的框架搭建

    一:STS 1.下载STS 官网:http://spring.io/tools 使用一个干净的STS进行操作学习. 2.jdk检查 3.添加自己的maven 4.使用tomcat 二:新建项目 1.新 ...

  7. ESP8266基础篇

    ESP8266基础篇 模块刚到如图所示~2016-01-26 后三张是手机APP的截图,前面是两个ESP8266的硬件模块,当然大家不应定要买两个,自己焊锡一个USB转TTL的串口就行了,有了下面的底 ...

  8. Sublime Text3搭建PHP开发环境

    Sublime Text3搭建PHP开发环境 本文主要给大家分享了关于Sublime Text3搭建PHP开发环境 ,感兴趣的小伙伴可以做一下参考 一.Sublime text3安装 到官网http: ...

  9. Snowflake Snow Snowflakes POJ - 3349（hash）

    You may have heard that no two snowflakes are alike. Your task is to write a program to determine wh ...

  10. Painting the Fence Gym - 101911E（构造）

    There is a beautiful fence near Monocarp's house. The fence consists of nn planks numbered from left ...