1.在【three.js第五课】的基础上引入AnaglyphEffect.js文件。

文件路径：

three源码包中进入【examples】文件夹；

进入【js】文件夹；

进入【effects】文件夹中即可看到AnaglyphEffect.js文件

我的引入如下：

 <script src="../examples/js/effects/AnaglyphEffect.js"></script>

2.将自定义的材料更改为如下（此步骤只是为了让材料收到光线的影响，不做该步骤也可以）：

 var cubeMaterial = [

            //右

            new THREE.MeshLambertMaterial({color:0xFFFFFF,side:THREE.DoubleSide}),

            //左

            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/2.png') ,side:THREE.DoubleSide}),

            //上

            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/3.png') ,side:THREE.DoubleSide}),

            //下

            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/4.png') ,side:THREE.DoubleSide}),

            //前

            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/5.png') ,side:THREE.DoubleSide}),

            //后

            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/6.png') ,side:THREE.DoubleSide})

        ];

3.将物体3D化。添加一下代码:

//物体3D化

        var effect = new THREE.AnaglyphEffect(renderer);

        effect.setSize(window.innerWidth, window.innerHeight);

4.并将渲染画面的方法进行修改，修改如下：

 //绘画渲染

        var render=function() {

            //renderer.render(scene,camera);

            effect.render(scene,camera);//渲染3D画面

        }

5.源码如下：

<!DOCTYPE html>

<html>

<head>

    <title>demo1</title>

</head>

<style type="text/css">

   body{

        margin:;

   }

   canvas{

        width:%;

        height:%;

   }

</style>

