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 . * 如果在 ...

随机推荐

c# UDP通信列子
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
Train Problem I 分类： HDU 2015-06-26 11:27 10人阅读评论(0) 收藏
Train Problem I Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
Windows系统端口占用情况检查脚本
写了一段检查Windows下端口占用情况的脚本,代码如下: function checkPid($result,$port){ $port = $port.split(":")[1 ...
bmp格式图片文件读取
C++读取bmp图片 #include <windows.h> #include <stdio.h> #include <stdlib.h> #include &l ...
解决Win7下UAC开启时无法响应WM_DROPFILES消息
//以管理员身份运行,程序窗口就可以接收到拖放文件消息[WM_DROPFILES]了. ChangeWndMessageFilterOk(WM_DROPFILES, MSGFLT_ADD); Chan ...
js获取鼠标位置
1.PageX/PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化2.clientX/clientY:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即 ...
Apply Root Motion
Apply Root Motion 应用根动作: Should we control the character's position from the animation itself or fro ...
STREAM Benchmark
STREAM Benchmark及其操作性能分析文/raywill STREAM 是业界广为流行的综合性内存带宽实际性能测量工具之一.随着处理器处理核心数量的增多,内存带宽对于提升整个系统性能越 ...
如何选择正确的DevOps工具
坦白的讲:世界上没有哪种工具能够像DevOps这么神奇(或敏捷,或精益).DevOps在开发和运营团队之间建立了完美的合作与沟通,因此与其说这是一种神奇的工具,不如说是一种文化的转变. 然而,团队之间 ...
对Spring <context:annotation-config/>的理解
在基于主机方式配置Spring的配置文件中,你可能会见到<context:annotation-config/>这样一条配置,他的作用是向 Spring 容器注册 AutowiredAnn ...

Three.js 3D特效学习

Three.js 3D特效学习的更多相关文章

随机推荐

热门专题