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 . * 如果在 ...
随机推荐
- YTU 2296: KMP模式匹配 二（串）
2296: KMP模式匹配 二(串) 时间限制: 1 Sec 内存限制: 128 MB 提交: 29 解决: 17 题目描述 输入一个主串和一个子串,用KMP进行匹配,问进行几趟匹配才成功,若没成 ...
- XPath 元素及属性查找
实例 1 基本的XPath语法类似于在一个文件系统中定位文件,如果路径以斜线 / 开始, 那么该路径就表示到一个元素的绝对路径 /AAA 选择根元素AAA <AAA> ...
- Java学习之路(五)
1:补充: 使用super也可以调用父类的成员函数 格式 : super.函数名(); 2:抽象类与抽象函数 抽象函数的定义: 只有函数的定义,没有函数体的函数被称为抽象函数 抽象类的定义: 使用 ...
- Conditional - 编译屏蔽特性
public class Test : MonoBehaviour { void Start() { Func(); } [System.Diagnostics.Conditional("U ...
- 基本Socket通信流程
服务器常用模型 1.初始化Socket (用于监听) 1)初始化 SOCKET s ; s = Socket ( ... ) 2)绑定 bind(s, ...); 3)监听 listen(s, .. ...
- UVa(1658)，Admiral，海军上将，拆点，MCMF
题目链接:https://uva.onlinejudge.org/external/16/1658.pdf 题意:求1到N的两条路(不能相交),距离和最小. 分析: 第一次做拆点,有点意思.刚开始一直 ...
- js判断手机连接网络类型
<!DOCTYPE HTML><html xmlns="http://www.w3.org/1999/xhtml" lang="en"> ...
- gd-jpeg: JPEG library reports unrecoverable error 解决办法
Warning: imagecreatefromjpeg() [function.imagecreatefromjpeg]: gd-jpeg: JPEG library reports unrecov ...
- web应用中web.xml配置详解
Web.xml常用元素 <web-app> <display-name></display-name>定义了WEB应用的名字 <description> ...
- Fragment 与 Fragment 相互传值
方法: 1 接口回调 2 用一个单例类 3 bundle 4 获取fragment实例 , setter getter 传值