container-based-on-threejs
/
index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>三维堆场展示</title>
  <link rel="stylesheet" href="js/viewer.min.css">
  <style>
    body {
      margin: 0;
      overflow: hidden;
      /* 隐藏body窗口区域滚动条 */
    }
  </style>
  <!--引入three.js三维引擎-->
  <script src="js/three.js"></script>
  <script src="js/OrbitControls.js"></script>
  <script src="js/jquery.js"></script>
  <script src="js/DrawBaseMap.js"></script>
  <script src="js/Query.js"></script>
  <script src="js/OBJLoader.js"></script>
  <script src="js/MTLLoader.js"></script>
  <script src="js/viewer.min.js"></script>
</head>

<body>
  <div style="background-color:#F1F1F1;position:fixed; top:30px;right:20px;padding: 5px;border-radius: 3px;">
    集装箱号：<input type="text" id="jzxh" value="">
  </div>


  <script>
    var htmlStr = '';
    var inputData = '';
    var boxarray = [];//需要世界坐标
    var dcxwmx = ''//堆场箱位模型
    var clickBoxNo = ''; //点击的箱号
    var isClickItem = false; //是否点击了左侧

    /**
     * 创建场景对象Scene
     */
    var scene = new THREE.Scene();


    //创建地面对象
    var geometry = new THREE.PlaneGeometry(1000, 1000); //矩形平面
    // 加载草地纹理贴图
    var texture = new THREE.TextureLoader().load("./img/grass.jpg");
    // 设置纹理阵列
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    // uv两个方向纹理重复数量
    texture.repeat.set(10, 10);
    var material = new THREE.MeshLambertMaterial({
      map: texture,
    });
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(mesh); //网格模型添加到场景中
    mesh.rotateX(-Math.PI / 2);

    // 设置数组材质对象作为网格模型材质参数
    var meshbox = CreateMeshTemplate(); //创建箱子

    var geometry = new THREE.BoxGeometry(180, 45, 45); //立方体
    // var geometry = new THREE.BoxGeometry(20, 20, 20); //创建一个立方体几何对象Geometry
    var material = new THREE.MeshLambertMaterial({
      color: 0x0000ff
    }); //材质对象Material

    //创建纹理加载器
    var textureLoader = new THREE.TextureLoader();
    var texture = textureLoader.load('img/02.png'); //加载图片，返回texture对象，可以简单理解为返回一张图片

    //创建材质对象1
    var marterial_1 = new THREE.MeshLambertMaterial({
      map: texture
    });

    texture = textureLoader.load('img/01.png'); //加载图片，返回texture对象，可以简单理解为返回一张图片

    //创建材质对象2
    var marterail_2 = new THREE.MeshLambertMaterial({
      map: texture
    });

    var marterialArr = [marterial_1, marterial_1, marterail_2, marterail_2, marterail_2, marterail_2];

    //设置数组材质对象作为网格模型的材质参数
    var mesh = new THREE.Mesh(geometry, marterialArr);
    mesh.position.set(0, 45 / 2, 0);
    scene.add(mesh);


    // 共享材质和几何体数据，批量创建mesh
    // for (let i = 0; i < 6; i++) {
    //   // 创建网格模型对象
    //   var mesh = new THREE.Mesh(geometry, material);
    //   // 平移该网格模型
    //   mesh.translateY(i * 22);
    //   scene.add(mesh)
    // }

    // 坐标系辅助显示
    var axesHelper = new THREE.AxesHelper(450);
    scene.add(axesHelper);

    // 下面的都是基础参数设置

    /**
     * 光源设置
     */

    //点光源
    var point = new THREE.DirectionalLight(0xeeeeee);
    point.position.set(1000, 1000, 500); //点光源位置
    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, 1, 1000);
    camera.position.set(200, 300, 200); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);//设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置场景背景颜色
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

    //执行渲染操作   指定场景、相机作为参数
    //renderer.render(scene, camera);
    var Orbitcontrols = new THREE.OrbitControls(camera, renderer.domElement);
    Orbitcontrols.addEventListener('change', rerender);
    // Orbitcontrols.enableRotate = true;
    // Orbitcontrols.target.set(-5000, 0, -6000)


    function rerender () {
      renderer.render(scene, camera);
    }

    rerender();

    window.onresize = function () {
      // 重置渲染器输出画布canvas尺寸
      renderer.setSize(window.innerWidth, window.innerHeight);
      // 全屏情况下：设置观察范围长宽比aspect为窗口宽高比
      camera.aspect = window.innerWidth / window.innerHeight;
      // 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix
      // 但是不会每渲染一帧，就通过相机的属性计算投影矩阵(节约计算资源)
      // 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
      camera.updateProjectionMatrix();
    };

    renderer.context.canvas.addEventListener("webglcontextrestored", function () {
      console.log('webglcontextrestored');
      location.reload(true);
    }, false);

    renderer.context.canvas.addEventListener("webglcontextlost", function (event) {
      event.preventDefault();
      cancelAnimationFrame(animation);
      console.log('webglcontextlost');
    }, false);


  </script>
</body>

</html>