diff --git a/manifest.json b/manifest.json new file mode 100644 index 000000000..e306196f6 --- /dev/null +++ b/manifest.json @@ -0,0 +1 @@ +{"name":"dll","content":{"./node_modules/dat.gui/build/dat.gui.js":{"id":0,"meta":{}},"./node_modules/lodash/lodash.js":{"id":1,"meta":{}},"./node_modules/three/build/three.module.js":{"id":2,"meta":{"harmonyModule":true},"exports":["WebGLRenderTargetCube","WebGLRenderTarget","WebGLRenderer","ShaderLib","UniformsLib","UniformsUtils","ShaderChunk","FogExp2","Fog","Scene","LensFlare","Sprite","LOD","SkinnedMesh","Skeleton","Bone","Mesh","LineSegments","LineLoop","Line","Points","Group","VideoTexture","DataTexture","CompressedTexture","CubeTexture","CanvasTexture","DepthTexture","Texture","CompressedTextureLoader","DataTextureLoader","CubeTextureLoader","TextureLoader","ObjectLoader","MaterialLoader","BufferGeometryLoader","DefaultLoadingManager","LoadingManager","JSONLoader","ImageLoader","FontLoader","FileLoader","Loader","Cache","AudioLoader","SpotLightShadow","SpotLight","PointLight","RectAreaLight","HemisphereLight","DirectionalLightShadow","DirectionalLight","AmbientLight","LightShadow","Light","StereoCamera","PerspectiveCamera","OrthographicCamera","CubeCamera","ArrayCamera","Camera","AudioListener","PositionalAudio","AudioContext","AudioAnalyser","Audio","VectorKeyframeTrack","StringKeyframeTrack","QuaternionKeyframeTrack","NumberKeyframeTrack","ColorKeyframeTrack","BooleanKeyframeTrack","PropertyMixer","PropertyBinding","KeyframeTrack","AnimationUtils","AnimationObjectGroup","AnimationMixer","AnimationClip","Uniform","InstancedBufferGeometry","BufferGeometry","GeometryIdCount","Geometry","InterleavedBufferAttribute","InstancedInterleavedBuffer","InterleavedBuffer","InstancedBufferAttribute","Face3","Object3D","Raycaster","Layers","EventDispatcher","Clock","QuaternionLinearInterpolant","LinearInterpolant","DiscreteInterpolant","CubicInterpolant","Interpolant","Triangle","Math","Spherical","Cylindrical","Plane","Frustum","Sphere","Ray","Matrix4","Matrix3","Box3","Box2","Line3","Euler","Vector4","Vector3","Vector2","Quaternion","Color","MorphBlendMesh","ImmediateRenderObject","VertexNormalsHelper","SpotLightHelper","SkeletonHelper","PointLightHelper","RectAreaLightHelper","HemisphereLightHelper","GridHelper","PolarGridHelper","FaceNormalsHelper","DirectionalLightHelper","CameraHelper","BoxHelper","ArrowHelper","AxisHelper","CatmullRomCurve3","CubicBezierCurve3","QuadraticBezierCurve3","LineCurve3","ArcCurve","EllipseCurve","SplineCurve","CubicBezierCurve","QuadraticBezierCurve","LineCurve","Shape","Path","ShapePath","Font","CurvePath","Curve","ShapeUtils","SceneUtils","WireframeGeometry","ParametricGeometry","ParametricBufferGeometry","TetrahedronGeometry","TetrahedronBufferGeometry","OctahedronGeometry","OctahedronBufferGeometry","IcosahedronGeometry","IcosahedronBufferGeometry","DodecahedronGeometry","DodecahedronBufferGeometry","PolyhedronGeometry","PolyhedronBufferGeometry","TubeGeometry","TubeBufferGeometry","TorusKnotGeometry","TorusKnotBufferGeometry","TorusGeometry","TorusBufferGeometry","TextGeometry","TextBufferGeometry","SphereGeometry","SphereBufferGeometry","RingGeometry","RingBufferGeometry","PlaneGeometry","PlaneBufferGeometry","LatheGeometry","LatheBufferGeometry","ShapeGeometry","ShapeBufferGeometry","ExtrudeGeometry","ExtrudeBufferGeometry","EdgesGeometry","ConeGeometry","ConeBufferGeometry","CylinderGeometry","CylinderBufferGeometry","CircleGeometry","CircleBufferGeometry","BoxGeometry","BoxBufferGeometry","ShadowMaterial","SpriteMaterial","RawShaderMaterial","ShaderMaterial","PointsMaterial","MeshPhysicalMaterial","MeshStandardMaterial","MeshPhongMaterial","MeshToonMaterial","MeshNormalMaterial","MeshLambertMaterial","MeshDepthMaterial","MeshBasicMaterial","LineDashedMaterial","LineBasicMaterial","Material","Float64BufferAttribute","Float32BufferAttribute","Uint32BufferAttribute","Int32BufferAttribute","Uint16BufferAttribute","Int16BufferAttribute","Uint8ClampedBufferAttribute","Uint8BufferAttribute","Int8BufferAttribute","BufferAttribute","REVISION","MOUSE","CullFaceNone","CullFaceBack","CullFaceFront","CullFaceFrontBack","FrontFaceDirectionCW","FrontFaceDirectionCCW","BasicShadowMap","PCFShadowMap","PCFSoftShadowMap","FrontSide","BackSide","DoubleSide","FlatShading","SmoothShading","NoColors","FaceColors","VertexColors","NoBlending","NormalBlending","AdditiveBlending","SubtractiveBlending","MultiplyBlending","CustomBlending","AddEquation","SubtractEquation","ReverseSubtractEquation","MinEquation","MaxEquation","ZeroFactor","OneFactor","SrcColorFactor","OneMinusSrcColorFactor","SrcAlphaFactor","OneMinusSrcAlphaFactor","DstAlphaFactor","OneMinusDstAlphaFactor","DstColorFactor","OneMinusDstColorFactor","SrcAlphaSaturateFactor","NeverDepth","AlwaysDepth","LessDepth","LessEqualDepth","EqualDepth","GreaterEqualDepth","GreaterDepth","NotEqualDepth","MultiplyOperation","MixOperation","AddOperation","NoToneMapping","LinearToneMapping","ReinhardToneMapping","Uncharted2ToneMapping","CineonToneMapping","UVMapping","CubeReflectionMapping","CubeRefractionMapping","EquirectangularReflectionMapping","EquirectangularRefractionMapping","SphericalReflectionMapping","CubeUVReflectionMapping","CubeUVRefractionMapping","RepeatWrapping","ClampToEdgeWrapping","MirroredRepeatWrapping","NearestFilter","NearestMipMapNearestFilter","NearestMipMapLinearFilter","LinearFilter","LinearMipMapNearestFilter","LinearMipMapLinearFilter","UnsignedByteType","ByteType","ShortType","UnsignedShortType","IntType","UnsignedIntType","FloatType","HalfFloatType","UnsignedShort4444Type","UnsignedShort5551Type","UnsignedShort565Type","UnsignedInt248Type","AlphaFormat","RGBFormat","RGBAFormat","LuminanceFormat","LuminanceAlphaFormat","RGBEFormat","DepthFormat","DepthStencilFormat","RGB_S3TC_DXT1_Format","RGBA_S3TC_DXT1_Format","RGBA_S3TC_DXT3_Format","RGBA_S3TC_DXT5_Format","RGB_PVRTC_4BPPV1_Format","RGB_PVRTC_2BPPV1_Format","RGBA_PVRTC_4BPPV1_Format","RGBA_PVRTC_2BPPV1_Format","RGB_ETC1_Format","LoopOnce","LoopRepeat","LoopPingPong","InterpolateDiscrete","InterpolateLinear","InterpolateSmooth","ZeroCurvatureEnding","ZeroSlopeEnding","WrapAroundEnding","TrianglesDrawMode","TriangleStripDrawMode","TriangleFanDrawMode","LinearEncoding","sRGBEncoding","GammaEncoding","RGBEEncoding","LogLuvEncoding","RGBM7Encoding","RGBM16Encoding","RGBDEncoding","BasicDepthPacking","RGBADepthPacking","CubeGeometry","Face4","LineStrip","LinePieces","MeshFaceMaterial","MultiMaterial","PointCloud","Particle","ParticleSystem","PointCloudMaterial","ParticleBasicMaterial","ParticleSystemMaterial","Vertex","DynamicBufferAttribute","Int8Attribute","Uint8Attribute","Uint8ClampedAttribute","Int16Attribute","Uint16Attribute","Int32Attribute","Uint32Attribute","Float32Attribute","Float64Attribute","ClosedSplineCurve3","SplineCurve3","Spline","BoundingBoxHelper","EdgesHelper","WireframeHelper","XHRLoader","BinaryTextureLoader","GeometryUtils","ImageUtils","Projector","CanvasRenderer"]},"./node_modules/webpack/buildin/global.js":{"id":3,"meta":{}},"./node_modules/webpack/buildin/module.js":{"id":4,"meta":{}}}} \ No newline at end of file diff --git a/package.json b/package.json index 03faff80b..1a4379bc9 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,8 @@ "extract-text-webpack-plugin": "^2.1.0", "file-loader": "^0.11.1", "html-loader": "^0.4.5", + "less": "^2.7.2", + "less-loader": "^4.0.3", "required-loader": "^1.2.11", "sass-loader": "^6.0.5", "source-map-loader": "^0.2.1", diff --git a/sample/demo.md b/sample/demo.md index 94c486d36..deedbb467 100644 --- a/sample/demo.md +++ b/sample/demo.md @@ -37,4 +37,7 @@ https://threejs.org/examples/#webgl_multiple_elements #光线追踪Demo -https://github.com/sbnietert/TypeScript-Ray-Tracer \ No newline at end of file +https://github.com/sbnietert/TypeScript-Ray-Tracer + + + diff --git a/sample/使用react css.md b/sample/使用react css.md new file mode 100644 index 000000000..9034e50cf --- /dev/null +++ b/sample/使用react css.md @@ -0,0 +1,10 @@ + + +#实例 +https://github.com/Quramy/typescript-css-modules-demo +https://github.com/css-modules/css-modules/issues/61 + + +#.Loader +https://github.com/olegstepura/typed-css-modules-loader + diff --git a/src/Application.ts b/src/Application.ts index cea16d23a..a4ab82f84 100644 --- a/src/Application.ts +++ b/src/Application.ts @@ -183,7 +183,7 @@ export class Application2 //数据 this.m_Database = new Database(); //渲染器 - this.m_Viewer = new Viewer(document.body, this.m_Database.m_Scene); + this.m_Viewer = new Viewer(document.getElementById("webgl"), this.m_Database.m_Scene); //相机控制 new CameraControls(this.m_Viewer, this.m_Viewer.m_Render.domElement); @@ -227,4 +227,4 @@ window["ft"] = function () let app = Application2.Application; app.m_Viewer.m_Direction.set(0, 1, 0); app.m_Viewer.m_bIsChange = true -} \ No newline at end of file +} diff --git a/src/Editor/DebugDatUi.ts b/src/Editor/DebugDatUi.ts index 749b3f7df..8affafa16 100644 --- a/src/Editor/DebugDatUi.ts +++ b/src/Editor/DebugDatUi.ts @@ -25,6 +25,7 @@ export class DebugDatUi } ); + this.m_Ctrl_UI.domElement.parentElement.style.top = "36px"; this.m_Ctrl_UI.add(this, "z"); this.m_Ctrl_UI.add(this, "arr", ["a", "b"]); diff --git a/src/GraphicsSystem/Camera.ts b/src/GraphicsSystem/Camera.ts index 2ac9e904a..914cc0dd8 100644 --- a/src/GraphicsSystem/Camera.ts +++ b/src/GraphicsSystem/Camera.ts @@ -132,7 +132,7 @@ export class CameraControls { event.preventDefault(); let key: ButtonKey = event.button; - this.m_StartChickPoint.set(event.clientX, event.clientY, 0); + this.m_StartChickPoint.set(event.offsetX, event.offsetY, 0); switch (key) { case ButtonKey.Left: @@ -164,23 +164,14 @@ export class CameraControls } onMouseMove = (event: MouseEvent) => { - - - - - event.preventDefault(); - this.m_EndChickPoint.set(event.clientX, event.clientY, 0); + this.m_EndChickPoint.set(event.offsetX, event.offsetY, 0); { let app = Application2.Application; let ent = app.m_Database.m_EntityCollection[2] as Solid3d; - ent.m_ThreeObj.position.copy(this.m_EndChickPoint); this.m_Viewer.ScreenToScenePt(ent.m_ThreeObj.position); - // let pt = this.m_EndChickPoint.clone(); - // this.m_Viewer.ScreenToScenePt(pt); - // ent.m_ThreeObj.position.copy(pt); this.m_Viewer.m_bIsChange = true; } @@ -201,7 +192,6 @@ export class CameraControls } case State.Rotate: { - break; } case State.Scale: @@ -214,12 +204,16 @@ export class CameraControls { event.preventDefault(); event.stopPropagation(); + + let pt = new THREE.Vector3(); + pt.set(event.offsetX, event.offsetY, 0); + this.m_Viewer.ScreenToScenePt(pt); if (event.deltaY < 0) { - this.m_Viewer.Zoom(0.6); + this.m_Viewer.Zoom(0.6, pt); } else if (event.deltaY > 0) { - this.m_Viewer.Zoom(1.4); + this.m_Viewer.Zoom(1.4, pt); } } //按键 diff --git a/src/GraphicsSystem/Viewer.ts b/src/GraphicsSystem/Viewer.ts index 5b472c6d6..367796948 100644 --- a/src/GraphicsSystem/Viewer.ts +++ b/src/GraphicsSystem/Viewer.ts @@ -31,9 +31,9 @@ export class Viewer constructor(canvas: HTMLElement, scene: THREE.Scene) { this.m_Stats = new Stats(); - this.m_Stats.showPanel(1); + this.m_Stats.showPanel(0); + this.m_Stats.dom.style.top = "36px"; document.body.appendChild(this.m_Stats.dom); - this.m_HtmlElement = canvas; this.setScene(scene); this.initRender(); @@ -42,7 +42,6 @@ export class Viewer canvas.appendChild(this.m_Render.domElement); //渲染循环 this.Render(); - } ScreenToScenePt(pt: THREE.Vector3) @@ -84,8 +83,16 @@ export class Viewer //设置设备像素比。 这通常用于HiDPI设备,以防止模糊输出画布。 this.m_Render.setPixelRatio(window.devicePixelRatio); + //这里暂时初始化成这个. 未来将分离出 Viewer - this.m_Render.setSize(this.m_HtmlElement.scrollWidth, this.m_HtmlElement.scrollHeight); + this.m_Render.setSize(this.m_HtmlElement.clientWidth, this.m_HtmlElement.clientHeight); + + window.onresize = () => + { + this.m_Render.setSize(this.m_HtmlElement.clientWidth, this.m_HtmlElement.clientHeight); + this.m_Camera.Update(); + this.m_bIsChange = true; + }; //设置它的背景色为黑色 this.m_Render.setClearColor(0x000000, 1); @@ -115,9 +122,15 @@ export class Viewer this.m_Camera.Update(); this.m_bIsChange = true; } - Zoom(scale: number) + Zoom(scale: number, scaleCenter?: THREE.Vector3) { this.m_ViewHeight *= scale; + if (scaleCenter != null) + { + this.m_Target.sub(scaleCenter); + this.m_Target.multiplyScalar(scale); + this.m_Target.add(scaleCenter); + } this.m_Camera.Update(); this.m_bIsChange = true; } @@ -138,4 +151,5 @@ export class Viewer this.m_Camera.Update(); this.m_bIsChange = true; } -} \ No newline at end of file +} + diff --git a/src/UI/AppUI.tsx b/src/UI/AppUI.tsx new file mode 100644 index 000000000..a65ee0e1d --- /dev/null +++ b/src/UI/AppUI.tsx @@ -0,0 +1,130 @@ +import * as React from "react"; + +import "./AppUI.less" +import { CSSProperties } from "react"; +import * as THREE from "three"; +//界面数据 +export class AppUi extends React.Component<{}, null> { + css: CSSProperties = { + width: "100%", + height: "100%" + } + render() + { + return ( +