【three.js第四课】自定义材料、贴图。

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1.先去下载6张不同的图片素材放到项目中。

2.在【three.js第三课】的代码基础上添加自定义的材料

//自定义材料 cubeMaterial 数组

        //map:用于加载图片，THREE.TextureLoader().load('图片的地址')方法引入要放的图片，也可以用16进制的颜色替换：color:0xFFFFFF

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

        var cubeMaterial = [

            //右

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

            //左

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

            //上

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

            //下

            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.将原来的创建材料代码

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

改成

var material = new THREE.MeshFaceMaterial(cubeMaterial);//cubeMaterial:为自定义的材料数组的名称

4.运行观察不同方位的显示情况，并修改cubeMaterial 数组中side属性的值，进行观察

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="../build/three.js"></script>

    <script src="../examples/js/controls/OrbitControls.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

        var cubeMaterial = [

            //右

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

            //左

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

            //上

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

            //下

            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);

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

        //逻辑

        var update=function(){

            //物体随着XY轴旋转

            //cube.rotation.x +=0.01;

            //cube.rotation.y += 0.005;

        }

        //绘画渲染

        var render=function() {

            renderer.render(scene,camera);

        }

        //循环运行update，render

        var loop=function() {

             requestAnimationFrame(loop);

             update();

             render();

        }

        loop();//循环开始

    </script>

</body>

</html>