`

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>

 

分享到:
评论

相关推荐

    基于three.js的机器人仿真平台的研究.pdf

    基于three.js的机器人仿真平台的研究 本文研究的目的是实现一个基于three.js和node.js技术的机器人仿真平台。研究的主要内容包括仿真平台的设计与实现,关键技术分析,以及仿真效果的验证。以下是详细的知识点阐述...

    threejs视觉漫游/VR

    在"threejs视觉漫游/VR"的项目中,可能包含一系列子文件,如模型文件(.obj、.gltf等)、纹理图片、场景配置脚本等。这些文件共同构建了一个完整的3D环境,用户可以通过VR设备或简单的鼠标键盘操作,在这个环境中...

    基于WebSocket和three.js的实时上位机, 用于显示STM32通过ESP8266发送来的数据波形图,并绘制路径图.

    相关项目设计中,皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻,也可以基于此项目进行扩展来开发出更多...

    car.glb车的模型

    一个gltf 的车的模型,可以在cesium和threejs里面加载,练手用的。 一个gltf模型,可以在cesium和threejs里面加载,练手用的。

    基于canvas、threejs的特效实例.zip

    【适合场景】:相关项目设计中,皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻,也可基于此项目来扩展开发...

    html5 threejs nodejs kinect实现体感.zip

    【适合场景】:相关项目设计中,皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻,也可基于此项目来扩展开发...

    html5+three.js+css科幻地球仪3D旋转动画特效.zip

    不错的前端JS特效、页面功能的代码,很适合练习前端的各种特效和功能,也可直接拿来适当调整后使用,用于练手、学习,也是很不错的

    基于threejs实现的元宇宙,包含第一人称与第三人称切换.zip(毕设&课设&实训&大作业&竞赛&项目)

    【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目...

    基于three.js编写的一个项目类示例代码

    three.js是一种基于WebGL的JavaScript库,用于在网页上创建和显示3D图形。WebGL是一个跨平台、无需插件的Web标准,它允许浏览器直接访问GPU硬件加速功能。three.js为WebGL提供了一个高级接口,简化了3D图形的开发...

    基于 vue 和 three.js 的3d 项目模版.zip

    【适合场景】:相关项目设计中,皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻,也可基于此项目来扩展开发...

    基于three.js实现的各种web 3D效果.zip

    【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目...

    基于webgl开源库three.js开发的一个网页3D游戏 demo.zip

    【适合场景】:相关项目设计中,皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻,也可以基于此项目进行扩展...

    基于vue3+ts实现的前端动画库,涵盖交互效果组件,图案设计,css动画,canvas,three.js 3D特效.zip

    【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目...

    whoosh:[原型]通过手部动作控制3D宇宙飞船

    2. **Three.js**:Three.js是基于WebGL的JavaScript 3D库,用于在网页上创建和展示三维图形。在"嗖"项目中,Three.js负责渲染3D宇宙飞船模型,以及创建游戏环境,包括光照、纹理和动画效果。 3. **...

    三维演示页面汉罗塔、乐高汽车、tensorflow

    这涉及到JavaScript编程,特别是递归函数的编写,以及可能利用Three.js这样的库来实现3D渲染。 其次,乐高汽车的展示可能意味着存在一个互动的模型,用户可以旋转、缩放或从不同角度查看。这可能涉及到3D建模和动画...

    Glovebox-AR:手套箱AR的仿真平台

    JavaScript是一种广泛使用的前端开发语言,它提供了丰富的库和框架,如Three.js和A-Frame,可以用来创建交互式3D场景和AR体验。 在Glovebox-AR项目中,开发者可能利用了A-Frame这样的WebAR框架,它基于HTML,简化了...

    airtaxi:直升机滑行模拟

    该项目可能使用了Three.js或者类似的JavaScript 3D库,这些库提供了一套完整的3D渲染和动画框架,使得开发者可以更轻松地创建3D场景和物体。通过Three.js,可以创建3D模型,设置光照、材质,以及控制相机视角,从而...

    Realidad-Virtual

    - Three.js是基于WebGL的JavaScript库,它简化了3D编程,提供了丰富的功能,如光照、材质、动画等,使得非专业图形程序员也能创建复杂的3D场景。 4. 虚拟现实应用案例 - 游戏开发:利用VR技术,可以创建更真实的...

    vrblocks:尝试制作一个使用Scratch风格界面的A-Frame开发工具的想法,使孩子可以在构建3d和VR体验时学习编码

    A-Frame简化了Web VR开发,使得开发者无需深入了解复杂的WebGL和Three.js库,就能构建VR内容。 4. **Scratch**:Scratch是由麻省理工学院媒体实验室的终身幼儿园团队开发的一款面向儿童的图形化编程工具。它通过...

Global site tag (gtag.js) - Google Analytics