react-3d-viewer - npm Package Compare versions

Comparing version 1.0.9 to 1.0.10

package.json

 {
   "name": "react-3d-viewer",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "email": "[e-mail]",
@@ -13,6 +13,6 @@ "description": "A 3D model viewer component based on react.js",
   },
-  "author": "",
+  "author": "Yohane",
   "license": "ISC",
   "dependencies": {
-    "marked": "^0.5.0",
+    "marked": "^0.5.1",
     "raw-loader": "^0.5.1",
@@ -19,0 +19,0 @@ "react-router": "^3.2.1",

README.CN.md

@@ -9,3 +9,3 @@ [English](./README.md) | 简体中文
 * 支持 gltf、obj、mtl、json、dae 模型格式 - 其他格式以后支持
-* 提供 `<DirectionLight/>` 和 `<AmbientLight/>` 组件 - 其他灯光组件以后提供
+* 提供 `<DirectionLight/>` 和 `<AmbientLight/>` 灯光组件 - 其他灯光组件以后提供
 ---
@@ -26,3 +26,3 @@ ## 使用
     <div>
-      <OBJModel src="./a.obj"/>
+      <OBJModel src="./a.obj" texPath=""/>
     </div>
@@ -43,2 +43,3 @@ )
         rotation={this.state.rotation}
+        texPath="./src/lib/model/"
         mtl="./src/lib/model/freedom.mtl"
@@ -62,7 +63,27 @@ src="./src/lib/model/freedom.obj"
 ```
+
+```js
+import {DAEModel,DirectionLight } from 'react-3d-viewer'
+
+render(){
+  return(
+    <div>
+     <DAEModel 
+        src={'./src/lib/model/Ruins_dae.dae'}
+        onLoad={()=>{
+          // ...
+        }}
+      >
+        <DirectionLight color={0xff00ff}/>
+      </DAEModel>
+    </div>
+  )
+}
+ 
+```
 ### HTML
 ```html
-<script src="https://unpkg.com/react-3d-viewer@latest/dist/scripts/main.js"></script>
-<script src="https://unpkg.com/react@latest/umd/react.production.min.js"></script>
-<script src="https://unpkg.com/react-dom@latest/umd/react-dom.production.min.js"></script>
+<script src="https://unpkg.com/react-3d-viewer@latest/dist/scripts/react-3d-viewer.js"></script>
+<script src="https://unpkg.com/react@16.4.1/umd/react.production.min.js"></script>
+<script src="https://unpkg.com/react-dom@16.4.1/umd/react-dom.production.min.js"></script>
 <div id="example"></div>
@@ -86,2 +107,3 @@ <script >
 | height | number  | 500  | 容器高 |
+| texPath | string | '' | 设置图片的路径
 | onLoad | function | undefined | 函数加载完成后调用 
@@ -88,0 +110,0 @@ | onProgress | function | undefined |  函数加载过程中调用 |

README.md

 English| [简体中文](./README.CN.md)
 # react-3d-viewer [![](https://img.shields.io/npm/v/react-3d-viewer.svg)](https://www.npmjs.com/package/react-3d-viewer) 
-A 3D model viewer component based on react.js. Demo located at http://dwqdaiwenqi.github.io/react-3d-viewer/site/
+A 3D model viewer component based on react.js. Demo located at https://dwqdaiwenqi.github.io/react-3d-viewer/site/
 <img src="./preview.jpg" style="margin:0 auto;">
@@ -9,3 +9,3 @@ ## Features
 * Support gltf,obj,mtl,json,dae model formats - other formats will be added in the future.
-* Provied DirectionLight and AmbientLight components - other components will be provided in the future.
+* Provied `<DirectionLight/>` and `<AmbientLight/>` light components - other components will be provided in the future.
 ---
@@ -26,3 +26,3 @@ ## Usage
     <div>
-      <OBJModel src="./a.obj"/>
+      <OBJModel src="./a.obj" texPath=""/>
     </div>
@@ -43,2 +43,3 @@ )
         rotation={this.state.rotation}
+        texPath="./src/lib/model/"
         mtl="./src/lib/model/freedom.mtl"
@@ -62,7 +63,27 @@ src="./src/lib/model/freedom.obj"
 ```
+
+```js
+import {DAEModel,DirectionLight } from 'react-3d-viewer'
+
+render(){
+  return(
+    <div>
+     <DAEModel 
+        src={'./src/lib/model/Ruins_dae.dae'}
+        onLoad={()=>{
+          // ...
+        }}
+      >
+        <DirectionLight color={0xff00ff}/>
+      </DAEModel>
+    </div>
+  )
+}
+ 
+```
 ### HTML
 ```html
-<script src="https://unpkg.com/react-3d-viewer@latest/dist/scripts/main.js"></script>
-<script src="https://unpkg.com/react@latest/umd/react.production.min.js"></script>
-<script src="https://unpkg.com/react-dom@latest/umd/react-dom.production.min.js"></script>
+<script src="https://unpkg.com/react-3d-viewer@latest/dist/scripts/react-3d-viewer.js"></script>
+<script src="https://unpkg.com/react@16.4.1/umd/react.production.min.js"></script>
+<script src="https://unpkg.com/react-dom@16.4.1/umd/react-dom.production.min.js"></script>
 <div id="example"></div>
