three#Shape JavaScript Examples

/**
     * @param markerId {string}
     */
    constructor(markerId) {
        super(markerId);
        Object.defineProperty(this, 'isShapeMarker', {value: true});
        this.data.type = "shape";

        let zero = new Vector2();
        let shape = new Shape([zero, zero, zero]);
        this.fill = new ShapeMarkerFill(shape);
        this.border = new ShapeMarkerBorder(shape);
        this.border.renderOrder = -1; // render border before fill

        this.add(this.border, this.fill);

        this._markerData = {};
    }

buildRoofUniformHeight()
	{
		// setup texture
		var roofMaterial = new MeshBasicMaterial({side: FrontSide,color: 0xe5e5e5});
		var points = [];
		this.room.interiorCorners.forEach((corner) => {
			points.push(new Vector2(corner.x,corner.y));
		});
		var shape = new Shape(points);
		var geometry = new ShapeGeometry(shape);
		var roof = new Mesh(geometry, roofMaterial);
		roof.rotation.set(Math.PI / 2, 0, 0);
		roof.position.y = Configuration.getNumericValue(configWallHeight);
		return roof;
	}

buildFloor()
	{
		var textureSettings = this.room.getTexture();
		// setup texture
//		var floorTexture = ImageUtils.loadTexture(textureSettings.url);
		var floorTexture = new TextureLoader().load(textureSettings.url);
		floorTexture.wrapS = RepeatWrapping;
		floorTexture.wrapT = RepeatWrapping;
		floorTexture.repeat.set(1, 1);
		var floorMaterialTop = new MeshPhongMaterial({
			map: floorTexture,
			side: DoubleSide,
			// ambient: 0xffffff, TODO_Ekki
			color: 0xcccccc,
			specular: 0x0a0a0a
		});

		var textureScale = textureSettings.scale;
		// http://stackoverflow.com/questions/19182298/how-to-texture-a-three-js-mesh-created-with-shapegeometry
		// scale down coords to fit 0 -> 1, then rescale

		var points = [];
		this.room.interiorCorners.forEach((corner) => {
			points.push(new Vector2(corner.x / textureScale,corner.y / textureScale));
		});
		var shape = new Shape(points);
		var geometry = new ShapeGeometry(shape);
		var floor = new Mesh(geometry, floorMaterialTop);

		floor.rotation.set(Math.PI / 2, 0, 0);
		floor.scale.set(textureScale, textureScale, textureScale);
		floor.receiveShadow = true;
		floor.castShadow = false;
		return floor;
	}

buildFillerUniformHeight(edge, height, side, color)
	{
		var points = [this.toVec2(edge.exteriorStart()), this.toVec2(edge.exteriorEnd()), this.toVec2(edge.interiorEnd()),this.toVec2(edge.interiorStart())];

		var fillerMaterial = new MeshBasicMaterial({color: color,side: side});
		var shape = new Shape(points);
		var geometry = new ShapeGeometry(shape);
		var filler = new Mesh(geometry, fillerMaterial);
		filler.rotation.set(Math.PI / 2, 0, 0);
		filler.position.y = height;
		return filler;
	}

generatePlane()
	{
		var points = [];
		this.interiorCorners.forEach((corner) => {
			points.push(new Vector2(corner.x,corner.y));
		});
		var shape = new Shape(points);
		var geometry = new ShapeGeometry(shape);
		this.floorPlane = new Mesh(geometry, new MeshBasicMaterial({side: DoubleSide, visible:false}));
		//The below line was originally setting the plane visibility to false
		//Now its setting visibility to true. This is necessary to be detected
		//with the raycaster objects to click walls and floors.
		this.floorPlane.visible = true;
		this.floorPlane.rotation.set(Math.PI / 2, 0, 0);
		this.floorPlane.room = this; // js monkey patch

		var b3 = new Box3();
		b3.setFromObject(this.floorPlane);
		this.min = b3.min.clone();
		this.max = b3.max.clone();
		this.center = this.max.clone().sub(this.min).multiplyScalar(0.5).add(this.min);
	}

/**
     * @param shape {Shape}
     */
    constructor(shape) {
        let geometry = new LineGeometry();
        geometry.setPositions(ShapeMarkerBorder.createLinePoints(shape));

        let material = new LineMaterial({
            color: new Color(),
            opacity: 0,
            transparent: true,
            linewidth: 1,
            depthTest: true,
            vertexColors: false,
            dashed: false,
        });
        material.uniforms.fadeDistanceMin = { value: 0 };
        material.uniforms.fadeDistanceMax = { value: Number.MAX_VALUE };

        material.resolution.set(window.innerWidth, window.innerHeight);

        super(geometry, material);

        this.computeLineDistances();
    }

