WebGL\THREEJS实现楼宇楼层信息消防绿化建模

最新推荐文章于 2024-05-24 18:12:14 发布

dongfs-821

最新推荐文章于 2024-05-24 18:12:14 发布

阅读量1.9k

点赞数

分类专栏： THREEJS WEBGL

本文链接：https://blog.csdn.net/u010803748/article/details/125246976

版权

THREEJS 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

WEBGL

1 篇文章 0 订阅

订阅专栏

一直对3D模型非常感兴趣，最近学习了Threejs相关的开发教程，通过两个多星期的努力，初步实现了一个简单模型的搭建控制

前言、效果

直接上代码：

一、引入依赖库

<script src="js/jquery-1.9.1.js"></script>
<script src="js/Stats.js"></script>
<script type="text/javascript" src="js/Tween.js"></script>


import * as THREE from 'three';
import {OrbitControls} from './js/controls/OrbitControls.js';
import {GLTFLoader} from './js/loaders/GLTFLoader.js';
import {MTLLoader} from './js/loaders/MTLLoader.js';
import {OBJLoader} from './js/loaders/OBJLoader.js';

二、基本场景开发

const canvas = document.querySelector('#c');
        var stats = initStats();

        const renderer = new THREE.WebGLRenderer({
            canvas
            // antialias: true, // 模型抗锯齿
            // alpha: true // 开启背景透明
             });
        renderer.outputEncoding = THREE.sRGBEncoding;
        var SCREEN_WIDTH = window.innerWidth,
            SCREEN_HEIGHT = window.innerHeight;

const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
        camera.position.set(0, 10, 20);


        const controls = new OrbitControls(camera, canvas);

        //是否可以缩放
        controls.enableZoom = true
        //是否自动旋转
        //controls.autoRotate = true;
        //设置相机距离原点的最远距离
        controls.minDistance = 3;
        //设置相机距离原点的最远距离
        controls.maxDistance = 10;


 //用来存外部引入的模型
        let group = new THREE.Group();
        let selectObject;
        const scene = new THREE.Scene();
        scene.position.y=0;
        addEventListener('click', onMouseDblclick, false);
        addEventListener("mousedown", clickEvent, false);
        var urls = [
            'images/png1/mars_posx.jpg',
            'images/png1/mars_negx.jpg',
            'images/png1/mars_posy.jpg',
            'images/png1/mars_negy.jpg',
            'images/png1/mars_posz.jpg',
            'images/png1/mars_negz.jpg'
        ];

        // 天空盒
        var cubeLoader = new THREE.CubeTextureLoader();


        scene.background = cubeLoader.load(urls);

三、添加地板

const planeSize = 1000;

            const loader = new THREE.TextureLoader();
            const texture = loader.load('images/checker.png');
            texture.wrapS = THREE.RepeatWrapping;
            texture.wrapT = THREE.RepeatWrapping;
            texture.magFilter = THREE.NearestFilter;
            const repeats = planeSize / 2;
            texture.repeat.set(repeats, repeats);

            const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
            const planeMat = new THREE.MeshPhongMaterial({
                map: texture,
                side: THREE.DoubleSide,
            });
            const mesh = new THREE.Mesh(planeGeo, planeMat);
            mesh.rotation.x = Math.PI * -.5;
            scene.add(mesh);

四、加载模型

gltfLoader.load('resources/models9/HTC2.gltf', (gltf) => { //

                const root = gltf.scene;
                console.log(gltf);
                debugger;
                group.add(root)
                scene.add(group);
                // scene.add(root);
                //===============================================================

                root.traverse(function (value) {
                    if(value.isMesh){


                    }
                });



                initObj("video1", './obj/camera.mtl', './obj/camera_left.obj');

。。。。。

五、控制

 function applyScalar(scalar){
                    root.traverse(function (value) {
                        if (!beExpand){
                            if(value.name.indexOf("TH9") > 0){
                                value.translateY(90);
                            }
。。。。。。。