Three.js 3D特效学习
一、Three.js基本介绍
Three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。不过，这款引擎目前还处在比较不成熟的开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤其是文档的匮乏，基本没有中文的）Three.js的代码托管在github上面。
二、基本 Demo
1.最基本的Hello World：http://stemkoski.github.io/Three.js/HelloWorld.html
2.在网页上调用摄像头：http://stemkoski.github.io/Three.js/Webcam-Texture.html
3.体感操作：http://stemkoski.github.io/Three.js/Webcam-Motion-Detection-Texture.html
4.支持游戏手柄：http://stemkoski.github.io/Three.js/Mesh-Movement-Gamepad.html
5.3D建模和方向键控制移动方向：http://stemkoski.github.io/Three.js/Model-Animation-Control.html
6.SkyBox和三个气泡的渲染：http://stemkoski.github.io/Three.js/Metabubbles.html
7.3D红蓝偏光的名车展：http://threejs.org/examples/webgl_materials_cars_anaglyph.html
8.跑车游戏：http://hexgl.bkcore.com/
三、Three.js编写环境准备
1.Three.js库文件下载：https://github.com/mrdoob/three.js/
2.已安装IIS或Tomcat或Apache，这些例子必须挂到服务器上才能正常运行，本地打开会出现各种无法理解的问题。
四、动手编写第一个 Demo
<!doctype html>
<html lang="en">
<head>
<title>Template (Three.js)</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel=stylesheet href="css/base.css" />
</head>
<body>
<script src="../js/Three.js"></script> <!-- 这个是Three.js引擎的js -->
<script src="../js/Detector.js"></script>
<script src="../js/Stats.js"></script>
<script src="../js/OrbitControls.js"></script>
<script src="../js/THREEx.KeyboardState.js"></script>
<script src="../js/THREEx.FullScreen.js"></script>
<script src="../js/THREEx.WindowResize.js"></script>
<script src="../js/Texture.js"></script> <!-- 一些js工具类，现在不深究 -->
<div id="ThreeJS"
style="z-index: 1; position: absolute; left: 0px; top: 0px"></div> <!-- 这个div就是整个画布 -->
<script>
//////////
// MAIN //
//////////
// standard global variables
var container, scene, camera, renderer, controls, stats; // 几个变量代表的含义：容器、场景、摄像机（视角）、渲染器、控制装置
var keyboard = new THREEx.KeyboardState();
var clock = new THREE.Clock();
// custom global variables
var cube;
// initialization
init();
// animation loop / game loop
animate();
///////////////
// FUNCTIONS //
///////////////
function init() { // 初始化
///////////
// SCENE //
///////////
scene = new THREE.Scene(); // 定义场景
////////////
// CAMERA //
////////////
// set the view size in pixels (custom or according to window size)
// var SCREEN_WIDTH = 400, SCREEN_HEIGHT = 300;
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
// camera attributes
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
// set up camera
camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); // 定义视角
// add the camera to the scene
scene.add(camera);
// the camera defaults to position (0,0,0)
// so pull it back (z = 400) and up (y = 100) and set the angle towards the scene origin
camera.position.set(-400, 150, 200); // 视角的位置
camera.lookAt(scene.position);
//////////////
// RENDERER //
//////////////
// create and start the renderer; choose antialias setting.
if (Detector.webgl)
renderer = new THREE.WebGLRenderer({
antialias : true
});
else
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
// attach div element to variable to contain the renderer
container = document.getElementById('ThreeJS');
// alternatively: to create the div at runtime, use:
// container = document.createElement( 'div' );
// document.body.appendChild( container );
// attach renderer to the container div
container.appendChild(renderer.domElement);
////////////
// EVENTS //
////////////
// automatically resize renderer
THREEx.WindowResize(renderer, camera);
// toggle full-screen on given key press
THREEx.FullScreen.bindKey({
charCode : 'm'.charCodeAt(0)
});
//////////////
// CONTROLS //
//////////////
// move mouse and: left click to rotate,
// middle click to zoom,
// right click to pan
controls = new THREE.OrbitControls(camera, renderer.domElement); // 设置控制，这里只有鼠标操作
///////////
// STATS //
///////////
// displays current and past frames per second attained by scene
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.bottom = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild(stats.domElement);
///////////
// LIGHT //
///////////
// create a light
var light = new THREE.PointLight(0xffffff); // 设置光源
light.position.set(0, 250, 0);
scene.add(light);
// CUBE
var cubeGeometry = new THREE.CubeGeometry(260, 35, 185, 1, 1, 1); // 定义一个立方体，就是那本书的模型
var cubeMaterialArray = [];
cubeMaterialArray.push(new THREE.MeshBasicMaterial({
map : new THREE.ImageUtils.loadTexture('img/side-up.png') // 给每一面上贴图，下同
}));
cubeMaterialArray.push(new THREE.MeshBasicMaterial({
map : new THREE.ImageUtils.loadTexture('img/side-up.png')
}));
cubeMaterialArray.push(new THREE.MeshBasicMaterial({
map : new THREE.ImageUtils.loadTexture('img/up.png')
}));
cubeMaterialArray.push(new THREE.MeshBasicMaterial({
map : new THREE.ImageUtils.loadTexture('img/down.png')
}));
cubeMaterialArray.push(new THREE.MeshBasicMaterial({
map : new THREE.ImageUtils.loadTexture('img/side-right.png')
}));
cubeMaterialArray.push(new THREE.MeshBasicMaterial({
map : new THREE.ImageUtils.loadTexture('img/side-left.png')
}));
var cubeMaterials = new THREE.MeshFaceMaterial(cubeMaterialArray);
cube = new THREE.Mesh(cubeGeometry, cubeMaterials);
cube.position.set(0, 0, 0); // 立方体放置的位置
scene.add(cube);
}
function animate() {
requestAnimationFrame(animate);
render();
update();
}
function update() {
// delta = change in time since last call (in seconds)
var delta = clock.getDelta();
controls.update();
stats.update();
}
function render() {
renderer.render(scene, camera);
}
</script>
</body>
</html>
Three.js 3D特效学习的更多相关文章
- Cocos2d-x学习笔记（十二）3D特效
特效类即是GridAction类,其实就是基于网格的3D动作类.需开启OpenGL的深度缓冲,否则容易3D失真. 下边是一个snippet,创建网格对象,并将其添加到当前layer:同时,将进行3D特 ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- three.js 3d三维网页代码加密的实现方法
http://www.jiamisoft.com/blog/17827-three-js-3dsanweiwangyejiami.html https://www.html5tricks.com/ta ...
- Three.js粒子特效，shader渲染初探（一篇非常详细的介绍）
Three.js粒子特效,shader渲染初探 转载来源:https://juejin.im/post/5b0ace63f265da0db479270a 这大概是个序 关于Three.js,网上有不多 ...
- 腾讯QQ空间穿越时光轴3D特效
<DOCTYPE html> <html> <head> <title>腾讯QQ空间穿越光轴3D特效</title> <style&g ...
- 10个超漂亮的CSS 3D特效
10个超漂亮的CSS 3D特效 一.总结 一句话总结: 后面有空得好好练一练,也可以作为录课素材 二.10个超漂亮的CSS 3D特效 转自或参考:10个超漂亮的CSS 3D特效https://blog ...
- JS做深度学习3——数据结构
最近在上海上班了,很久没有写博客了,闲下来继续关注和研究Tensorflow.js 关于深度学习的文章我也已经写了不少,部分早期作品可能包含了不少错误的认识,在后面的博文中会改进或重新审视. 今天聊聊 ...
- 所有用CSS3写的3D特效，都离不开这些知识
起因 昨晚在做慕课网的十天精通CSS3课程,其中的综合练习是要做一个3D导航翻转的效果.非常高大上. 以往这些效果我都很不屑,觉得网上一大堆这些特效的代码,复制粘贴就好了,够快.但是现实工作中,其实自 ...
- js callee,caller学习
原文地址:js callee,caller学习 /* * caller 返回一个对函数的引用,该函数调用了当前函数. * 如果函数是由顶层调用的,那么 caller包含的就是 null . * 如果在 ...
随机推荐
- fastjson和json-lib的区别
上次把原生json替换成了fastjson,发生很多地方不兼容,对这个也做了一些总结: 1.对于没有赋值的变量处理,json-lib会根据类型给出相应初始值,而fastjson直接忽略这个字段. 解决 ...
- P问题、NP问题和NPC问题
P问题.NP问题和NPC问题 这或许是众多OIer最大的误区之一. 你会经常看到网上出现“这怎么做,这不是NP问题吗”.“这个只有搜了,这已经被证明是NP问题了”之类的话.你要知道,大多数人此时 ...
- vim标准操作
主要技巧: ->普通模式负责所有光标定位能力.插入模式随时使用<esc>键回到普通模式并且尽量保持普通模式为主要的工作状态. -> hjkl四键负责光标的低速移动,如果还在使用 ...
- 周赛-KIDx's Pagination 分类： 比赛 2015-08-02 08:23 7人阅读 评论(0) 收藏
KIDx's Pagination Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) S ...
- Poj(1469)，二分图最大匹配
题目链接:http://poj.org/problem?id=1469 COURSES Time Limit: 1000MS Memory Limit: 10000K Total Submissi ...
- linux里用cmake安装的软件要怎么卸载？
找到make install之后产生的这个文件install_manifest.txt 这里在build文件里面有一个 install_manifest.txt,在里面有安装的所有东西的路径,删除它们 ...
- centos 6.5源码编译安装subversion 1.8.10
一.简介 CentOS 6.5的yum源可以安装的SVN客户端版本太低了,1.6.11,所以需要升级到1.8.10,而官网有没有找到1.8.10的安装包,只能选择源码编译安装. 二.安装步骤 参考官网 ...
- boost库学习之开篇
本系列文章使用boost_1.58.0版本. 一.欢迎使用boost C++库 boost致力于提供一个免费的.便携的源代码级的库. 我们重视那些与C++标准一起工作良好的库.boost库将要成为一个 ...
- vs智能提示突然消失的解决办法 (vs2008 vs2010 vs2012 智能提示)
vs智能提示突然消失的解决办法 (vs2008 vs2010 vs2012 智能提示) 下面一段话是网上找到的解决方案: 重置Visual Studio可以解决此问题,方法是从开始->Micro ...
- 遍历对象的list删除时报错问题。
我们对一个对象的list或者map进行删除操作时,可能会这么写 for(Distributor distributor:distributorList){ String distributorShor ...