<body>

    <script src="jquery.min.js"></script>

    <script src="../src/loaders/ObjectLoader.js"></script>

    <script src="../build/three.js"></script>

    <script src="../examples/js/controls/OrbitControls.js"></script>

    <script src="../examples/js/effects/AnaglyphEffect.js"></script>

    <script type="text/javascript">

        var scene = new THREE.Scene();//创建场景

        //创建一个摄像机对象

        var camera = new THREE.PerspectiveCamera(,window.innerWidth / window.innerHeight, 0.1, );

         //创建渲染器

        var renderer = new THREE.WebGLRenderer();

        renderer.setSize(window.innerWidth, window.innerHeight);

        document.body.appendChild(renderer.domElement);//渲染到浏览器

        //加入事件监听器,窗口自适应

        window.addEventListener('resize', function(){

            var width = window.innerWidth;

            var height = window.innerHeight;

            renderer.setSize(width,height);

            camera.aspect = width/height;

            camera.updateProjectionMatrix();

        })

        //轨道控制 镜头的移动

        var controls = new THREE.OrbitControls(camera,renderer.document);

        //创建形状 BoxGeometry

        var geometry = new THREE.BoxGeometry(,,);

        //自定义材料

        //map:用于设置纹理贴图，也可以用16进制的颜色替换：color:0xFFFFFF

        //side:用于设置显示面。属性可设置为双面DoubleSide，前面FontSide，后面BackSide

        //MeshBasicMaterial：基础网孔材料，一个以简单着色（平面或线框）方式来绘制几何形状的材料。

        //MeshLambertMaterial：兰伯特网孔材料，一种非发光材料（兰伯特）的表面

        //MeshPhongMaterial：网孔材料，用于表面有光泽的材料，计算每个像素。

        var cubeMaterial = [

            //右

            new THREE.MeshLambertMaterial({color:0xFFFFFF,side:THREE.DoubleSide}),

            //左

            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/2.png') ,side:THREE.DoubleSide}),

            //上

            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/3.png') ,side:THREE.DoubleSide}),

            //下

            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/4.png') ,side:THREE.DoubleSide}),

            //前

            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/5.png') ,side:THREE.DoubleSide}),

            //后

            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/6.png') ,side:THREE.DoubleSide})

        ];

        //创建材料   wireframe是否使用线条

        //var material = new THREE.MeshBasicMaterial({color:0xFFFFFF,wireframe:true});

        var material = new THREE.MeshFaceMaterial(cubeMaterial);

        //将材料和形状结合

        var cube = new THREE.Mesh(geometry,material);

        //物体加入场景中

        scene.add(cube);       

        //添加光线

        //注意：材料收到光线影响，即不同的材料对不同的光线表现出不同的特点，试着该表材料和光线，观测结果

        //1.    AmbientLight  环境光：这种光的颜色被应用到全局范围内的所有对象。

        //AmbientLight(光线的颜色，光线的强度)

        //var ambientLight = new THREE.AmbientLight(0xFFFFFF,3.0);

        //scene.add(ambientLight);//光线加入场景中

        //2.    PointLight 点光源 使用 MeshLambertMaterial 或 Phong网孔材料(MeshPhongMaterial) 来影响对象

        //var pointLight = new THREE.PointLight(0xFFFFFF,3.0);

        //scene.add(pointLight);//光线加入场景中

        //3.    平行光源（DirectionalLight）.影响使用 兰伯特网孔材料(MeshLambertMaterial) 或 Phong网孔材料(MeshPhongMaterial) 的对象。

        //var directionalLight = new THREE.DirectionalLight(0xFFFFFF,3.0);

        //scene.add(directionalLight);//光线加入场景中

        //4.    聚光光源（SpotLight）一种能投射锥形阴影区域的点光源。 使用 MeshLambertMaterial 或 Phong网孔材料(MeshPhongMaterial) 来影响对象。

        //var spotLight = new THREE.SpotLight(0xFFFFFF,3.0);

        //scene.add(spotLight);//光线加入场景中

        //5.    光（Light）光源的基类。

        var light = new THREE.Light(0xFFFFFF,1.0);

        scene.add(light);//光线加入场景中

        //物体3D化

        var effect = new THREE.AnaglyphEffect(renderer);

        effect.setSize(window.innerWidth, window.innerHeight);

        camera.position.z=;//设置相机的位置

        //逻辑

        var update=function(){

            //物体随着XY轴旋转

            //cube.rotation.x +=0.01;

            //cube.rotation.y += 0.005;

        }

        //绘画渲染

        var render=function() {

            //renderer.render(scene,camera);

            effect.render(scene,camera);//渲染3D画面

        }

        //循环运行update，render

        var loop=function() {

             requestAnimationFrame(loop);

             update();

             render();

        }

        loop();//循环开始

    </script>

</body>

</html>

【three.js第六课】物体3D化的更多相关文章

  1. vue.js第六课

    class与style绑定 绑定HTML class 对象语法 数组语法 绑定内联样式 对象语法 数组语法 自动添加前缀 1.class与style绑定. 数据绑定一个常见需求就是 操作元素的clas ...

  2. 潭州课堂25班：Ph201805201 WEB 之 JS 第六课 (课堂笔记)

    上节补充方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  3. 【three.js第七课】鼠标点击事件和键盘按键事件的使用

    当我们使用鼠标操作three.js渲染出的对象时,不仅仅只是仅限用鼠标对场景的放大.缩小.旋转而已,还有鼠标左键.右键的点击以及键盘各种按键等等的事件.我们需要捕获这些事件,并在这些事件的方法里进行相 ...

  4. webgl(three.js)3D光伏,3D太阳能能源,3D智慧光伏、光伏发电、清洁能源三维可视化解决方案——第十六课

    序: 能源是文明和发展的重要保障,人类命运不可避开的话题,无论是战争还是发展,都有它存在的身影.从石器时代到现代文明,人类的能源应用在进步,也在面临能源枯竭的危机与恐惧,而开发与应用可再生能源才是解决 ...

  5. 如何用three.js实现数字孪生、3D工厂、3D工业园区、智慧制造、智慧工业、智慧工厂-第十课

    文章前,先聊点啥吧. 最近元宇宙炒的挺火热,在所有人都争相定义元宇宙的时候,资本就开始着手入场了.当定义明确,全民皆懂之后,风口也就过去了. 前两天看到新闻,新世界CEO宣布购入最大的数字地块,这块虚 ...

  6. webgl(three.js)实现室内三维定位,3D定位,3D楼宇bim、实时定位三维可视化解决方案——第十四课（定位升级版）

    序: 还是要抽出时间看书的,迷上了豆豆的作品,最近在看<天幕红尘>,书中主人公的人生价值观以及修为都是让我惊为叹止.很想成为那样的人,但是再看看自己每天干的事,与时间的支配情况,真是十分的 ...

  7. vue.js 第十课-第十六课

    第十课: http://note.youdao.com/noteshare?id=25b5ba45286464856f21eb4b6b391ecd&sub=19C4429995384F72BD ...

  8. NeHe OpenGL教程 第三十六课：从渲染到纹理

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  9. NeHe OpenGL教程 第五课：3D空间

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

