reactjs - Using Three.js obj-loader in React -


in first try, used normal import node_modules , after minifided lib without success. in next step used older version of three. js library without changes. found out example whit imported three-obj-loader module , tried , still don`t know why in output objloader not constructed, function. many help.

i`m importing loaders this

import ob './objloader'; import * 3 './three'; // var 3 = require('three/examples/js/loaders/objloader');// // var manager = new loadingmanager();// // var loader = new three.objloader( manager ); // import 'three'; // var loader = new objloader( manager); var objloader = require('three-obj-loader')(three) var manager = new th.loadingmanager(); manager.onprogress = function ( item, loaded, total ) {     console.log( item, loaded, total ); }; // model // var loader = new ob( manager );  in function  export function loadmodelobj( path ) {     return new promise( ( resolve, reject ) => {         loader.load(             path,             resolve,             () => null,             error => reject         );     }); }

with webpack setup:

var webpack = require('webpack'); var path = require('path'); module.exports = {     devtool: 'inline-source-map',     entry: {         main: './src/client.js'     },     module: {         loaders: [             {                 test: /\.js?$/,                 exclude: /node_modules/,                 loaders: [ 'babel', 'eslint-loader' ]             },             { test: /\.json$/, loader: 'file' },             { test: /\.jpg$/, loader: 'file' },             { test: /\.obj$/, loader: 'file' },             { test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ] }          ]     },     plugins:[         new webpack.provideplugin({             'three': 'three'         }),     ],     progress: true,     resolve: {       extensions: ['', '.json', '.js'],         alias: {             'three/orbitcontrols': path.join(__dirname, 'node_modules/three/examples/js/controls/orbitcontrols.js'),             'three/objloader': path.join(__dirname, 'node_modules/three/examples/js/loaders/objloader.js')             // ...         }     },     output: {         path: 'build/',         filename: 'bundle.js'     } };

and packpage:

{        "scripts": {     "start": "webpack-dev-server --content-base build"   },       "dependencies": {     "autobind-decorator": "^1.3.3",     "babel-core": "^6.7.6",     "babel-loader": "^6.2.1",     "babel-plugin-add-module-exports": "^0.1.2",     "babel-plugin-transform-decorators-legacy": "^1.3.4",     "babel-plugin-transform-runtime": "^6.9.0",     "babel-preset-es2015": "^6.3.13",     "babel-preset-react": "^6.3.13",     "babel-preset-stage-0": "^6.3.13",     "babel-register": "^6.3.13",     "babel-runtime": "^6.3.19",     "css-loader": "^0.23.1",     "file-loader": "^0.8.5",     "json-loader": "^0.5.4",     "node-sass": "^3.7.0",     "react": "^15.3.1",     "react-dom": "^15.1.0",     "react-three-renderer": "^3.2.1",     "sass-loader": "^3.2.0",     "style-loader": "^0.13.1",     "three": "^0.84.0",     "three-obj-loader": "^1.1.2"   },   "devdependencies": {     "babel-eslint": "^6.0.4",     "babel-plugin-react-transform": "^2.0.0",     "clean-webpack-plugin": "^0.1.6",     "eslint": "^2.10.2",     "eslint-loader": "^1.3.0",     "eslint-plugin-import": "^1.8.0",     "eslint-plugin-react": "^5.1.1",     "webpack": "^1.12.9",     "webpack-dev-server": "^1.14.1"   } }

i followed examples:

using webpack, threejs examples, , typescript?

what proper way three.js used within webpack can use orbitcontrols?

three.js objloader not loading in react

i had similar issue, looks you're not importing correctly. if have npm packages installed don't need import them './' works me:

import react, { component } 'react'; import * 3 'three'; import react3 'react-three-renderer'; import objloader 'three-obj-loader';  objloader(three);

then in constructor method of react class, call 

 var loader = new three.objloader();

from there should able console.log(loader) , see three.objloader function in console.

let me know if helps!


Comments

Post a Comment

Popular posts from this blog

PHP and MySQL WP -

i trying accomplish 2 things here code. writing php directly wp page using insert php plugin. 1) query mysql database , return results 1 column 4 columns. 2) make each result own hyperlink directs user new wp page runs new query on page. i able query show results , turn results dynamic hyperlink, cannot formatting down. right returns result 1 column. here have: [insert_php] $servername = "localhost"; $username = "login"; //edited privacy $password = "password"; //edited privacy $database = "database"; //edited privacy // create connection $conn = new mysqli($servername, $username, $password, $database); // check connection if ($conn->connect_error) { die("connection failed: " . $conn->connect_error); } echo "connected successfully"; //get results database $result = mysqli_query($conn,"select mine mines order mine"); $all_property = array(); //declare array saving property //showing proper...
Read more

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m...
Read more

go - golang pprof for c library code -

i have been trying profile golang application pprof, seems details of c code(linked static library) missed in output result. flame graph from frame graph can see c code time consuming reported within "runtime._externalcode", no details @ all. , sure static library compiled debug enable. so there way make pprof details(like stack trace) of 3rd party c code? or there other golang profiling tool this?
Read more