@@ -80,3 +101,3 @@ <script >
 ```
-To view a demo,click [here](http://dwqdaiwenqi.github.io/react-3d-viewer/site/). 
+To view a demo,click [here](https://dwqdaiwenqi.github.io/react-3d-viewer/site/). 
 
@@ -88,2 +109,3 @@ ## Properties
 height | number  | 500  | The height of container
+texPath | string | '' | Set the base path for the img file
 onLoad | function | undefined | A function to be called after the loading is successfully completed
@@ -112,2 +134,1 @@ onProgress | function | undefined |  A function to be called while the loading is in progress
 
-

src/dae_model.js

@@ -19,3 +19,3 @@
     // debugger
-    var {src} = this.props;
+    var {src,texPath} = this.props;
  
@@ -26,4 +26,6 @@ if(!src) return false
     // debugger
-    new THREE.ColladaLoader().load(src, data => {
+    var collada_loader = new THREE.ColladaLoader()
 
+    collada_loader.load(src, data => {
+
         this.obj3d = data.scene;
@@ -30,0 +32,0 @@ // Add the objects to the scene

src/gltf_model.js

@@ -19,4 +19,4 @@
     // debugger
-    var {src} = this.props;
- 
+    var {src,texPath} = this.props;
+    
     if(!src) return false
@@ -23,0 +23,0 @@

src/json_model.js

@@ -18,6 +18,7 @@
   load3dModel(){
-    var {src,onProgress,onLoad} = this.props;
+    var {src,onProgress,onLoad,texPath} = this.props;
 
-    let loader = new THREE.JSONLoader();
-    loader.load(this.props.src,(geometry,materials)=>{
+    let loader = new THREE.JSONLoader()
+    loader.setTexturePath(texPath)
+    loader.load(src,(geometry,materials)=>{
 
@@ -24,0 +25,0 @@ var obj3d =  new THREE.Mesh(geometry,materials);

src/model.js

@@ -105,2 +105,4 @@
     ,loader: ''
+    ,baseUrl:''
+    ,texPath:''
     ,position: {x:0, y: 0, z: 0}
@@ -260,2 +262,3 @@ ,scale: {x:1, y:1, z: 1}
     this.group.rotation.set(rotation.x,rotation.y,rotation.z)
+    this.group.scale.set(scale.x,scale.y,scale.z)
 
@@ -283,2 +286,4 @@
         this.group.rotation.set(rotation.x,rotation.y,rotation.z)
+
+        this.group.scale.set(scale.x,scale.y,scale.z)
       }
@@ -285,0 +290,0 @@

src/mtl_model.js

@@ -16,12 +16,15 @@
   load3dModel(){
-    var {src,mtl} = this.props;
+    var {src,mtl,texPath} = this.props;
  
     if(!src || !mtl) return false
 
-    new THREE.MTLLoader()
-    .load(mtl, materials => {
+    var mtl_loader =  new THREE.MTLLoader()
+    var obj_loader = new THREE.OBJLoader()
+
+    mtl_loader.setTexturePath(texPath)
+    
+    mtl_loader.load(mtl, materials => {
       materials.preload();
 
-      new THREE.OBJLoader()
-      .setMaterials( materials )
+      obj_loader.setMaterials( materials )
       .load(src, obj3d =>{
@@ -28,0 +31,0 @@ var bound_box = this.computeBoundingBox(obj3d);

src/obj_model.js

@@ -16,6 +16,5 @@
     super(props)
-    // console.log(props)
   }
   load3dModel(){
-    var {src} = this.props;
+    var {src,texPath} = this.props;
  
@@ -25,3 +24,4 @@ if(!src) return false
     // load a resource
-    new THREE.OBJLoader().load(
+    var obj_loader = new THREE.OBJLoader()
+    obj_loader.load(
       // resource URL
@@ -39,3 +39,2 @@ src,
         var cz = bound_box.max.z - bound_box.min.z;
-      
 
@@ -42,0 +41,0 @@ this.camera.position.set(0, 0, front.z+cz*1.5);

webpack.config.js

@@ -12,3 +12,3 @@
         { path: __dirname+'/site/dist/',filename:'scripts/[name].js' } :
-        { path: __dirname+'/dist/',filename: 'scripts/[name].js',library: 'React3DViewer',libraryTarget: 'umd' },
+        { path: __dirname+'/dist/',filename: 'scripts/react-3d-viewer.js',library: 'React3DViewer',libraryTarget: 'umd' },
     module: {
@@ -26,14 +26,14 @@ rules: [
             {
-							test: /\.(css|less)$/,
-							use: [
+                test: /\.(css|less)$/,
+                use: [
 
-							'style-loader',
-							'css-loader',
-							{
-									loader: 'postcss-loader',
-									options: {
-									plugins: ()=>[require('autoprefixer')]
-									}},  
-							'less-loader'
-							]
+                'style-loader',
+                'css-loader',
+                {
+                        loader: 'postcss-loader',
+                        options: {
+                        plugins: ()=>[require('autoprefixer')]
+                        }},  
+                'less-loader'
+                ]
             }
@@ -60,5 +60,10 @@
     },
+    externals: {
+        'react': 'React',
+        'react-dom':'ReactDOM'
+    },
     plugins: [
+        new webpack.BannerPlugin(" react-3d-viewer v"+require('./package.json').version+"\r\n By https://github.com/dwqdaiwenqi \r\n Github: https://github.com/dwqdaiwenqi/react-3d-viewer\r\n MIT Licensed."),
     ]
 
 }

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

Improved metrics

Number of low maintenance alerts

2

decreased by-33.33%

Number of lines in readme file

128

increased by19.63%

Worsened metrics

Total package byte prevSize

942576

decreased by-0.55%

Lines of code

8256

decreased by-7.1%

Number of low quality alerts

3

increased by50%

Number of low supply chain risk alerts

23

increased by1050%

Dependency changes

• Updatedmarked@^0.5.1