huangzhidong
/
guoyao-jiankang


			
							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>