// //////////// // // CUSTOM // // //////////// // import * as THREE from "three"; // import { gScene, gCameraMap, gCurCamera } from "./index"; // import { data } from "./data"; // declare function require(string): string; // export default function addStar() // { // var starPoints = []; // starPoints.push(new THREE.Vector2(0, 50)); // starPoints.push(new THREE.Vector2(10, 10)); // starPoints.push(new THREE.Vector2(40, 10)); // starPoints.push(new THREE.Vector2(20, -10)); // starPoints.push(new THREE.Vector2(30, -50)); // starPoints.push(new THREE.Vector2(0, -20)); // starPoints.push(new THREE.Vector2(-30, -50)); // starPoints.push(new THREE.Vector2(-20, -10)); // starPoints.push(new THREE.Vector2(-40, 10)); // starPoints.push(new THREE.Vector2(-10, 10)); // var starShape = new THREE.Shape(starPoints); // var extrusionSettings = { // size: 30, height: 4, curveSegments: 3, // bevelThickness: 1, bevelSize: 2, bevelEnabled: false, // material: 0, extrudeMaterial: 1 // }; // var starGeometry = new THREE.ExtrudeGeometry(starShape, extrusionSettings); // var materialFront = new THREE.MeshBasicMaterial({ color: 0xffff00 }); // var materialSide = new THREE.MeshBasicMaterial({ color: 0xff8800 }); // var materialArray = [materialFront, materialSide]; // var starMaterial = new THREE.MeshFaceMaterial(materialArray); // var star = new THREE.Mesh(starGeometry, starMaterial); // star.position.set(0, 0, 0); // star.scale.set(0.01, 0.01, 0.01) // gScene.add(star); // // add a wireframe to model // var wireframeTexture = new THREE.MeshBasicMaterial({ color: 0x000000, wireframe: true, transparent: true }); // var star = new THREE.Mesh(starGeometry, wireframeTexture); // star.position.set(0, 50, 0); // gScene.add(star); // } // export function addShape(shape, extrudeSettings, color, x, y, z, rx, ry, rz, s) // { // // flat shape with texture // // note: default UVs generated by ShapeBufferGemoetry are simply the x- and y-coordinates of the vertices // var geometry = new THREE.ShapeGeometry(shape); // var mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial());// map: texture THREE.MeshPhongMaterial({ side: THREE.DoubleSide }) // mesh.position.set(x, y, z - 175); // mesh.rotation.set(rx, ry, rz); // mesh.scale.set(s, s, s); // gScene.add(mesh); // // flat shape // var geometry = new THREE.ShapeGeometry(shape); // var mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial()); // mesh.position.set(x, y, z - 125); // mesh.rotation.set(rx, ry, rz); // mesh.scale.set(s, s, s); // gScene.add(mesh); // // extruded shape // var geometry2 = new THREE.ExtrudeGeometry(shape, extrudeSettings); // var mesh = new THREE.Mesh(geometry2, new THREE.MeshNormalMaterial()); // mesh.position.set(x, y, z - 75); // mesh.rotation.set(rx, ry, rz); // mesh.scale.set(s, s, s); // gScene.add(mesh); // // addLineShape(shape, color, x, y, z, rx, ry, rz, s); // } // function addLineShape(shape, color, x, y, z, rx, ry, rz, s) // { // // lines // shape.autoClose = true; // var points = shape.createPointsGeometry(); // var spacedPoints = shape.createSpacedPointsGeometry(50); // // solid line // var line = new THREE.Line(points, new THREE.LineBasicMaterial({ color: color, linewidth: 3 })); // line.position.set(x, y, z - 25); // line.rotation.set(rx, ry, rz); // line.scale.set(s, s, s); // gScene.add(line); // // line from equidistance sampled points // var line = new THREE.Line(spacedPoints, new THREE.LineBasicMaterial({ color: color, linewidth: 3 })); // line.position.set(x, y, z + 25); // line.rotation.set(rx, ry, rz); // line.scale.set(s, s, s); // gScene.add(line); // // vertices from real points // var particles = new THREE.Points(points, new THREE.PointsMaterial({ color: color, size: 4 })); // particles.position.set(x, y, z + 75); // particles.rotation.set(rx, ry, rz); // particles.scale.set(s, s, s); // gScene.add(particles); // // equidistance sampled points // var particles = new THREE.Points(spacedPoints, new THREE.PointsMaterial({ color: color, size: 4 })); // particles.position.set(x, y, z + 125); // particles.rotation.set(rx, ry, rz); // particles.scale.set(s, s, s); // gScene.add(particles); // } // export function addExt() // { // // California // var californiaPts = []; // californiaPts.push(new THREE.Vector2(610, 320)); // californiaPts.push(new THREE.Vector2(450, 300)); // californiaPts.push(new THREE.Vector2(392, 392)); // californiaPts.push(new THREE.Vector2(266, 438)); // californiaPts.push(new THREE.Vector2(190, 570)); // californiaPts.push(new THREE.Vector2(190, 600)); // californiaPts.push(new THREE.Vector2(160, 620)); // californiaPts.push(new THREE.Vector2(160, 650)); // californiaPts.push(new THREE.Vector2(180, 640)); // californiaPts.push(new THREE.Vector2(165, 680)); // californiaPts.push(new THREE.Vector2(150, 670)); // californiaPts.push(new THREE.Vector2(90, 737)); // californiaPts.push(new THREE.Vector2(80, 795)); // californiaPts.push(new THREE.Vector2(50, 835)); // californiaPts.push(new THREE.Vector2(64, 870)); // californiaPts.push(new THREE.Vector2(60, 945)); // californiaPts.push(new THREE.Vector2(300, 945)); // californiaPts.push(new THREE.Vector2(300, 743)); // californiaPts.push(new THREE.Vector2(600, 473)); // californiaPts.push(new THREE.Vector2(626, 425)); // californiaPts.push(new THREE.Vector2(600, 370)); // californiaPts.push(new THREE.Vector2(610, 320)); // for (var i = 0; i < californiaPts.length; i++) californiaPts[i].multiplyScalar(0.25); // var californiaShape = new THREE.Shape(californiaPts); // // Triangle // var triangleShape = new THREE.Shape(); // triangleShape.moveTo(80, 20); // triangleShape.lineTo(40, 80); // triangleShape.lineTo(120, 80); // triangleShape.lineTo(80, 20); // close path // // Heart // var x = 0, y = 0; // var heartShape = new THREE.Shape(); // From http://blog.burlock.org/html5/130-paths // heartShape.moveTo(x + 25, y + 25); // heartShape.bezierCurveTo(x + 25, y + 25, x + 20, y, x, y); // heartShape.bezierCurveTo(x - 30, y, x - 30, y + 35, x - 30, y + 35); // heartShape.bezierCurveTo(x - 30, y + 55, x - 10, y + 77, x + 25, y + 95); // heartShape.bezierCurveTo(x + 60, y + 77, x + 80, y + 55, x + 80, y + 35); // heartShape.bezierCurveTo(x + 80, y + 35, x + 80, y, x + 50, y); // heartShape.bezierCurveTo(x + 35, y, x + 25, y + 25, x + 25, y + 25); // // Square // var sqLength = 80; // var squareShape = new THREE.Shape(); // squareShape.moveTo(0, 0); // squareShape.lineTo(0, sqLength); // squareShape.lineTo(sqLength, sqLength); // squareShape.lineTo(sqLength, 0); // squareShape.lineTo(0, 0); // // Rectangle // var rectLength = 120, rectWidth = 40; // var rectShape = new THREE.Shape(); // rectShape.moveTo(0, 0); // rectShape.lineTo(0, rectWidth); // rectShape.lineTo(rectLength, rectWidth); // rectShape.lineTo(rectLength, 0); // rectShape.lineTo(0, 0); // // Rounded rectangle // var roundedRectShape = new THREE.Shape(); // (function roundedRect(ctx, x, y, width, height, radius) // { // ctx.moveTo(x, y + radius); // ctx.lineTo(x, y + height - radius); // ctx.quadraticCurveTo(x, y + height, x + radius, y + height); // ctx.lineTo(x + width - radius, y + height); // ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius); // ctx.lineTo(x + width, y + radius); // ctx.quadraticCurveTo(x + width, y, x + width - radius, y); // ctx.lineTo(x + radius, y); // ctx.quadraticCurveTo(x, y, x, y + radius); // })(roundedRectShape, 0, 0, 50, 50, 20); // // Track 轨道 跑道 // var trackShape = new THREE.Shape(); // trackShape.moveTo(40, 40); // trackShape.lineTo(40, 160); // trackShape.absarc(60, 160, 20, Math.PI, 0, true); // trackShape.lineTo(80, 40); // trackShape.absarc(60, 40, 20, 2 * Math.PI, Math.PI, true); // // Circle // var circleRadius = 40; // var circleShape = new THREE.Shape(); // circleShape.moveTo(0, circleRadius); // circleShape.quadraticCurveTo(circleRadius, circleRadius, circleRadius, 0); // circleShape.quadraticCurveTo(circleRadius, - circleRadius, 0, - circleRadius); // circleShape.quadraticCurveTo(- circleRadius, - circleRadius, - circleRadius, 0); // circleShape.quadraticCurveTo(- circleRadius, circleRadius, 0, circleRadius); // // Fish // var x = y = 0; // var fishShape = new THREE.Shape(); // fishShape.moveTo(x, y); // fishShape.quadraticCurveTo(x + 50, y - 80, x + 90, y - 10); // fishShape.quadraticCurveTo(x + 100, y - 10, x + 115, y - 40); // fishShape.quadraticCurveTo(x + 115, y, x + 115, y + 40); // fishShape.quadraticCurveTo(x + 100, y + 10, x + 90, y + 10); // fishShape.quadraticCurveTo(x + 50, y + 80, x, y); // // Arc circle // var arcShape = new THREE.Shape(); // arcShape.moveTo(50, 10); // arcShape.absarc(10, 10, 40, 0, Math.PI * 2, false); // var holePath = new THREE.Path(); // holePath.moveTo(20, 10); // holePath.absarc(10, 10, 10, 0, Math.PI * 2, true); // arcShape.holes.push(holePath); // // Smiley // var smileyShape = new THREE.Shape(); // smileyShape.moveTo(80, 40); // smileyShape.absarc(40, 40, 40, 0, Math.PI * 2, false); // var smileyEye1Path = new THREE.Path(); // smileyEye1Path.moveTo(35, 20); // // smileyEye1Path.absellipse(25, 20, 10, 10, 0, Math.PI * 2, true); // smileyShape.holes.push(smileyEye1Path); // var smileyEye2Path = new THREE.Path(); // smileyEye2Path.moveTo(65, 20); // smileyEye2Path.absarc(55, 20, 10, 0, Math.PI * 2, true); // smileyShape.holes.push(smileyEye2Path); // var smileyMouthPath = new THREE.Path(); // smileyMouthPath.moveTo(20, 40); // smileyMouthPath.quadraticCurveTo(40, 60, 60, 40); // smileyMouthPath.bezierCurveTo(70, 45, 70, 50, 60, 60); // smileyMouthPath.quadraticCurveTo(40, 80, 20, 60); // smileyMouthPath.quadraticCurveTo(5, 50, 20, 40); // smileyShape.holes.push(smileyMouthPath); // // Spline shape // var splinepts = []; // splinepts.push(new THREE.Vector2(70, 20)); // splinepts.push(new THREE.Vector2(80, 90)); // splinepts.push(new THREE.Vector2(- 30, 70)); // splinepts.push(new THREE.Vector2(0, 0)); // var splineShape = new THREE.Shape(); // splineShape.moveTo(0, 0); // splineShape.splineThru(splinepts); // var extrudeSettings = { amount: 8, bevelEnabled: true, bevelSegments: 2, steps: 2, bevelSize: 1, bevelThickness: 1 }; // // addShape(shape, color, x, y, z, rx, ry, rz, s); // addShape(californiaShape, extrudeSettings, 0xf08000, -300, -100, 0, 0, 0, 0, 1); // addShape(triangleShape, extrudeSettings, 0x8080f0, -180, 0, 0, 0, 0, 0, 1); // addShape(roundedRectShape, extrudeSettings, 0x008000, -150, 150, 0, 0, 0, 0, 1); // addShape(trackShape, extrudeSettings, 0x008080, 200, -100, 0, 0, 0, 0, 1); // addShape(squareShape, extrudeSettings, 0x0040f0, 150, 100, 0, 0, 0, 0, 1); // addShape(heartShape, extrudeSettings, 0xf00000, 60, 100, 0, 0, 0, Math.PI, 1); // addShape(circleShape, extrudeSettings, 0x00f000, 120, 250, 0, 0, 0, 0, 1); // addShape(fishShape, extrudeSettings, 0x404040, - 60, 200, 0, 0, 0, 0, 1); // addShape(smileyShape, extrudeSettings, 0xf000f0, -200, 250, 0, 0, 0, Math.PI, 1); // addShape(arcShape, extrudeSettings, 0x804000, 150, 0, 0, 0, 0, 0, 1); // addShape(splineShape, extrudeSettings, 0x808080, - 50, -100, 0, 0, 0, 0, 1); // // addLineShape(arcShape.holes[0], 0x804000, 150, 0, 0, 0, 0, 0, 1); // for (var i = 0; i < smileyShape.holes.length; i += 1) { // //addLineShape(smileyShape.holes[i], 0xf000f0, - 200, 250, 0, 0, 0, Math.PI, 1); // } // } // export function createPath(pts: THREE.Vector2[], buls: number[]): THREE.Shape // { // var shape = new THREE.Shape(); // let firstPt = pts[0]; // shape.moveTo(firstPt.x, firstPt.y); // for (let i = 0; i < pts.length - 1; i++) { // let nextPt = pts[i + 1]; // if (buls[i] == 0) { // shape.lineTo(nextPt.x, nextPt.y) // } // else { // var pt = pts[i]; // //参考 // //http://www.dorodnic.com/blog/tag/three-js/ 绘制一个齿轮 // //https://www.kirupa.com/html5/drawing_circles_canvas.htm //html5 // var arc2 = new Arc2d(pt, nextPt, buls[i]); // var cen = arc2.m_Center; // shape.absarc(cen.x, cen.y, arc2.m_Radius, arc2.m_StartAn, arc2.m_EndAn, buls[i] < 0); // } // } // return shape; // } // export function setCam(x: number, y: number, z: number) // { // gCurCamera.position.set(x, y, z); // } // window["setc"] = setCam; // // export function testPath() // // { // // let len = 10; // // let wid = 5; // // let pts = [ // // new THREE.Vector2(0, 0), // // new THREE.Vector2(wid, 0), // // new THREE.Vector2(wid, len - 2), // // new THREE.Vector2(wid - 2, len), // // new THREE.Vector2(2, len), // // new THREE.Vector2(0, len - 2), // // new THREE.Vector2(0, 0) // // ]; // // let buls = [0, 0, -0.414214, 0, 0.414214, 0]; // // var sp = createPath(pts, buls); // // var geometry = new THREE.ShapeGeometry(sp); // // var mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial());// map: texture THREE.MeshPhongMaterial({ side: THREE.DoubleSide }) // // gScene.add(mesh); // // } // export function createBoard(boardData: object) // { // var pts: THREE.Vector2[] = new Array(); // var buls: number[] = new Array(); // var boardPts = boardData["Pts"]; // var boardBuls = boardData["Buls"]; // var boardMat = new THREE.Matrix4(); // var matInv: THREE.Matrix4 = new THREE.Matrix4(); // //InitBoardMat // { // var xD = getVec(boardData["XVec"]); // var yD = getVec(boardData["YVec"]); // var ZD = getVec(boardData["ZVec"]); // var pBase = getVec(boardData["BasePoint"]); // boardMat.makeBasis(xD, yD, ZD); // boardMat.setPosition(pBase); // matInv.getInverse(boardMat, true); // } // for (let i = 0; i < boardPts.length; i++) { // var pt = getVec(boardPts[i]); // pt.applyMatrix4(matInv); // pts.push(new THREE.Vector2(pt.x, pt.y)); // buls.push(boardBuls[i]); // } // var sp = createPath(pts, buls); // var extrudeSettings = { // steps: 1, // bevelEnabled: false, // amount: 18 // }; // var ext = new THREE.ExtrudeGeometry(sp, extrudeSettings); // ext.translate(0, 0, -18) // ext.applyMatrix(boardMat); // var loader: THREE.TextureLoader = new THREE.TextureLoader(); // var url = require("file-loader?!../textures/木纹.jpg"); // var texture: THREE.Texture = loader.load(url); // texture.wrapS = texture.wrapT = THREE.RepeatWrapping; // CHANGED // texture.offset.set(0, 1); // CHANGED // texture.repeat.set(0.002, 0.002); // CHANGED // texture.needsUpdate = true; // //var mesh = new THREE.Mesh(ext, new THREE.MeshNormalMaterial());// map: texture THREE.MeshPhongMaterial({ side: THREE.DoubleSide }) // var nMater = new THREE.MeshNormalMaterial(); // var material = new THREE.MeshPhongMaterial({ map: texture }); // front // var material2 = new THREE.ShaderMaterial({ // uniforms: {} // }); // material2.extensions.derivatives = true; // var mat5 = new THREE.MeshBasicMaterial({ // color: 0xFF00FF, // map: texture // }); // var mat3 = new THREE.MeshBasicMaterial({ wireframe: true }); // var mat4 = new THREE.MeshLambertMaterial({ map: texture }); // var mat6 = new THREE.MeshBasicMaterial({ // // color: 0xFF00FF, // map: texture // }); // // add a wireframe to highlight the segmentation // // var mesh = THREE.SceneUtils.createMultiMaterialObject(ext, [mat6, new THREE.MeshPhongMaterial({ // // color: 0x000000, // // wireframe: true, // // // transparent: true // // })]); // mat4.needsUpdate = true; // var mat7 = new THREE.MeshStandardMaterial({ // color: 0xffffff, // roughness: 0.5, // metalness: 1.0, // map: texture // }); // var mesh = new THREE.Mesh(ext, mat4); // mesh.castShadow = true; // gScene.add(mesh); // } // // // export function getVec(data: object): THREE.Vector3 // { // return new THREE.Vector3(data["x"], data["y"], data["z"]); // } // export function createTemplateBoard() // { // var brList = data["Data"]; // for (let i = 0; i < brList.length; i++) { // var brData = brList[i]; // createBoard(brData); // } // } // // var BoundingUVGenerator = { // // generateTopUV: function (geometry, extrudedShape, extrudeOptions, indexA, indexB, indexC) // // { // // var ax = geometry.vertices[indexA].x, // // ay = geometry.vertices[indexA].y, // // bx = geometry.vertices[indexB].x, // // by = geometry.vertices[indexB].y, // // cx = geometry.vertices[indexC].x, // // cy = geometry.vertices[indexC].y, // // bb = extrudedShape.getBoundingBox(), // // bbx = bb.maxX - bb.minX, // // bby = bb.maxY - bb.minY; // // return [ // // new THREE.UV((ax - bb.minX) / bbx, 1 - (ay - bb.minY) / bby), // // new THREE.UV((bx - bb.minX) / bbx, 1 - (by - bb.minY) / bby), // // new THREE.UV((cx - bb.minX) / bbx, 1 - (cy - bb.minY) / bby) // // ]; // // }, // // generateBottomUV: function (geometry, extrudedShape, extrudeOptions, indexA, indexB, indexC) // // { // // return this.generateTopUV(geometry, extrudedShape, extrudeOptions, indexA, indexB, indexC); // // }, // // generateSideWallUV: function (geometry, extrudedShape, wallContour, extrudeOptions, // // indexA, indexB, indexC, indexD, stepIndex, stepsLength, // // contourIndex1, contourIndex2) // // { // // var ax = geometry.vertices[indexA].x, // // ay = geometry.vertices[indexA].y, // // az = geometry.vertices[indexA].z, // // bx = geometry.vertices[indexB].x, // // by = geometry.vertices[indexB].y, // // bz = geometry.vertices[indexB].z, // // cx = geometry.vertices[indexC].x, // // cy = geometry.vertices[indexC].y, // // cz = geometry.vertices[indexC].z, // // dx = geometry.vertices[indexD].x, // // dy = geometry.vertices[indexD].y, // // dz = geometry.vertices[indexD].z; // // var amt = extrudeOptions.amount, // // bb = extrudedShape.getBoundingBox(), // // bbx = bb.maxX - bb.minX, // // bby = bb.maxY - bb.minY; // // if (Math.abs(ay - by) < 0.01) { // // return [ // // new THREE.UV(ax / bbx, az / amt), // // new THREE.UV(bx / bbx, bz / amt), // // new THREE.UV(cx / bbx, cz / amt), // // new THREE.UV(dx / bbx, dz / amt) // // ]; // // } else { // // return [ // // new THREE.UV(ay / bby, az / amt), // // new THREE.UV(by / bby, bz / amt), // // new THREE.UV(cy / bby, cz / amt), // // new THREE.UV(dy / bby, dz / amt) // // ]; // // } // // } // // };