three.js学习:初学three.js,从立方体开始
目前three.js是浏览器展现3D效果的一个很强大的js工具,遗憾的是没有特别系统而全面的文档(threejs官方文档感觉有些缺漏,可以和WebGL中文网的threejs教程对比着看)。好了,根据WebGL中文网的threejs教程开始学习,因为教程里的部分代码已经不适用(过时)了,导致学习的时候有些磕磕绊绊,故记录下自己编写的代码,以便以后查阅。
1、index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> <script src="js/three.min.js"></script> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; /*background-color: blue;*/ } </style> </head> <body> <canvas></canvas> </body> <script src="js/chapter1.2.js"></script> </html>
2、js代码中应该有什么元素
three.js写的代码通常含有三项元素:scene、camera和renderer三项,这三者的关系可以用WebGL中文网教程中的一段话表示:
Three.js中的场景是一个物体的容器,开发者可以将需要的角色放入场景中,例如苹果,葡萄。同时,角色自身也管理着其在场景中的位置。
相机的作用就是面对场景,在场景中取一个合适的景,把它拍下来。
渲染器的作用就是将相机拍摄下来的图片,放到浏览器中去显示。如图:
3、chapter1.2.js
//定义一个场景 var scene = new THREE.Scene(); /* 定义一个透视相机,透视相机是最常用的相机,其他类型的相机以后再去了解 参数说明function PerspectiveCamera(摄像机视锥体垂直视野角度, 摄像机视锥体长宽比<严格的说是宽比长>, 摄像机视锥体近端面, 摄像机视锥体远端面) */ var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100); //定义相机的位置,threejs中坐标是右手系 camera.position.z = 10; var renderer = new THREE.WebGLRenderer({antialias : true}); //antialias 开启抗锯齿 renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0xffffff, 1); //设置画布的背景色和透明度 document.body.appendChild(renderer.domElement); //将画布元素添加到body var geometry = new THREE.BoxGeometry(1, 1, 1); //定义立方几何体 var material = new THREE.MeshBasicMaterial({color : 0xDC143C}); //设置集合体材质 var cube = new THREE.Mesh(geometry, material); scene.add(cube); function threeStart() { cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); requestAnimationFrame(threeStart); } requestAnimationFrame(threeStart);
效果是一个不断旋转的立方体:
three.js学习:初学three.js,从立方体开始的更多相关文章
- Node.js学习笔记——Node.js开发Web后台服务
一.简介 Node.js 是一个基于Google Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.j ...
- Sea.js学习4——Sea.js的配置
可以对 Sea.js 进行配置,让模块编写.开发调试更方便. seajs.config seajs.config(options) 用来进行配置的方法. seajs.config({ // 别名配置 ...
- Node.js学习(Node.js基础)
1.开发环境搭建 v8引擎是作为解析JavaScript程序来运行的 nodejs是一个高性能的,第一个体现在他的JavaScript解析速度很快,v8引擎性能很高,第二个事件驱动和非阻塞 2.全局对 ...
- Sea.js学习5——Sea.js的构建工具spm
如果项目遵循推荐的标准目录结构: foo-module/ |-- dist 存放构建好的文件 |-- src 存放 js.css 等源码 | |-- foo.js | `-- style.css `- ...
- Sea.js学习3——Sea.js的CMD 模块定义规范
在 Sea.js 中,所有 JavaScript 模块都遵循 CMD(Common Module Definition) 模块定义规范.该规范明确了模块的基本书写格式和基本交互规则. 在 CMD 规范 ...
- Sea.js学习2——Sea.js的API 快速参考
(7 个接口是最常用的) 一.seajs.config:用来对 Sea.js 进行配置. seajs.config({ // 设置路径,方便跨目录调用 paths: { 'arale': 'https ...
- [node.js学习]为node.js写的一个操作mysql的类
不支持一个对象在不同异步中使用,模仿的php框架 speedphp中的model模块 GaryMysql.js var mysql = require('mysql'); var pool = nul ...
- js学习之原生js实现懒加载
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- sail.js学习 - 安装篇
导言: 最近在学习sails.js(http://sailsjs.org/),因为用的人不多,资料较少,故写些自己的学习过程.因自己也是初学node.js,有问题大家指出. 介绍: sails.js的 ...
- Three.js学习笔记 – “我和小伙伴都惊呆了”的特效和Three.js初探
什么是Three.js three.js是JavaScript编写的WebGL第三方库.提供了非常多的3D显示功能.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包 ...
随机推荐
- js将foo-bar转为fooBar
这是一道js的面试题,就是考察将普通面命转为小驼峰命名 <!DOCTYPE html> <html lang="en"> <head> < ...
- PHP 对象转数组 Object转array
//调用这个函数,将其幻化为数组,然后取出对应值 public static function object_array($array) { if(is_object($array)) { $arra ...
- 关于 unsigned int 比较大小
unsigned int 的所有数都是 >=0 的.比如 unsigned int 的 -2 也是 > 0 的,所以不能用自己常用的 upt( ) { if( x<0 ) x+=mo ...
- Elasticsearch的数据导出和导入操作(elasticdump工具),以及删除指定type的数据(delete-by-query插件)
Elasticseach目前作为查询搜索平台,的确非常实用方便.我们今天在这里要讨论的是如何做数据备份和type删除.我的ES的版本是2.4.1. ES的备份,可不像MySQL的mysqldump这么 ...
- 主流开源SQL(on Hadoop)总结
转载至 大数据杂谈 (BigdataTina2016),同时参考学习 http://www.cnblogs.com/barrywxx/p/4257166.html 进行整理. 使用SQL 引擎一词是有 ...
- Redis环境安装
Windows下: 到https://github.com/MicrosoftArchive/redis/releases下载: 下载完成后一步一步安装就行. 然后在安装一个可视化工具:https:/ ...
- Device Tree碎碎念
首先推荐elinux.org上一篇关于Device Tree的文章: http://elinux.org/Device_Tree_Usage 这是一篇关于Device Tree的入门文章.对英文犯怵的 ...
- 【Mysql】MySQL高效获取记录总数SQL_CALC_FOUND_ROWS
用法说明 分页程序一般由两条SQL组成: SELECT COUNT(*) FROM ... WHERE .... SELECT ... FROM ... WHERE LIMIT ... 如果使用SQL ...
- 基于Kafka消息驱动最终一致事务(二)
实现用例分析 上篇基于Kafka消息驱动最终一致事务(一)介绍BASE的理论,接着我们引入一个实例看如何实现BASE,我们会用图7显示的算法实现BASE.
- spring4.3新注解之:@RequestMapping变种(@GetMapping,@PostMapping,@PutMapping,@DeleteMapping,@PatchMapping)
Spring 4.3 中引进了下面的注解 @RequestMapping 在方法层级的变种,来帮助简化常用 HTTP 方法的映射,并更好地表达被注解的方法的语义.比如,@GetMapping可以读作 ...