`

threejs练手

    博客分类：
  • js
 
阅读更多 
<!DOCTYPE html>
<header>
    <style>
        #carMap {
            width: 1200px;
            height: 950px;
            /* margin-right: 200px; */
        }
    </style>
    <script src="./js/three.js"></script>
</header>

<body>
    <div id="carMap"></div>



</body>

<script>
    Kotei3JSObject = function (containerId) {
        // var containerId="";
        this.container = document.getElementById(containerId);
        this.w2hscale = this.container.clientWidth / this.container.clientHeight; //纵横比
        this.cameraDISTANCE = 50;  //拍摄距离  视野角值越大，场景中的物体越小
        this.scopeMin = 1;     //相机离视体积最近的距离
        this.scopeMax = 3000; //相机离视体积最远的距离
        this.camera = new THREE.PerspectiveCamera(this.cameraDISTANCE, this.w2hscale, this.scopeMin, this.scopeMax);//照相机
        this.scene = new THREE.Scene();//场景
        this.renderer = new THREE.WebGLRenderer(); //渲染器
        this.pointLight = new THREE.PointLight(0xffffff);//光源
        this.ambient = new THREE.AmbientLight(0x444444); //环境光
        this.gridHelper = new THREE.GridHelper(2000, 1000, 0x808080, 0x808080);//辅助网格

        this.initCamera = function () {
            this.camera.position.set(cameraX, cameraY, cameraZ); //设置相机位置      
            this.camera.lookAt(sceneX, sceneY, sceneZ); //设置相机方向(指向的场景对象)
            this.camera.updateProjectionMatrix();
        };

        this.initRenderer = function () {
            this.renderer.setSize(this.container.clientWidth - 200, this.container.clientHeight);
            this.renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色      
            this.container.appendChild(this.renderer.domElement);
        };
        this.addCars = function (car) {
            if (car) {
                car.addToSence(this.scene);
            }
        };
        this.render = function () {
            this.camera.layers.enableAll();
            this.renderer.render(this.scene, this.camera);
        };
        this.init = function () {
            this.initCamera();
            this.initRenderer();
            // this.initLine();

            this.scene.add(this.pointLight);
            this.scene.add(this.ambient);
            this.scene.add(this.gridHelper);
            this.initRenderer();
            this.render();
        };
    }

    PaverVehicle = function (name, vcolor, w, h) {  //摊铺机
        this.vType = "001";
        this.layers = 10;
        this.name = name;
        this.vcolor = vcolor;
        this.width = w;
        this.heigth = h;
        this.setLayer = function (layers) {
            this.mesh.layers.set(layers);
        };

        var material = new THREE.MeshLambertMaterial({ color: vcolor });
        this.geometry1 = new THREE.BoxGeometry(w, 1, h / 3);
        this.mesh1 = new THREE.Mesh(this.geometry1, material);

        this.geometry2 = new THREE.BoxGeometry(w, 1, h);
        this.mesh2 = new THREE.Mesh(this.geometry2, material);
        this.mesh2.translateX(-w); //网格模型沿X轴方向平移w
        this.setLayer = function (layers) {
            this.mesh1.layers.set(layers);
            this.mesh2.layers.set(layers);
        };
        this.moveTo = function (point) {
            this.mesh1.translateX(point.getX()); //网格模型沿X轴方向平移
            this.mesh1.translateZ(point.getZ()); //网格模型沿z轴方向平移
            this.mesh2.translateX(point.getX()); //网格模型沿X轴方向平移
            this.mesh2.translateZ(point.getZ()); //网格模型沿z轴方向平移
        };
        this.Hide = function (camera) {
            camera.layers.toggle(this.layer);
        };
        this.addToSence = function (scene) {
            scene.add(this.mesh1);
            scene.add(this.mesh2);
        };
    }

    RollerVehicle = function (name, vcolor, w, h) {   //压路机
        this.vType = "002";
        this.layer = 20;
        this.name = name;
        this.vcolor = vcolor;
        this.width = w;
        this.heigth = h;
        this.geometry = new THREE.BoxGeometry(w, 1, h);
        var material = new THREE.MeshLambertMaterial({ color: vcolor });
        this.mesh = new THREE.Mesh(this.geometry, material);
        this.moveTo = function (point) {
            this.mesh.translateX(point.getX()); //网格模型沿X轴方向平移
            this.mesh.translateZ(point.getZ()); //网格模型沿z轴方向平移
        };
        this.setLayer = function (layers) {
            this.mesh.layers.set(layers);
        };
        this.Hide = function (camera) {
            camera.layers.toggle(this.layer);
        };
        this.addToSence = function (scene) {
            scene.add(this.mesh);

        };

    }
    KoteiPoint = function (x, y, z) {
        this.x = x,
            this.y = y,
            this.z = z
        this.getX = function () {
            return this.x;
        },
        this.setX = function (x) {
            this.x = x;
        },
        this.getY = function () {
            return this.y;
        },
        this.setY = function (y) {
            this.y = y;
        },
        this.getZ = function () {
            return this.z;
        },
        this.setZ = function (z) {
            this.z = z;
        },
        this.print = function () {
            console.log("(" + x + "," + y + "," + z + ")");
        }
    }
    KoteiMap = function (swidth, sheight, k, gp0) {
        this.getScreenPoint = function (g) {
            var rp = new KoteiPoint((g.getX() - this.op0.getX()) / k, (g.getY() - this.op0.getY()) / k, (g.getZ() - this.op0.getZ()) / k);
            return rp;
        };
        this.getGPSScreenPoint = function (gps) {
            var g = this.gps2ScreenPoint(gps);
            var rp = new KoteiPoint((g.getX() - this.op0.getX()) / k, (g.getY() - this.op0.getY()) / k, (g.getZ() - this.op0.getZ()) / k);
            return rp;
        };
        this.setGP0 = function (gp0) {
            this.gp0 = gp0;
            this.initOP0();
        };
        this.setGPSP0 = function (gpsp0) {
            this.gp0 = gps2ScreenPoint(pgsp0);
            this.initOP0();
        };
        this.initOP0 = function () {

            this.op0 = new KoteiPoint(this.gp0.getX() - this.k * this.sp0.getX(), this.gp0.getY() - this.k * this.sp0.getY(), this.gp0.getZ() - this.k * this.sp0.getZ());

            return this.op0;
        }
        this.getGPSLeftTopPoint = function (gps, w, h) {
            var p = gps2ScreenPoint(gps);
            return getLeftTopPoint(p, w, h);
        }
        this.getLeftTopPoint = function (p, w, h) {
            var rp = getScreenPoint(p);
            rp.setX(rp.getX() - w / k);
            rp.setY(rp.getY() - h / k);
            rp.setZ(rp.getZ() - h / k);
            return rp;
        }
        this.gps2ScreenPoint = function (gps) {
            var radius = 6378.140 * 1000 * 100;//cm    
            var phi = (180 + gps.lng) * (Math.PI / 180);
            var theta = (90 - gps.lat) * (Math.PI / 180);
            var rp = new KoteiPoint(-radius * Math.sin(theta) * Math.cos(phi), radius * Math.cos(theta), radius * Math.sin(theta) * Math.sin(phi));
            return rp;
        }


        this.swidth = swidth;
        this.sheight = sheight;
        this.k = k;
        if (gp0.x > 0) {
            this.gp0 = gp0;
        }
        else {
            this.gp0 = this.gps2ScreenPoint(gp0);
        }
        this.sp0 = new KoteiPoint(this.swidth / 3, this.sheight / 3, this.sheight / 3);
        this.op0 = new KoteiPoint(this.gp0.getX() - this.k * this.sp0.getX(), this.gp0.getY() - this.k * this.sp0.getY(), this.gp0.getZ() - this.k * this.sp0.getZ());

    }


    var cameraX = 0, cameraY = 900, cameraZ = 0;
    var sceneX = 0, sceneY = 0, sceneZ = 0;
    var kmObject = new Kotei3JSObject("carMap");
    kmObject.init();
    var tp1 = new PaverVehicle("摊铺", "blue", 20, 30);
    kmObject.addCars(tp1);
    var roll1 = new RollerVehicle("压路", "blue", 10, 30);

    kmObject.addCars(roll1);
    kmObject.render();
</script>

</html>

 

分享到：
| mybatis-plus 自动代码生成
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics