HTML5 - 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 variablesvar container, scene, camera, renderer, controls, stats; // 几个变量代表的含义：容器、场景、摄像机（视角）、渲染器、控制装置var keyboard = new THREEx.KeyboardState();var clock = new THREE.Clock();// custom global variablesvar cube;// initializationinit();// animation loop / game loopanimate();///// 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 attributesvar VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;// set up cameracamera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); // 定义视角// add the camera to the scenescene.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 origincamera.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});elserenderer = new THREE.CanvasRenderer();renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);// attach div element to variable to contain the renderercontainer = document.getElementById('ThreeJS');// alternatively: to create the div at runtime, use:// container = document.createElement( 'div' );// document.body.appendChild( container );// attach renderer to the container divcontainer.appendChild(renderer.domElement);// EVENTS //// automatically resize rendererTHREEx.WindowResize(renderer, camera);// toggle full-screen on given key pressTHREEx.FullScreen.bindKey({charCode : 'm'.charCodeAt(0)});//// CONTROLS ////// move mouse and: left   click to rotate, //                 middle click to zoom, //                 right  click to pancontrols = new THREE.OrbitControls(camera, renderer.domElement); // 设置控制，这里只有鼠标操作///// STATS /////// displays current and past frames per second attained by scenestats = new Stats();stats.domElement.style.position = 'absolute';stats.domElement.style.bottom = '0px';stats.domElement.style.zIndex = 100;container.appendChild(stats.domElement);///// LIGHT /////// create a lightvar light = new THREE.PointLight(0xffffff); // 设置光源light.position.set(0, 250, 0);scene.add(light);// CUBEvar 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>

效果图：

点击查看最终效果

HTML5 - Three.js 3D特效学习相关推荐

html 自动生产,HTML5 Three.js 3D人偶玩具自动化生产车间动画
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 "use strict"; console.clear(); TweenMax.lagS ...
html5 足球比赛阵容图,HTML5/Velocity.js 3D足球阵容
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 (function() { var $closeBtn, $heading, $loadBtn, $load ...
html5 canvas时光隧道3D粒子动画js特效
下载地址 html5 canvas时光隧道3D粒子动画特效是一款非常酷炫的3D粒子时光穿梭视觉冲击动画特效. dd:
HTML5第一人称3D艺术画廊js特效
下载地址 HTML5第一人称3D艺术画廊特效是一款带左右箭头按钮,以第一人称视角参观的3D艺术画廊,操控鼠标可以控制方向,看到不同方向的画品展示. dd:
html 文字悬停翻转,html5+TweenMax.js鼠标悬停文字翻转动画特效
8种动画效果十分流畅的html5+TweenMax.js鼠标悬停文字翻转动画特效,支持英文字母和中文汉字. 查看演示下载资源: 14 次下载资源下载积分: 20 积分 js代码 const le ...
6款炫酷的HTML5 3D特效源码
这次我们整理了6款最新的HTML5/CSS3特效及源码,这些特效包括3D花.3D立方体加载动画.3D粒子特效.3D时钟.3D旋转灯.3D原子,一起来看看吧. 1.3D花 2.3D立方体加载动画 3.3 ...
HTML5+css+JS实现页面打枪声音特效减压玩法 PUBG 大吉大利今晚吃鸡
HTML5+css+JS实现页面打枪声音特效减压玩法 PUBG 大吉大利今晚吃鸡 css部分 *{margin: 0;padding:0;}body{min-height:100vh;overflo ...
html语音播放动画,html5 canvas+js音频可视化动画特效
html5 canvas+js实现的音频可视化动画特效,选择一首本地音频文件播放查看效果. 查看演示下载资源: 13 次下载资源下载积分: 20 积分 js代码 window.onload = ...
html 延长直线,利用HTML5实现绘制3D线条延伸动画特效
特效描述:利用HTML5实现绘制3D 线条延伸动画特效.利用HTML5实现雷达地区扫描动画特效代码结构 1. HTML代码 ;(function() { 'use strict'; var c ...

HTML5 - Three.js 3D特效学习

HTML5 - Three.js 3D特效学习相关推荐

最新文章

热门文章