習慣沉默123 2018-06-20 06:09 采纳率: 33.3%
浏览 7523
已结题

threejs多面体贴图加纹理,貌似只改变了颜色,求大神指点!

  // 鼠标点击
    var outlineMesh;
    document.addEventListener("mousedown", onDocumentMouseDown, false);

    init();
    animate();

    function init() {
        scr();
       objects();
        lights();
        addfloor();
        others();
    }
 //   var scene = new THREE.Scene();

    // create a camera, which defines where we're looking at.
 //   var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

    function lights() {
        var ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
        scene.add(ambientLight);


        var pointLight = new THREE.PointLight(0xffffff, 0.1);
      //  scene.add(pointLight);

     //   var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        var pointLight = new THREE.PointLight(0xffffff, 1);
        // scene.add(pointLight);
        camera.add(pointLight);
    }



    function objects() {
    //  loadcontainer();
        addHospital()
    }

    function addHospital() {
        var hospital = createHospital()
     //   hospital.position.y = 20
        scene.add(hospital)
    }



    function createHospital() {
        var hospital = new THREE.Object3D()
        var frontMainCoords = [
           [0, -20],
           [-30, 0],

           [0, 20],
           [30, 0],

        ]
        var frontMainShape = utils.makeShape(frontMainCoords)
        var frontMainGeometry = utils.makeExtrudeGeometry(frontMainShape, 20)
        var frontMainMaterial = new THREE.MeshPhongMaterial({ map: textures.window() })
  //      var phongmaterial = new THREE.MeshPhongMaterial({color: 0x677784, transparent: true, opacity: 0.85});
  //      var phongmes = new THREE.Mesh(frontMainMaterial, phongmaterial);
        frontMainMaterial.map.repeat.set(0.1, 0.04)

        var alldate = []

        //楼层总列表
        for(var i=0;i<6;i++){

            /*  var frontMain = new THREE.Mesh(frontMainGeometry, frontMainMaterial)
              hospital.add(frontMain)
               renderScene()*/
            var obj = "sta"+i;
            alldate.push(obj)
        }

        var layerList1 = []
        var layerList2 = []

        for(var j=0;j<5;j++){
            var onedata = new THREE.Mesh(frontMainGeometry, frontMainMaterial);
        //  var onedata =createMesh(frontMainGeometry, "stone.jpg");

            hospital.add(onedata);
            layerList1.push(onedata)

        }
        for(var j=5;j<alldate.length;j++){
       //   var onedata =createMesh(frontMainGeometry, "stone.jpg");
            var onedata = new THREE.Mesh(frontMainGeometry, frontMainMaterial);
            hospital.add(onedata);
            layerList2.push(onedata)
        }

        function createMesh(geom, imageFile) {
            //  var texture = 


                var mat = new THREE.MeshPhongMaterial();
                mat.normalMap = new THREE.TextureLoader().load("/seismis/js/3djs/assets/textures/general/" + imageFile);
        //      mat.specular = new THREE.Color(0xffffff);
                mat.needsUpdate = true;
                mat.shininess = 10;
                var mesh = new THREE.Mesh(geom, mat);
                return mesh;
            }
            //中间立体图形
    //  var polyhedron1 = createMesh(cubeGeometry, "stone.jpg");



        renderScene();
        var step1 = 0;
        var step2 = 0;
        function renderScene() {
            step1 += 0.1;
            for(var i=0;i<layerList1.length;i++){
                var frontMain = layerList1[i];
                frontMain.position.x = 0 + ( (2+i) * (Math.cos(step1)));
                frontMain.position.y = 0+i*20 + ( 2 * Math.abs(Math.sin(step1)));
                frontMain.position.z = 0 + ( (2+i) * (Math.cos(step1)));

            }
            step2 += 0.1;
            for(var k=0;k<(layerList2.length);k++){
                var frontMain = layerList2[k];
                frontMain.position.x = 0 + ( (2+k+5) * (Math.cos(step2)));
                frontMain.position.y = 0+(k+5)*20 + ( 2 * Math.abs(Math.sin(step2)));
                frontMain.position.z = 0 + ( (2+k+5) * (Math.cos(step2)));

            }


          requestAnimationFrame(renderScene);
          renderer.render(scene, camera);
        }



        // call the render function
        var step = 0;

        initModel()
        function initModel() {
            //辅助工具
            var helper = new THREE.AxisHelper(10);
            scene.add(helper);
            var cubeGeometry = new THREE.Geometry();
            //创建立方体的顶点
            var vertices = [
                new THREE.Vector3(0, 0, 20), //v0
                new THREE.Vector3(30, 0, 0), //v1
                new THREE.Vector3(0, 0,-20), //v2
                new THREE.Vector3(-30, 0, 0), //v3
                new THREE.Vector3(-30,220,0), //v4
                new THREE.Vector3(-22,220,10), //v5
                new THREE.Vector3(22,220,10), //v6
                new THREE.Vector3(30,220,0), //v7
                new THREE.Vector3(22,220,-10), //v8
                new THREE.Vector3(-22,220,-10), //v9
            ];
            cubeGeometry.vertices = vertices;
            //创建立方的面
            var faces=[
                new THREE.Face3(0,1,2),
                new THREE.Face3(0,2,3),
                new THREE.Face3(3,0,5),
                new THREE.Face3(3,5,4),
                new THREE.Face3(3,4,9),
                new THREE.Face3(3,9,2),
                new THREE.Face3(2,9,8),
                new THREE.Face3(8,1,2),
                new THREE.Face3(8,7,1),
                new THREE.Face3(6,1,7),
                new THREE.Face3(6,0,1),
                new THREE.Face3(0,6,5),
                new THREE.Face3(5,6,7),
                new THREE.Face3(5,7,8),
                new THREE.Face3(5,8,9),
                new THREE.Face3(5,9,4),

            ];
            cubeGeometry.faces = faces;
            //生成法向量
            cubeGeometry.computeFaceNormals();




            function createMesh(geom, imageFile) {
            //  var texture = 
                var mat = new THREE.MeshPhongMaterial();
                mat.map = new THREE.TextureLoader().load("/seismis/js/3djs/assets/textures/general/" + imageFile);
        //      mat.specular = new THREE.Color(0xffffff);
                mat.needsUpdate = true;
                mat.shininess = 10;
                var mesh = new THREE.Mesh(geom, mat);
                return mesh;
            }



            //中间立体图形
        //  var polyhedron1 = createMesh(cubeGeometry, "stone.jpg");

        //  scene.add(polyhedron1);

        /*  var frontMainMaterial = new THREE.MeshPhongMaterial({ map: textures.window() })
             frontMainMaterial.map.repeat.set(0.01, 0.04)*/

            var polyhedron1 = createMesh(cubeGeometry, "bathroom-normal.jpg");
            polyhedron1.position.x = 0;
            polyhedron1.position.y = 120;
            polyhedron1.position.z = 0;
            scene.add(polyhedron1);


   /*          var textureLoader = new THREE.TextureLoader();

               textureLoader.load( "/seismis/js/3djs/assets/textures/general/bathroom-normal.jpg", function( texture ){
                   // 加载法向贴图
                   textureLoader.load("/seismis/js/3djs/assets/textures/general/bathroom-normal.jpg", function( normalTexture ){
                       var geometry = new THREE.BoxGeometry( 50, 50, 50 );

                       var material = new THREE.MeshBasicMaterial({
                           map: texture, 
                           normalMap: normalTexture // 只要将法向贴图赋给材质的normalMap属性即可
                       });
                       mesh = new THREE.Mesh( geometry, material );
                       scene.add( mesh );
                   } );
               });*/


            //12面体
        /*     var frontMainMaterial = new THREE.MeshPhongMaterial({ map: textures.window() })
               var polyhedron2 = new THREE.Mesh(new THREE.IcosahedronGeometry(150, 0), frontMainMaterial);
        //    var polyhedron2 = createMesh(new THREE.IcosahedronGeometry(50, 0), "stone.jpg");
            polyhedron2.position.x = 112;
            scene.add(polyhedron2);*/


            var cubeGeometry1 = new THREE.Geometry();
            //创建立方体的顶点
            var vertices = [
                new THREE.Vector3(-30,0,0), //v4    0 
                new THREE.Vector3(-22,0,10), //v5   1
                new THREE.Vector3(-22,0,-10), //v9  2
                new THREE.Vector3(-30,35,0) //v10   3
            ];
            cubeGeometry1.vertices = vertices;
            //创建立方的面
            var faces=[
                new THREE.Face3(0,1,3),
                new THREE.Face3(3,2,0),
                new THREE.Face3(2,0,1),
                new THREE.Face3(1,2,3)

            ];
            cubeGeometry1.faces = faces;
            //生成法向量
            cubeGeometry1.computeFaceNormals();
            var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x6a5e74});
            cube = new THREE.Mesh(cubeGeometry1, cubeMaterial);
            cube.position.x = 0;
            cube.position.y = 340;
            cube.position.z = 0;
            scene.add(cube);

            var cubeGeometry2 = new THREE.Geometry();
            //创建立方体的顶点
            var vertices = [
                new THREE.Vector3(30,0,0), //v7    0 
                new THREE.Vector3(22,0,10), //v6   1
                new THREE.Vector3(22,0,-10), //v8  2
                new THREE.Vector3(30,35,0) //v11    3
            ];
            cubeGeometry2.vertices = vertices;
            //创建立方的面
            var faces=[

               new THREE.Face3(0,2,1),
               new THREE.Face3(2,1,3),
               new THREE.Face3(3,1,0),
               new THREE.Face3(3,0,2),

            ];
            cubeGeometry2.faces = faces;
            //生成法向量
            cubeGeometry1.computeFaceNormals();
            var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x6a5e74});
            cube2 = new THREE.Mesh(cubeGeometry2, cubeMaterial);
            cube2.position.x = 0;
            cube2.position.y = 340;
            cube2.position.z = 0;
            scene.add(cube2);


            //顶部
            var cubeGeometry3 = new THREE.Geometry();
            //创建立方体的顶点
            var vertices = [
                new THREE.Vector3(-27,0,4), //    0 
                new THREE.Vector3(-27,0,-4), //   1
                new THREE.Vector3(-30,11,0), //  2
                new THREE.Vector3(30,11,0), //  3
                new THREE.Vector3(27,0,4), //    4
                new THREE.Vector3(27,0,-4), //    5 


            ];
            cubeGeometry3.vertices = vertices;
            //创建立方的面
            var faces=[

               new THREE.Face3(0,2,1),
               new THREE.Face3(1,2,3),
               new THREE.Face3(1,3,5),
               new THREE.Face3(3,2,0),
               new THREE.Face3(3,0,4),
               new THREE.Face3(3,4,5),


            ];
            cubeGeometry3.faces = faces;
            //生成法向量
            cubeGeometry1.computeFaceNormals();
            var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x6a5e74});
            cube2 = new THREE.Mesh(cubeGeometry3, cubeMaterial);
            cube2.position.x = 0;
            cube2.position.y = 364;
            cube2.position.z = 0;
            scene.add(cube2);


        }

        function render() {
      //    stats.update();
            polyhedron.rotation.y = step += 0.01;

            // render using requestAnimationFrame
            requestAnimationFrame(render);
            webGLRenderer.render(scene, camera);
        }      


        return hospital
      }

    function createWindow() {
        var windowObj = new THREE.Object3D()
        var glassGeometry = new THREE.PlaneGeometry(20, 20)
        var glass = utils.makeMesh('phong', glassGeometry, 0x6a5e74)
        windowObj.add(glass)

        var windowBorderGeometry = new THREE.BoxBufferGeometry(22, 2, 2)
        var windowBorder = utils.makeMesh('phong', windowBorderGeometry, 0xffffff)

        var windowBorderTop = windowBorder.clone()
        windowBorderTop.position.y = 10
        windowObj.add(windowBorderTop)

        var windowBorderBottom = windowBorder.clone()
        windowBorderBottom.position.y = -10
        windowObj.add(windowBorderBottom)

        var windowBorderLeft = windowBorder.clone()
        windowBorderLeft.rotation.z = 0.5 * Math.PI
        windowBorderLeft.position.x = -10
        windowObj.add(windowBorderLeft)

        var windowBorderRight = windowBorderLeft.clone()
        windowBorderRight.position.x = 10
        windowObj.add(windowBorderRight)

        return windowObj
      }


    function loadcontainer() {
        var onProgress = function (xhr) {
            if (xhr.lengthComputable) {
                var percentComplete = xhr.loaded / xhr.total * 100;
                console.log(Math.round(percentComplete, 2) + '% downloaded');
            }
        };

        var onError = function (xhr) {
        };
        var mtlLoader = new THREE.MTLLoader();
        mtlLoader.load('/seismis/js/js/objs/5.mtl', function (materials) {
            materials.preload();
            var loader = new THREE.OBJLoader();
            loader.setMaterials(materials);

            loader.load('/seismis/js/js/objs/5.obj', function (object) {
                object.traverse(function (child) {
                    if (child instanceof THREE.Mesh) {
                        child.material.transparent = true;
                        child.material.opacity = 1;
                        if (child.material instanceof Array) {
                            for (var i = 0, length = child.material.length; i < length; i++)
                                child.material[i].transparent = true;
                        }
                    }
                });
            //    for (var i = 0; i < 3; i++) {

                    var temp = object.clone();
            //        temp.position.set(-100 + 300 * i, 150, 0);
                    temp.position.set(0 , 0, 0);
                    scene.add(temp);
            //    }
            }, onProgress, onError);
        })


    }

    function loadmale1() {
        var onProgress = function (xhr) {
            if (xhr.lengthComputable) {
                var percentComplete = xhr.loaded / xhr.total * 100;
                console.log(Math.round(percentComplete, 2) + '% downloaded');
            }
        };

        var onError = function (xhr) {
        };

        THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader());

        var mtlLoader = new THREE.MTLLoader();
        mtlLoader.setPath('/seismis/js/js/objs/male02/');
        mtlLoader.load('male02.mtl', function (materials) {
            console.log(materials);
            materials.preload();

            var objLoader = new THREE.OBJLoader();
            objLoader.setMaterials(materials);
            objLoader.setPath('/seismis/js/js/objs/male02/');
            objLoader.load('male02.obj', function (object) {

                object.position.y = 10;
                scene.add(object);

            }, onProgress, onError);

        });
    }

    // 没有考虑group,所以通过obj加载的物体无法点选
    function getMeshs() {
        var meshs = [];
        for (var i = 0, length = scene.children.length; i < length; i++) {
            if (scene.children[i] instanceof THREE.Mesh && scene.children[i].geometry instanceof THREE.BoxGeometry) {
                meshs.push(scene.children[i]);
            }
        }
        return meshs;
    }

    function onDocumentMouseDown(e) {
        e.preventDefault();
        rotate = false;
        //将鼠标点击位置的屏幕坐标转成threejs中的标准坐标,具体解释见代码释义
        var mouse = {};
        mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
        mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
        //新建一个三维单位向量 假设z方向就是0.5
        //根据照相机,把这个向量转换到视点坐标系
        var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5).unproject(camera);
        console.log(vector);
        var sub = vector.sub(camera.position);
        console.log(sub);
        var param2 = sub.normalize();
        var raycaster = new THREE.Raycaster(camera.position, param2);
        console.log("---------------------------------------------");

        //射线和模型求交,选中一系列直线
        var intersects = raycaster.intersectObjects(getMeshs());

        if (intersects.length > 0) {
            //选中第一个射线相交的物体
            scene.remove(outlineMesh);
            var SELECTED = intersects[0].object;
            var outlineMaterial2 = new THREE.MeshBasicMaterial({color: 0x00ff00, side: THREE.BackSide});
            outlineMesh = new THREE.Mesh(SELECTED.geometry.clone(), outlineMaterial2);
            outlineMesh.position.set(SELECTED.position.x, SELECTED.position.y, SELECTED.position.z);
            outlineMesh.scale.multiplyScalar(1.05);
            scene.add(outlineMesh);
        }

    }
  • 写回答

2条回答 默认 最新

  • qq_34102221 2018-06-20 06:39
    关注

    贴图的纹理路径是否设置正确了?

    评论

报告相同问题?

悬赏问题

  • ¥15 MATLAB动图问题
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题