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 . * 如果在 ...
随机推荐
- HDU(3605)，二分图多重匹配
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3605 Escape Time Limit: 4000/2000 MS (Java/Others) ...
- hiho(1081),SPFA最短路，(非主流写法)
题目链接:http://hihocoder.com/problemset/problem/1081 SPFA求最短路,是不应-羁绊大神教我的,附上头像. 我第一次写SPFA,我用的vector存邻接表 ...
- HTTP 错误 404.2 - Not Found
前几天刚安装Windows Server 2008 r2 sp1 遇到问题之后,昨天我又遇到一个问题(但我不害怕有问题),提示: HTTP 错误 404.2 - Not Found由于 Web 服务器 ...
- linux下报错处理经验
这是训练中文vocab做的句子相似度的程序: /home/xbwang/torch/install/bin/luajit: /home/xbwang/newtextsimilarity/util/Vo ...
- hdu 2053 Switch Game 水题一枚，鉴定完毕
Switch Game Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- 2016年11月19日 星期六 --出埃及记 Exodus 20:10
2016年11月19日 星期六 --出埃及记 Exodus 20:10 but the seventh day is a Sabbath to the LORD your God. On it you ...
- [转]Windows8下设置VS默认启动方式为管理员启动
在Windows7下通常使用修改属性的方式:在任意快捷方式上右击,选择属性,选择高级,选择以管理员身份启动: 在Windows8下如上设置后,右击直接打开项目的话是不会以管理员身份启动的,这里用比较h ...
- CSS3那些不为人知的高级属性
尽管现代浏览器已经支持了众多的CSS3属性,但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性,如border-radius.box-shadow或者transform等.它们有良好的文档 ...
- Maven打jar发布包的常用配置
1.修改pom.xml增加如下内容 <plugin> <groupId>org.apache.maven.plugins</groupId> <artifac ...
- QT笔记之自定义窗口拖拽移动
1.QT自定义标题栏,拖拽标题栏移动窗口(只能拖拽标题,其他位置无法拖拽) 方法一: 转载:http://blog.sina.com.cn/s/blog_4ba5b45e0102e83h.html . ...