/**
     * @param shape {Shape}
     * @returns {number[]}
     */
    static createLinePoints(shape) {
        let points3d = [];
        let points = shape.getPoints(5);
        points.forEach(point => points3d.push(point.x, 0, point.y));
        points3d.push(points[0].x, 0, points[0].y);

        return points3d;
    }

/**
     * @param shape {Shape}
     */
    constructor(shape) {
        let geometry = ShapeMarkerFill.createGeometry(shape);
        let material = new ShaderMaterial({
            vertexShader: MARKER_FILL_VERTEX_SHADER,
            fragmentShader: MARKER_FILL_FRAGMENT_SHADER,
            side: DoubleSide,
            depthTest: true,
            transparent: true,
            uniforms: {
                markerColor: { value: new Color() },
                markerOpacity: { value: 0 },
                fadeDistanceMin: { value: 0 },
                fadeDistanceMax: { value: Number.MAX_VALUE },
            }
        });

        super(geometry, material);
    }

/**
     * @param shape {Shape}
     * @returns {ShapeBufferGeometry}
     */
    static createGeometry(shape) {
        let geometry = new ShapeBufferGeometry(shape, 5);
        geometry.rotateX(Math.PI / 2); //make y to z

        return geometry;
    }

/**
     * @private
     * Creates a shape from a data object, usually parsed json from a markers.json
     * @param shapeData {object}
     * @returns {Shape}
     */
    createShapeFromData(shapeData) {
        /** @type {THREE.Vector2[]} **/
        let points = [];

        if (Array.isArray(shapeData)){
            shapeData.forEach(point => {
                let x = (point.x || 0) - this.position.x;
                let z = (point.z || 0) - this.position.z;

                points.push(new Vector2(x, z));
            });
        }

        return new Shape(points);
    }

/**
     * @param shape {Shape}
     */
    constructor(shape) {
        let geometry = new LineSegmentsGeometry();
        geometry.setPositions(ExtrudeMarkerBorder.createLinePoints(shape));

        let material = new LineMaterial({
            color: new Color(),
            opacity: 0,
            transparent: true,
            linewidth: 1,
            depthTest: true,
            vertexColors: false,
            dashed: false,
        });
        material.uniforms.fadeDistanceMin = { value: 0 };
        material.uniforms.fadeDistanceMax = { value: Number.MAX_VALUE };

        material.resolution.set(window.innerWidth, window.innerHeight);

        super(geometry, material);

        this.computeLineDistances();
    }

/**
     * @param shape {Shape}
     * @returns {number[]}
     */
    static createLinePoints(shape) {
        let points3d = [];
        let points = shape.getPoints(5);
        points.push(points[0]);

        let prevPoint = null;
        points.forEach(point => {

            // vertical line
            points3d.push(point.x, 0, point.y);
            points3d.push(point.x, -1, point.y);

            if (prevPoint) {
                // line to previous point top
                points3d.push(prevPoint.x, 0, prevPoint.y);
                points3d.push(point.x, 0, point.y);

                // line to previous point bottom
                points3d.push(prevPoint.x, -1, prevPoint.y);
                points3d.push(point.x, -1, point.y);
            }

            prevPoint = point;
        });

        return points3d;
    }

/**
     * @param shape {Shape}
     */
    constructor(shape) {
        let geometry = ExtrudeMarkerFill.createGeometry(shape);
        let material = new ShaderMaterial({
            vertexShader: MARKER_FILL_VERTEX_SHADER,
            fragmentShader: MARKER_FILL_FRAGMENT_SHADER,
            side: DoubleSide,
            depthTest: true,
            transparent: true,
            uniforms: {
                markerColor: { value: new Color() },
                markerOpacity: { value: 0 },
                fadeDistanceMin: { value: 0 },
                fadeDistanceMax: { value: Number.MAX_VALUE },
            }
        });

        super(geometry, material);
    }

/**
     * @param shape {Shape}
     * @returns {ExtrudeBufferGeometry}
     */
    static createGeometry(shape) {
        let geometry = new ExtrudeBufferGeometry(shape, {
            depth: 1,
            steps: 5,
            bevelEnabled: false
        });
        geometry.rotateX(Math.PI / 2); //make y to z

        return geometry;
    }

/**
     * @param markerId {string}
     */
    constructor(markerId) {
        super(markerId);
        Object.defineProperty(this, 'isExtrudeMarker', {value: true});
        this.data.type = "extrude";

        let zero = new Vector2();
        let shape = new Shape([zero, zero, zero]);
        this.fill = new ExtrudeMarkerFill(shape);
        this.border = new ExtrudeMarkerBorder(shape);
        this.border.renderOrder = -1; // render border before fill

        this.add(this.border, this.fill);

        this._markerData = {};
    }