随机推荐

  1. [Bugku]Web题解

    bugku地址链接:https://ctf.bugku.com 1.web2 浏览器就显示一堆动态笑脸,时间长了密集恐惧症了. 解法1: F12查看源码 解法2: 地址栏输入: view-source ...

  2. Python-生成器实现简单的"生产者消费者"模型

    一.使用生成器实现简单的生产者消费者模型, 1.效果截屏 代码如下: import time def consumer(name): print('%s 开始买手机' %name) while Tru ...

  3. centos 安装activeMq

    Apache ActiveMQ是一个免费的开源消息代理和集成模式服务器.它支持来自JAVA.c++.C.Python.Perl.PHP等多种语言的客户端和协议.它提供了许多功能,如消息组.虚拟目的地. ...

  4. ML Lecture 0-2: Why we need to learn machine learning?

    在Github上也po了这个系列学习笔记(MachineLearningCourseNote),觉得写的不错的小伙伴欢迎来给项目点个赞哦~~ ML Lecture 0-2: Why we need t ...

  5. OSLab:实模式与保护模式

    日期:2019/5/18 12:00 内容:操作系统实验作业:x86:IA-32:实模式与保护模式. PS:如果我们上的是同一门课,有借鉴代码的铁汁请留言告知嗷.只是作业笔记,不推荐学习. 一.实模式 ...

  6. OpenCV-Python Shi-tomas拐角检测器和益于跟踪的特征 | 三十八

    目标 在本章中, 我们将学习另一个拐角检测器:Shi-Tomasi拐角检测器 我们将看到以下函数:cv.goodFeaturesToTrack() 理论 在上一章中,我们看到了Harris Corne ...

  7. 在TensorFlow中实现文本分类的卷积神经网络

    在TensorFlow中实现文本分类的卷积神经网络 Github提供了完整的代码: https://github.com/dennybritz/cnn-text-classification-tf 在 ...

  8. 【深度学习】Neural networks(神经网络)（一）

    神经网络的图解 感知机,是人工设置权重.让它的输出值符合预期. 而神经网络的一个重要性质是它可以自动地从数据中学习到合适的权重参数. 如果用图来表示神经网络,最左边的一列称为输入层,最右边的一列称为输 ...

  9. 区间dp暂时的理解

    因为刚刚看了区间dp,所以写一下对区间dp的理解. 例题: 石子归并 51Nod - 1021 看了一篇博客,觉得他说得比较容易理解,所以再次重复一遍: 假如你是上帝,已经知道了1~n堆石子的最优解, ...

  10. 模块 psutil 系统信息获取

    psutil模块介绍 psutil是一个开源切跨平台的库,其提供了便利的函数用来获取才做系统的信息,比如CPU,内存,磁盘,网络等.此外,psutil还可以用来进行进程管理,包括判断进程是否存在.获取 ...