|
@@ -0,0 +1,631 @@
|
|
|
+<div class="box66 box" data-name="test61">
|
|
|
+ <div class="toolBox">
|
|
|
+ <span class="fit"></span>
|
|
|
+ <span class="close"></span>
|
|
|
+ </div>
|
|
|
+ <div class="test-box">
|
|
|
+ <div class="concent">
|
|
|
+ <div id="ThreeJS"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="panel-footer"></div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<!-- 工具弹框 -->
|
|
|
+<div class="tools" style="display: none">
|
|
|
+ <div class="containerTool test61Toll">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <span>宽度:</span>
|
|
|
+ <input class="setWidth" type="text" />
|
|
|
+ <span id="validateAge" class="regValidate"></span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>高度:</span>
|
|
|
+ <input class="setHeight" type="text" />
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <!-- 确定 -->
|
|
|
+ <button class="fixBtn toolBtn">确定</button>
|
|
|
+ <button class="offBtn toolBtn">取消</button>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<script src="js/three.js"></script>
|
|
|
+<script src="js/GLTFLoader.js"></script>
|
|
|
+<script src="js/FBXLoader.js"></script>
|
|
|
+<script src="js/inflate.min.js"></script>
|
|
|
+<script src="js/OrbitControls.js"></script>
|
|
|
+<script src="js/Stats.js"></script>
|
|
|
+<script src="js/Detector.js"></script>
|
|
|
+<script src="js/ThreeBSP.js"></script>
|
|
|
+
|
|
|
+<script type="module">
|
|
|
+ const boxcontanier = document.getElementById("ThreeJS");
|
|
|
+
|
|
|
+ let scene, camera, renderer, controls, stats;
|
|
|
+ const SCREEN_WIDTH = window.innerWidth;
|
|
|
+ const SCREEN_HEIGHT = window.innerHeight;
|
|
|
+
|
|
|
+ //加载贴图模型
|
|
|
+ let textureLoader = new THREE.TextureLoader();
|
|
|
+ var mixer = null;
|
|
|
+ var clock = new THREE.Clock();
|
|
|
+
|
|
|
+ init();
|
|
|
+ animate();
|
|
|
+
|
|
|
+ function init() {
|
|
|
+ // 场景
|
|
|
+ scene = new THREE.Scene();
|
|
|
+
|
|
|
+ // 相机
|
|
|
+ var VIEW_ANGLE = 30,
|
|
|
+ ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT,
|
|
|
+ NEAR = 0.1,
|
|
|
+ FAR = 2000;
|
|
|
+
|
|
|
+ camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
|
|
|
+ scene.add(camera);
|
|
|
+ camera.position.set(0, 450, 250);
|
|
|
+ camera.lookAt(scene.position);
|
|
|
+
|
|
|
+ // 渲染器
|
|
|
+ if (Detector.webgl)
|
|
|
+ renderer = new THREE.WebGLRenderer({
|
|
|
+ antialias: true, //开启锯齿
|
|
|
+ alpha: true,
|
|
|
+ precision: "highp",
|
|
|
+ });
|
|
|
+ else renderer = new THREE.CanvasRenderer();
|
|
|
+
|
|
|
+ renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
|
|
|
+ renderer.setClearAlpha(0.0);
|
|
|
+ renderer.shadowMap.enabled = true;
|
|
|
+ //当界面改变时重新渲染canvas尺寸
|
|
|
+ window.οnresize = function () {
|
|
|
+ renderer.setPixelRatio(window.devicePixelRatio); //设备像素比,防止画布输出模糊
|
|
|
+ camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
+ camera.updateProjectionMatrix();
|
|
|
+ renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
|
|
|
+ };
|
|
|
+ //renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
|
|
|
+ boxcontanier.appendChild(renderer.domElement);
|
|
|
+
|
|
|
+ // 鼠标控件
|
|
|
+ controls = new THREE.OrbitControls(camera, renderer.domElement);
|
|
|
+ controls.addEventListener("change", render);
|
|
|
+ //controls.listenToKeyEvents( window );
|
|
|
+ // controls.enableDamping = true;
|
|
|
+ // controls.dampingFactor = 0.15;
|
|
|
+ // controls.screenSpacePanning = false;
|
|
|
+ controls.maxPolarAngle = Math.PI / 2;
|
|
|
+ //var clock = new THREE.Clock();
|
|
|
+
|
|
|
+ // 性能插件
|
|
|
+ stats = new Stats();
|
|
|
+ stats.domElement.style.position = "absolute";
|
|
|
+ stats.domElement.style.top = "0px";
|
|
|
+ stats.domElement.style.zIndex = 100;
|
|
|
+ boxcontanier.appendChild(stats.domElement);
|
|
|
+
|
|
|
+ // 光源
|
|
|
+ // var light = new THREE.PointLight(0x00ff00);
|
|
|
+ // light.position.set(0, 100, 0);
|
|
|
+ // scene.add(light);
|
|
|
+ // console.log(light);
|
|
|
+
|
|
|
+ var directionalLight = new THREE.DirectionalLight(0xffffff, 0.6); // 光的颜色,光照强度
|
|
|
+ directionalLight.position.set(400, 200, 300);
|
|
|
+ scene.add(directionalLight);
|
|
|
+
|
|
|
+ var directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.6);
|
|
|
+ directionalLight2.position.set(-400, -200, -300);
|
|
|
+ scene.add(directionalLight2);
|
|
|
+
|
|
|
+ var ambient = new THREE.AmbientLight(0xffffff, 0.6);
|
|
|
+ scene.add(ambient);
|
|
|
+
|
|
|
+ // 初始化模型
|
|
|
+ initModel();
|
|
|
+ }
|
|
|
+
|
|
|
+ function initModel() {
|
|
|
+ // 地板
|
|
|
+ createFloor(250, 150);
|
|
|
+
|
|
|
+ // 玻璃墙
|
|
|
+ createGlassWall(
|
|
|
+ 250,
|
|
|
+ 100,
|
|
|
+ 150,
|
|
|
+ 0,
|
|
|
+ 50,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ [
|
|
|
+ {
|
|
|
+ size: [244, 100, 144],
|
|
|
+ position: [0, 0, 0],
|
|
|
+ rotation: [0, 0, 0],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ size: [66, 70, 6],
|
|
|
+ position: [122, -15, 0],
|
|
|
+ rotation: [0, Math.PI / 2, 0],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ 0.4
|
|
|
+ );
|
|
|
+ // 门
|
|
|
+ createDoor(124, 35, 0);
|
|
|
+ // createGlassWall(250, 80, 0, 40, -75, 0, 0, 0); //后墙
|
|
|
+ // createGlassWall(150, 80, 125, 40, 0, 0, Math.PI/2, 0, [{
|
|
|
+ // size: [50, 60, 5],
|
|
|
+ // position: [0, -10, 0],
|
|
|
+ // rotation: [0, 0, 0]
|
|
|
+ // }]); //右墙
|
|
|
+ // createGlassWall(250, 80, 0, 40, 75, 0, 0, 0); //前墙
|
|
|
+ // createGlassWall(150, 80, -125, 40, 0, 0, Math.PI/2, 0); //右墙
|
|
|
+
|
|
|
+ // 空调
|
|
|
+ createStandAir(30, 60, 20, -100, 30, -60, 0, 0, 0);
|
|
|
+ createStandAir(30, 60, 20, -50, 30, -60, 0, 0, 0);
|
|
|
+
|
|
|
+ // 配电柜
|
|
|
+ createSmallAir(20, 40, 20, -20, 20, -60, 0, 0, 0);
|
|
|
+
|
|
|
+ // 强电箱
|
|
|
+ // createStrlight(25, 30, 10, 90, 55, -67, 0, 0, 0);
|
|
|
+ // createStrlight(25, 30, 10, 60, 55, -67, 0, 0, 0);
|
|
|
+
|
|
|
+ // 档案柜
|
|
|
+ createFileCabniet(35, 50, 20, -90, 25, 55, 0, Math.PI / 2, 0);
|
|
|
+ createFileCabniet(35, 50, 20, -65, 25, 55, 0, Math.PI / 2, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 创建地板
|
|
|
+ function createFloor(width, height) {
|
|
|
+ var floorGeometry = new THREE.PlaneGeometry(width, height);
|
|
|
+ var maps = textureLoader.load("./images/floor.png");
|
|
|
+ maps.wrapS = maps.wrapT = THREE.RepeatWrapping;
|
|
|
+ maps.repeat.set(8, 6);
|
|
|
+ maps.needsUpdate = true;
|
|
|
+
|
|
|
+ var material = new THREE.MeshBasicMaterial({
|
|
|
+ map: maps,
|
|
|
+ side: THREE.DoubleSide,
|
|
|
+ });
|
|
|
+ var floor = new THREE.Mesh(floorGeometry, material);
|
|
|
+ floor.rotation.x = Math.PI / 2;
|
|
|
+ scene.add(floor);
|
|
|
+ return floor;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 创建玻璃墙
|
|
|
+ function createGlassWall(w, h, d, px, py, pz, rx, ry, rz, holes, opa) {
|
|
|
+ var geometry = new THREE.BoxGeometry(w, h, d);
|
|
|
+ var texture = new textureLoader.load("./images/jsk.png");
|
|
|
+ texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
|
|
|
+ texture.repeat.set(1, 1);
|
|
|
+ var meterials = new THREE.MeshStandardMaterial({
|
|
|
+ // color: 0xD6F2F2,
|
|
|
+ color: 0xeff8fc,
|
|
|
+ // map: texture,
|
|
|
+ opacity: opa,
|
|
|
+ transparent: true,
|
|
|
+ side: THREE.DoubleSide,
|
|
|
+ });
|
|
|
+ var glassW = new THREE.Mesh(geometry, meterials);
|
|
|
+ if (holes) {
|
|
|
+ for (var i = 0; i < holes.length; i++) {
|
|
|
+ var totalBSP = new ThreeBSP(glassW);
|
|
|
+ var hole = holes[i];
|
|
|
+ var holeGeometry = new THREE.BoxGeometry(
|
|
|
+ hole.size[0],
|
|
|
+ hole.size[1],
|
|
|
+ hole.size[2]
|
|
|
+ );
|
|
|
+ var holeCube = new THREE.Mesh(holeGeometry);
|
|
|
+ holeCube.position.x = hole.position[0];
|
|
|
+ holeCube.position.y = hole.position[1];
|
|
|
+ holeCube.position.z = hole.position[2];
|
|
|
+
|
|
|
+ holeCube.rotation.y = hole.rotation[1];
|
|
|
+
|
|
|
+ var clipBSP = new ThreeBSP(holeCube);
|
|
|
+
|
|
|
+ var resultBSP = totalBSP.subtract(clipBSP);
|
|
|
+
|
|
|
+ glassW = resultBSP.toMesh();
|
|
|
+ }
|
|
|
+
|
|
|
+ glassW.material = meterials;
|
|
|
+ }
|
|
|
+
|
|
|
+ glassW.position.x = px;
|
|
|
+ glassW.position.y = py;
|
|
|
+ glassW.position.z = pz;
|
|
|
+
|
|
|
+ glassW.rotation.y = ry;
|
|
|
+
|
|
|
+ scene.add(glassW);
|
|
|
+
|
|
|
+ return glassW;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 创建空调
|
|
|
+ function createStandAir(w, h, d, px, py, pz, rx, ry, rz) {
|
|
|
+ var texture = new THREE.ImageUtils.loadTexture("./fourImages/kongtiao.png");
|
|
|
+ //var texture = new THREE.ImageUtils.loadTexture('img/airCondition.png');
|
|
|
+ texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
|
|
|
+ texture.repeat.set(1, 1);
|
|
|
+
|
|
|
+ var geometry = new THREE.BoxGeometry(w, h, d);
|
|
|
+
|
|
|
+ var materialArray = [];
|
|
|
+ materialArray.push(
|
|
|
+ new THREE.MeshBasicMaterial({
|
|
|
+ color: 0x979697,
|
|
|
+ })
|
|
|
+ );
|
|
|
+ materialArray.push(
|
|
|
+ new THREE.MeshBasicMaterial({
|
|
|
+ color: 0x979697,
|
|
|
+ })
|
|
|
+ );
|
|
|
+ materialArray.push(
|
|
|
+ new THREE.MeshBasicMaterial({
|
|
|
+ color: 0x979697,
|
|
|
+ })
|
|
|
+ );
|
|
|
+ materialArray.push(
|
|
|
+ new THREE.MeshBasicMaterial({
|
|
|
+ color: 0x979697,
|
|
|
+ })
|
|
|
+ );
|
|
|
+ materialArray.push(
|
|
|
+ new THREE.MeshBasicMaterial({
|
|
|
+ map: texture,
|
|
|
+ })
|
|
|
+ );
|
|
|
+ materialArray.push(
|
|
|
+ new THREE.MeshBasicMaterial({
|
|
|
+ color: 0x979697,
|
|
|
+ })
|
|
|
+ );
|
|
|
+ var material = new THREE.MeshFaceMaterial(materialArray);
|
|
|
+
|
|
|
+ var air = new THREE.Mesh(geometry, material);
|
|
|
+
|
|
|
+ air.position.x = px;
|
|
|
+ air.position.y = py;
|
|
|
+ air.position.z = pz;
|
|
|
+
|
|
|
+ air.rotation.x = rx;
|
|
|
+ air.rotation.y = ry;
|
|
|
+ air.rotation.z = rz;
|
|
|
+
|
|
|
+ scene.add(air);
|
|
|
+
|
|
|
+ return air;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 创建小空调
|
|
|
+ function createSmallAir(w, h, d, px, py, pz, rx, ry, rz) {
|
|
|
+ var texture = new THREE.ImageUtils.loadTexture("./images/kongg.png");
|
|
|
+ //var texture = new THREE.ImageUtils.loadTexture('img/airCondition.png');
|
|
|
+ texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
|
|
|
+ texture.repeat.set(1, 1);
|
|
|
+
|
|
|
+ var geometry = new THREE.BoxGeometry(w, h, d);
|
|
|
+
|
|
|
+ var materialArray = [];
|
|
|
+ materialArray.push(
|
|
|
+ new THREE.MeshBasicMaterial({
|
|
|
+ color: 0x979697,
|
|
|
+ })
|
|
|
+ );
|
|
|
+ materialArray.push(
|
|
|
+ new THREE.MeshBasicMaterial({
|
|
|
+ color: 0x979697,
|
|
|
+ })
|
|
|
+ );
|
|
|
+ materialArray.push(
|
|
|
+ new THREE.MeshBasicMaterial({
|
|
|
+ color: 0x979697,
|
|
|
+ })
|
|
|
+ );
|
|
|
+ materialArray.push(
|
|
|
+ new THREE.MeshBasicMaterial({
|
|
|
+ color: 0x979697,
|
|
|
+ })
|
|
|
+ );
|
|
|
+ materialArray.push(
|
|
|
+ new THREE.MeshBasicMaterial({
|
|
|
+ map: texture,
|
|
|
+ })
|
|
|
+ );
|
|
|
+ materialArray.push(
|
|
|
+ new THREE.MeshBasicMaterial({
|
|
|
+ color: 0x979697,
|
|
|
+ })
|
|
|
+ );
|
|
|
+ var material = new THREE.MeshFaceMaterial(materialArray);
|
|
|
+
|
|
|
+ var smallair = new THREE.Mesh(geometry, material);
|
|
|
+
|
|
|
+ smallair.position.x = px;
|
|
|
+ smallair.position.y = py;
|
|
|
+ smallair.position.z = pz;
|
|
|
+
|
|
|
+ smallair.rotation.x = rx;
|
|
|
+ smallair.rotation.y = ry;
|
|
|
+ smallair.rotation.z = rz;
|
|
|
+
|
|
|
+ scene.add(smallair);
|
|
|
+
|
|
|
+ return smallair;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 创建门
|
|
|
+ function createDoor(px, py, pz) {
|
|
|
+ const fbxloader = new THREE.FBXLoader();
|
|
|
+ fbxloader.load("./model/door.fbx", function (obj) {
|
|
|
+ const item = obj.children[0];
|
|
|
+ item.scale.set(0.03, 0.05, 0.03);
|
|
|
+ item.position.set(px, py, pz);
|
|
|
+ item.rotation.y = Math.PI / 2;
|
|
|
+ obj.castShadow = true;
|
|
|
+ scene.add(obj);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // function createDoor(w, h, px, py, pz, rx, ry, rz) {
|
|
|
+ // var geometry = new THREE.BoxGeometry(w, h, 5);
|
|
|
+ // var texture = new THREE.ImageUtils.loadTexture('images/rightdoor.png');
|
|
|
+ // texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
|
|
|
+ // texture.repeat.set(1, 1);
|
|
|
+ //
|
|
|
+ // var texture2 = new THREE.ImageUtils.loadTexture('images/rightdoor_reverse.png');
|
|
|
+ // texture2.wrapS = texture2.wrapT = THREE.RepeatWrapping;
|
|
|
+ // texture2.repeat.set(1, 1);
|
|
|
+ //
|
|
|
+ // var materialArray = [];
|
|
|
+ // // order to add materials: x+,x-,y+,y-,z+,z-
|
|
|
+ // materialArray.push(new THREE.MeshBasicMaterial({
|
|
|
+ // color: 0x6C4843
|
|
|
+ // }));
|
|
|
+ // materialArray.push(new THREE.MeshBasicMaterial({
|
|
|
+ // color: 0x6C4843
|
|
|
+ // }));
|
|
|
+ // materialArray.push(new THREE.MeshBasicMaterial({
|
|
|
+ // color: 0x6C4843
|
|
|
+ // }));
|
|
|
+ // materialArray.push(new THREE.MeshBasicMaterial({
|
|
|
+ // color: 0x6C4843
|
|
|
+ // }));
|
|
|
+ // materialArray.push(new THREE.MeshBasicMaterial({
|
|
|
+ // map: texture
|
|
|
+ // }));
|
|
|
+ // materialArray.push(new THREE.MeshBasicMaterial({
|
|
|
+ // map: texture2
|
|
|
+ // }));
|
|
|
+ // var material = new THREE.MeshFaceMaterial(materialArray);
|
|
|
+ //
|
|
|
+ // var door = new THREE.Mesh(geometry, material);
|
|
|
+ //
|
|
|
+ // door.position.x = px;
|
|
|
+ // door.position.y = py;
|
|
|
+ // door.position.z = pz;
|
|
|
+ //
|
|
|
+ // door.rotation.y = ry;
|
|
|
+ //
|
|
|
+ // scene.add(door);
|
|
|
+ //
|
|
|
+ // return door;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // 创建强电箱
|
|
|
+ function createStrlight(w, h, d, px, py, pz, rx, ry, rz) {
|
|
|
+ // var texture = new THREE.ImageUtils.loadTexture('./fourImages/airfiretop.png');
|
|
|
+ // texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
|
|
|
+ // texture.repeat.set(1, 1);
|
|
|
+
|
|
|
+ var texture2 = new THREE.ImageUtils.loadTexture("./images/pdg.png");
|
|
|
+ texture2.wrapS = texture2.wrapT = THREE.RepeatWrapping;
|
|
|
+ texture2.repeat.set(1, 1);
|
|
|
+
|
|
|
+ var geometry = new THREE.BoxGeometry(w, h, d);
|
|
|
+ //var material = new THREE.MeshBasicMaterial( { map: texture } );
|
|
|
+ // Create an array of materials to be used in a cube, one for each side
|
|
|
+ var materialArray = [];
|
|
|
+ // order to add materials: x+,x-,y+,y-,z+,z-
|
|
|
+ materialArray.push(
|
|
|
+ new THREE.MeshBasicMaterial({
|
|
|
+ color: 0x969d7a, //后面
|
|
|
+ })
|
|
|
+ );
|
|
|
+ materialArray.push(
|
|
|
+ new THREE.MeshBasicMaterial({
|
|
|
+ color: 0x969d7a, //前面
|
|
|
+ })
|
|
|
+ );
|
|
|
+ materialArray.push(
|
|
|
+ new THREE.MeshBasicMaterial({
|
|
|
+ color: 0x969d7a, //上
|
|
|
+ })
|
|
|
+ );
|
|
|
+ materialArray.push(
|
|
|
+ new THREE.MeshBasicMaterial({
|
|
|
+ color: 0x969d7a, //下
|
|
|
+ })
|
|
|
+ );
|
|
|
+ materialArray.push(
|
|
|
+ new THREE.MeshBasicMaterial({
|
|
|
+ map: texture2, // 左
|
|
|
+ })
|
|
|
+ );
|
|
|
+ materialArray.push(
|
|
|
+ new THREE.MeshBasicMaterial({
|
|
|
+ color: 0x969d7a, //右
|
|
|
+ })
|
|
|
+ );
|
|
|
+ var material = new THREE.MeshFaceMaterial(materialArray);
|
|
|
+
|
|
|
+ var strlight = new THREE.Mesh(geometry, material);
|
|
|
+
|
|
|
+ strlight.position.x = px;
|
|
|
+ strlight.position.y = py;
|
|
|
+ strlight.position.z = pz;
|
|
|
+
|
|
|
+ strlight.rotation.x = rx;
|
|
|
+ strlight.rotation.y = ry;
|
|
|
+ strlight.rotation.z = rz;
|
|
|
+
|
|
|
+ scene.add(strlight);
|
|
|
+
|
|
|
+ return strlight;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 创建档案柜
|
|
|
+ function createFileCabniet(w, h, d, px, py, pz, rx, ry, rz) {
|
|
|
+ // var texture = new THREE.ImageUtils.loadTexture('./fourImages/airfiretop.png');
|
|
|
+ // texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
|
|
|
+ // texture.repeat.set(1, 1);
|
|
|
+
|
|
|
+ var texture2 = new THREE.ImageUtils.loadTexture("./images/filecabniet.png");
|
|
|
+ texture2.wrapS = texture2.wrapT = THREE.RepeatWrapping;
|
|
|
+ texture2.repeat.set(1, 1);
|
|
|
+
|
|
|
+ var geometry = new THREE.BoxGeometry(w, h, d);
|
|
|
+ //var material = new THREE.MeshBasicMaterial( { map: texture } );
|
|
|
+ // Create an array of materials to be used in a cube, one for each side
|
|
|
+ var materialArray = [];
|
|
|
+ // order to add materials: x+,x-,y+,y-,z+,z-
|
|
|
+ materialArray.push(
|
|
|
+ new THREE.MeshBasicMaterial({
|
|
|
+ color: 0x979697, //后面
|
|
|
+ })
|
|
|
+ );
|
|
|
+ materialArray.push(
|
|
|
+ new THREE.MeshBasicMaterial({
|
|
|
+ color: 0x979697, //前面
|
|
|
+ })
|
|
|
+ );
|
|
|
+ materialArray.push(
|
|
|
+ new THREE.MeshBasicMaterial({
|
|
|
+ color: 0x979697, //上
|
|
|
+ })
|
|
|
+ );
|
|
|
+ materialArray.push(
|
|
|
+ new THREE.MeshBasicMaterial({
|
|
|
+ color: 0x979697, //下
|
|
|
+ })
|
|
|
+ );
|
|
|
+ materialArray.push(
|
|
|
+ new THREE.MeshBasicMaterial({
|
|
|
+ map: texture2, // 左
|
|
|
+ })
|
|
|
+ );
|
|
|
+ materialArray.push(
|
|
|
+ new THREE.MeshBasicMaterial({
|
|
|
+ color: 0x979697, //右
|
|
|
+ })
|
|
|
+ );
|
|
|
+ var material = new THREE.MeshFaceMaterial(materialArray);
|
|
|
+
|
|
|
+ var filecabniet = new THREE.Mesh(geometry, material);
|
|
|
+
|
|
|
+ filecabniet.position.x = px;
|
|
|
+ filecabniet.position.y = py;
|
|
|
+ filecabniet.position.z = pz;
|
|
|
+
|
|
|
+ filecabniet.rotation.x = rx;
|
|
|
+ filecabniet.rotation.y = ry;
|
|
|
+ filecabniet.rotation.z = rz;
|
|
|
+ scene.add(filecabniet);
|
|
|
+
|
|
|
+ return filecabniet;
|
|
|
+ }
|
|
|
+
|
|
|
+ // function drawSprite(text2d, scale, color, x, y, z) {
|
|
|
+ // var texture = canvasMultilineText(text2d, {
|
|
|
+ // backgroundColor: color
|
|
|
+ // }, 'rgba(155, 187, 89, 1)');
|
|
|
+ // var spriteMaterial = new THREE.SpriteMaterial({
|
|
|
+ // map: texture,
|
|
|
+ // opacity: 0.9
|
|
|
+ // });
|
|
|
+ // var sprite = new THREE.Sprite(spriteMaterial);
|
|
|
+ // sprite.position.set(x, y, z);
|
|
|
+
|
|
|
+ // sprite.scale.set(scale * texture.image.width, scale * texture.image.height);
|
|
|
+
|
|
|
+ // return sprite;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // function canvasMultilineText(textArray, parameters, rgba) {
|
|
|
+ // parameters = parameters || {};
|
|
|
+ // var width = 0;
|
|
|
+ // var canvas = document.createElement('canvas');
|
|
|
+ // var context = canvas.getContext('2d');
|
|
|
+ // var len = textArray.length;
|
|
|
+
|
|
|
+ // if (typeof textArray === 'string') textArray = [textArray];
|
|
|
+
|
|
|
+ // context.font = parameters.font ? parameters.font : '48px sans-serif';
|
|
|
+
|
|
|
+ // for (var i = 0; i < len; i++) {
|
|
|
+
|
|
|
+ // width = context.measureText(textArray[i]).width > width ? context.measureText(textArray[i]).width : width;
|
|
|
+
|
|
|
+ // }
|
|
|
+
|
|
|
+ // canvas.width = width + 20; // 480
|
|
|
+ // canvas.height = textArray.length * 60;
|
|
|
+
|
|
|
+ // context.fillStyle = rgba;
|
|
|
+ // context.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
+
|
|
|
+ // context.font = parameters.font ? parameters.font : '48px sans-serif';
|
|
|
+
|
|
|
+ // for (var j = 0; j < len; j++) {
|
|
|
+ // context.fillStyle = '#1920E6';
|
|
|
+ // context.fillText(textArray[j], 10, 48 + j * 60);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // var texture = new THREE.Texture(canvas);
|
|
|
+ // texture.minFilter = texture.magFilter = THREE.NearestFilter;
|
|
|
+ // texture.needsUpdate = true;
|
|
|
+
|
|
|
+ // return texture;
|
|
|
+
|
|
|
+ // }
|
|
|
+
|
|
|
+ function animate() {
|
|
|
+ requestAnimationFrame(animate);
|
|
|
+ render();
|
|
|
+ update();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新插件
|
|
|
+ function update() {
|
|
|
+ controls.update();
|
|
|
+ stats.update();
|
|
|
+ }
|
|
|
+
|
|
|
+ function render() {
|
|
|
+ // let sprite;
|
|
|
+ // if (sprite != undefined) {
|
|
|
+ // scene.remove(sprite)
|
|
|
+ // }
|
|
|
+ // var myDate = new Date();
|
|
|
+ // sprite = drawSprite('Hello, world!' + myDate.getSeconds(), 0.5, 120, 6, 100, 0);
|
|
|
+ // sprite.material.needsUpdate = true;
|
|
|
+ // scene.add(sprite);
|
|
|
+ //console.log(sprite);
|
|
|
+ renderer.render(scene, camera);
|
|
|
+ }
|
|
|
+</script>
|