huangzhidong
/
mingde-bd


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
							<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>模型标注</title>
    <link rel="stylesheet" href="/static/hplus/css/bootstrap.min.css">
    <link rel="stylesheet" href="/admin/css/common.css">
    <style>
        html,body {
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
        .red-label{
            position: fixed;
            z-index: 100;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: red;
        }
        .pbtn{
            padding: 10px;
        }
    </style>
</head>
<body>

<div id="label2" class="red-label"></div>

<div class="pbtn">
    <form method="post" action="{:url('three')}" class="form-horizontal">
        <input type="hidden" name="id" value="{$id}">
        <input type="hidden" name="x" id="x" value="{$x}">
        <input type="hidden" name="y" id="y" value="{$y}">
        <input type="hidden" name="z" id="z" value="{$z}">
        <button class="btn btn-primary ajax-post" data-layer="1" target-form="form-horizontal" type="submit">保 存</button>
    </form>
</div>

<script src="/static/hplus/js/jquery.min.js?v=2.1.4"></script>
<script src="/static/layer3.2.0/layer.js"></script>
<script src="/static/threejs135/three.min.js"></script>
<script src="/static/threejs135/js/controls/OrbitControls.js"></script>
<!-- 引入gltf模型加载库GLTFLoader.js -->
<script src="/static/threejs135/js/loaders/GLTFLoader.js"></script>
<script src="/static/threejs135/js/environments/RoomEnvironment.js"></script>
<script src="/static/threejs135/js/renderers/CSS3DRenderer.js"></script>
<script src="/static/threejs135/jsm/loaders/GLTFLoader.js"></script>
<script src="/admin/js/common.js"></script>
<script>
    window.onload=function(){
        var x = '{$x}';
        var y = '{$y}';
        var z = '{$z}';
        var gltf = null;
        /**
         * 创建场景对象Scene
         */
        var scene = new THREE.Scene();
        /**
         * 光源设置
         */
            //点光源
        var point = new THREE.PointLight(0xffffff);
        point.position.set(400, 200, 300); //点光源位置
        scene.add(point); //点光源添加到场景中
        //环境光
        var ambient = new THREE.AmbientLight(0x444444);
        scene.add(ambient);
        /**
         * 相机设置
         */
        var width = window.innerWidth; //窗口宽度
        var height = window.innerHeight; //窗口高度
        var k = width / height; //窗口宽高比
        var s = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大
        //创建相机对象
        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 0.01, 1000);
        camera.position.set(100, 100, 100); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

        var renderer = new THREE.WebGLRenderer({
            antialias: true  // 开启锯齿
        });
        renderer.setSize(width, height); //设置渲染区域尺寸
        // renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
        document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
        renderer.domElement.style.position = 'absolute';
        renderer.domElement.style.top = '0px';
        renderer.domElement.style.zIndex = '-1'; // canvas全屏，不遮挡其它HTML元素
        // 执行渲染操作   指定场景、相机作为参数
        renderer.render(scene, camera);
        var pmremGenerator = new THREE.PMREMGenerator(renderer);
        pmremGenerator.compileEquirectangularShader();
        scene.environment = pmremGenerator.fromScene(new THREE.RoomEnvironment()).texture;

        // 创建一个CSS3渲染器CSS3DRenderer
        var CSS3Renderer = new THREE.CSS3DRenderer();
        CSS3Renderer.setSize(width, height);
        CSS3Renderer.domElement.style.position = 'absolute';
        // 相对标签原位置位置偏移大小
        CSS3Renderer.domElement.style.top = '0px';
        CSS3Renderer.domElement.style.left = '0px';
        // //设置.pointerEvents=none，以免模型标签HTML元素遮挡鼠标选择场景模型
        CSS3Renderer.domElement.style.pointerEvents = 'none';
        document.body.appendChild(CSS3Renderer.domElement);

        // 渲染函数
        function render() {
            CSS3Renderer.render(scene, camera); // 执行渲染操作
            renderer.render(scene, camera); // 执行渲染操作
            requestAnimationFrame(render); // 请求再次执行渲染函数render，渲染下一帧
        }
        render();

        const controls = new THREE.OrbitControls(camera, renderer.domElement);// 创建控件对象
        controls.enableZoom = false;
        console.log(controls);
        window.addEventListener('click', choose); // 监听窗口鼠标单击事件

        if(x){
            drawPointer(x,y,z);
        }

        function choose(event) {
            const Sx = event.clientX; // 鼠标单击位置横坐标
            const Sy = event.clientY; // 鼠标单击位置纵坐标
            // 屏幕坐标转WebGL标准设备坐标
            const x = (Sx / window.innerWidth) * 2 - 1; // WebGL标准设备横坐标
            const y = -(Sy / window.innerHeight) * 2 + 1; // WebGL标准设备纵坐标
            // 创建一个射线投射器`Raycaster`
            const raycaster = new THREE.Raycaster();
            // 通过鼠标单击位置标准设备坐标和相机参数计算射线投射器`Raycaster`的射线属性.ray
            raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
            // 返回.intersectObjects()参数中射线选中的网格模型对象
            // 未选中对象返回空数组[],选中一个数组1个元素，选中两个数组两个元素
            const intersects = raycaster.intersectObjects(gltf.scene.children);
            console.log('射线器返回的对象', intersects);
            // console.log("射线投射器返回的对象 点point", intersects[0].point);
            // intersects.length大于0说明，说明选中了模型

            if (intersects.length > 0) {
                // 选中模型的第一个设置为半透明
                drawPointer(intersects[0].point.x,intersects[0].point.y,intersects[0].point.z);
                $('#x').val(intersects[0].point.x);
                $('#y').val(intersects[0].point.y);
                $('#z').val(intersects[0].point.z);
            }
        }

        function drawPointer(x,y,z) {
            let worldVector1 = new THREE.Vector3(x,y,z);
            const div = document.getElementById('label2');
            div.style.display = 'block';
            const obj = new THREE.CSS3DSprite(div);
            scene.add(obj);
            obj.position.copy(worldVector1);
            obj.scale.set(0.2, 0.2, 0.2); // 缩放CSS3DObject模型对象
        }

        // 显示坐标辅助线
        // const axes = new THREE.AxisHelper(200);
        // scene.add(axes);


        var loader = new THREE.GLTFLoader(); // 创建一个GLTF加载器
        loader.load('/lou.gltf', (gltfObj) => {
            console.log('控制台查看加载gltf文件返回的对象结构', gltfObj);
            gltf = gltfObj;
            scene.add(gltf.scene);

            scene.environment = pmremGenerator.fromScene(new THREE.RoomEnvironment(), 100).texture;
            gltf.scene.scale.set(0.13, 0.13, 0.13);// 整体缩放
        }, (xhr) => {
            // 控制台查看加载进度xhr
            // 通过加载进度xhr可以控制前端进度条进度   Math.floor:小数加载进度取整
            console.log(`加载进度${Math.floor(xhr.loaded / xhr.total * 100)}%`);
        });
    };


</script>
</body>
</html>