/**
     * @private
     * Creates a shape from a data object, usually parsed json from a markers.json
     * @param shapeData {object}
     * @returns {Shape}
     */
    createShapeFromData(shapeData) {
        /** @type {THREE.Vector2[]} **/
        let points = [];

        if (Array.isArray(shapeData)){
            shapeData.forEach(point => {
                let x = (point.x || 0) - this.position.x + 0.01; // offset by 0.01 to avoid z-fighting
                let z = (point.z || 0) - this.position.z + 0.01;

                points.push(new Vector2(x, z));
            });
        }

        return new Shape(points);
    }

/**
     * @param shape {Shape}
     */
    setShape(shape) {
        this.fill.updateGeometry(shape);
        this.border.updateGeometry(shape);
    }

/**
     * @param shape {Shape}
     */
    setShape(shape) {
        this.fill.updateGeometry(shape);
        this.border.updateGeometry(shape);
    }

/**
     * @param shape {Shape}
     */
    updateGeometry(shape) {
        this.geometry.dispose();
        this.geometry = ShapeMarkerFill.createGeometry(shape);
    }

/**
     * @param shape {Shape}
     */
    updateGeometry(shape) {
        this.geometry = new LineGeometry();
        this.geometry.setPositions(ShapeMarkerBorder.createLinePoints(shape));
        this.computeLineDistances();
    }

/**
     * @param shape {Shape}
     */
    updateGeometry(shape) {
        this.geometry = new LineSegmentsGeometry();
        this.geometry.setPositions(ExtrudeMarkerBorder.createLinePoints(shape));
        this.computeLineDistances();
    }

// start, end have x and y attributes (i.e. corners)
	makeWall(start, end, transform, invTransform, material)
	{
		var v1 = this.toVec3(start);
		var v2 = this.toVec3(end);
		var v3 = v2.clone();
		var v4 = v1.clone();
		
		v3.y = this.edge.getEnd().elevation;
		v4.y = this.edge.getStart().elevation;
		
//		v3.y = this.wall.getClosestCorner(end).elevation;
//		v4.y = this.wall.getClosestCorner(start).elevation;
		
		var points = [v1.clone(), v2.clone(), v3.clone(), v4.clone()];

		points.forEach((p) => {p.applyMatrix4(transform);});

		var spoints = [new Vector2(points[0].x, points[0].y),new Vector2(points[1].x, points[1].y),new Vector2(points[2].x, points[2].y),new Vector2(points[3].x, points[3].y)];
		var shape = new Shape(spoints);

		// add holes for each wall item
		this.wall.items.forEach((item) => {
			var pos = item.position.clone();
			pos.applyMatrix4(transform);
			var halfSize = item.halfSize;
			var min = halfSize.clone().multiplyScalar(-1);
			var max = halfSize.clone();
			min.add(pos);
			max.add(pos);

			var holePoints = [new Vector2(min.x, min.y),new Vector2(max.x, min.y),new Vector2(max.x, max.y),new Vector2(min.x, max.y)];
			shape.holes.push(new Path(holePoints));
		});

		var geometry = new ShapeGeometry(shape);
		geometry.vertices.forEach((v) => {
			v.applyMatrix4(invTransform);
		});

		// make UVs
		var totalDistance = Utils.distance(new Vector2(v1.x, v1.z), new Vector2(v2.x, v2.z));
		var height = this.wall.height;
		geometry.faceVertexUvs[0] = [];

		geometry.faces.forEach((face) => {
			var vertA = geometry.vertices[face.a];
			var vertB = geometry.vertices[face.b];
			var vertC = geometry.vertices[face.c];
			geometry.faceVertexUvs[0].push([vertexToUv(vertA),vertexToUv(vertB),vertexToUv(vertC)]);
		});

		geometry.faceVertexUvs[1] = geometry.faceVertexUvs[0];
		geometry.computeFaceNormals();
		geometry.computeVertexNormals();

		function vertexToUv(vertex)
		{
			var x = Utils.distance(new Vector2(v1.x, v1.z), new Vector2(vertex.x, vertex.z)) / totalDistance;
			var y = vertex.y / height;
			return new Vector2(x, y);
		}

		var mesh = new Mesh(geometry, material);
		mesh.name = 'wall';
		return mesh;
	}

/**
     * @param shape {Shape}
     */
    updateGeometry(shape) {
        this.geometry.dispose();
        this.geometry = ExtrudeMarkerFill.createGeometry(shape);
    }