【three.js第六课】物体3D化

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

文件路径：

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

进入【js】文件夹；

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

我的引入如下：

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.源码如下：

7.效果图：