itee / threejs-full-es6 Goto Github PK

View Code? Open in Web Editor NEW

46.0 4.0 7.0 11.89 MB

DEPRECATED: Use three-full instead

License: MIT License

JavaScript 99.87% GLSL 0.13% HTML 0.01%

threejs-full-es6's Introduction

threejs-full-es6

DEPRECATED: Use three-full instead

Extended Three JavaScript 3D library

Three.js r90 come with lot of examples files, which are curently not usable as ES6 module. The purpose of this project is to convert all examples files and includes them as part of the library.

The version 5.0.7 is now available !!!

Setup

Assuming that npm and node are already installed.

Install:

npm install --save threejs-full-es6

Usage

Like Three.js but with more, more and more available stuff.

Using ES6:

import { WhatIWant } from 'node_modules/threejs-full-es6/builds/Three.es.js'
// equivalent to
import { WhatIWant } from 'threejs-full-es6'
 
// or directly from sources folder
 
import { Ocean } from 'node_modules/threejs-full-es6/sources/Ocean'

Using Node/CommonJS:

const Three = require('node_modules/threejs-full-es6/builds/Three.cjs.js')

Using UMD:

const Three = require('node_modules/threejs-full-es6/builds/Three.umd.js')

Using AMD:

require(['node_modules/threejs-full-es6/builds/Three.amd.js'], 
    function( Three ){
    
        //...
        
});

From HTML (not recommended):

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Three Full Es6</title>
    </head>
    <body>
        <script src="node_modules/threejs-full-es6/builds/Three.iife.js"></script>
        <script>
            alert('Three.REVISION: ' + Three.REVISION)
        </script>
    </body>
</html>

Note: You should copy the file in right server location to serve it correctly, and use Three.iife.min.js under production ! Importing the all library in HTML page should be avoided, use a proper module bundler like webpack or rollup using es6 module syntaxe !

Commands

In case you want participate, you need to known some commands below:

Help:

npm run help

Will display all you need to known about available commands in threejs-full-es6 package

Patch:

npm run patch

Important: After installing/reinstalling node_modules/three you need to apply patch only once, for fix some examples parts.

Convert:

npm run convert

This command will convert all examples files as ES6 modules (*) and copy all three files at top level of the package in view to be build.

Build:

npm run build

This command will build converted sources as UMD, AMD, ES (*), CJS and IIFE using Rollup

Missings

This is the list of unsupported part of example, which cannot/won't be converted.

Intermediary exporter files
- Curves.js
- Geometries.js
- Materials.js
Workers
- RaytracingWorker.js
- OffscreenCanvas.js
- ctm folder
Folders
- draco //draco_decoder use Eval !
- sea3d //Duplicate export 'SEA3D', namespace not managed yet
- crossfade folder //Scene has already been declared
Specific Files
- Cloth.js //Use global variable from html example file !
- ParametricGeometries.js //Wrong export of TorusKnotCurve
- OceanShaders.js //Need to check how to extends imported lib properly
- RectAreaLightUniformsLib.js //Need to check how to extends imported lib properly
- Volume.js //Use Eval !
- NRRDLoader.js //Import Volume.js
- XLoader.js //Unprocessable AMD module style

Redirected Files

AnimationClipCreator ---> 'animation/AnimationClipCreator.js'
ArcCurve ---> 'curves/ArcCurve.js'
BufferGeometryUtils ---> 'utils/BufferGeometryUtils.js'
Car ---> 'objects/Car.js'
CatmullRomCurve3 ---> 'curves/CatmullRomCurve3.js'
ConvexObjectBreaker ---> 'modifiers/ConvexObjectBreaker.js'
CubicBezierCurve ---> 'curves/CubicBezierCurve.js'
CubicBezierCurve3 ---> 'curves/CubicBezierCurve3.js'
Curve ---> 'curves/Curve.js'
CurveExtras ---> 'curves/CurveExtras.js'
CurvePath ---> 'core/CurvePath.js'
Detector ---> 'helpers/Detector.js'
Earcut ---> 'misc/Earcut.js'
EllipseCurve ---> 'curves/EllipseCurve.js'
Font ---> 'core/Font.js'
GPUComputationRenderer ---> 'renderers/GPUComputationRenderer.js'
GPUParticleSystem ---> 'objects/GPUParticleSystem.js'
Gyroscope ---> 'objects/Gyroscope.js'
ImmediateRenderObject ---> 'objects/ImmediateRenderObject.js'
ImprovedNoise ---> 'misc/ImprovedNoise.js'
Interpolation ---> 'core/Interpolation.js'
LineCurve ---> 'curves/LineCurve.js'
LineCurve3 ---> 'curves/LineCurve3.js'
MarchingCubes ---> 'objects/MarchingCubes.js'
MD2Character ---> 'objects/MD2Character.js'
MD2CharacterComplex ---> 'objects/MD2CharacterComplex.js'
MorphAnimMesh ---> 'objects/MorphAnimMesh.js'
MorphBlendMesh ---> 'objects/MorphBlendMesh.js'
Ocean ---> 'objects/Ocean.js'
Octree ---> 'utils/Octree.js'
Path ---> 'core/Path.js'
PRNG ---> 'utils/PRNG.js'
QuadraticBezierCurve ---> 'curves/QuadraticBezierCurve.js'
QuadraticBezierCurve3 ---> 'curves/QuadraticBezierCurve3.js'
QuickHull ---> 'utils/QuickHull.js'
RollerCoaster ---> 'objects/RollerCoaster.js'
ShaderGodRays ---> 'shaders/ShaderGodRays.js'
ShaderSkin ---> 'shaders/ShaderSkin.js'
ShaderTerrain ---> 'shaders/ShaderTerrain.js'
ShaderToon ---> 'shaders/ShaderToon.js'
Shape ---> 'core/Shape.js'
ShapePath ---> 'core/ShapePath.js'
ShapeUtils ---> 'utils/ShapeUtils.js'
SimplexNoise ---> 'misc/SimplexNoise.js'
SplineCurve ---> 'curves/SplineCurve.js'
TimelinerController ---> 'animation/TimelinerController.js'
TypedArrayUtils ---> 'utils/TypedArrayUtils.js'
UCSCharacter ---> 'objects/UCSCharacter.js'
VolumeSlice ---> 'audio/VolumeSlice.js'

All others folders under example file tree will be mapped to their counter-part under sources folders

Bugs

No known bug

Change log

5.0.7:

Fix missings PropertyBinding imports in FBXLoader
Fix missings PropertyBinding imports in GLTFExporter
Fix missings AnimationClip imports in MorphAnimMesh
Fix missings AnimationClip imports in MD2Loader
Fix missings _Math imports in SoftwareRenderer
Fix missings CameraNode imports in NodeMaterialLoader
Fix missings Interpolant imports in MMDLoader
Remove unnecessary _Math imports

5.0.6:

Add a window global variable check to avoid crach under nodejs

5.0.5:

Change default entry for main and module in package

5.0.4:

Fix #18, OBJLoader2 worker code

5.0.3:

Fix missings Geometries imports in ObjectLoader
Fix missings Materials imports in LoaderMaterial
Fix missings Curves imports in CurvePath

5.0.2 (Thanks to Marc Bartels):

Fix missings Loader imports in GLTFLoader
Fix invalid module.export stuff inside Detector

5.0.1 :

Reintroduce LineSegment fix

5.0.0 :

Support of Three r90
Move the example folder tree to source /!\ In case you're using direct source import, please check the '(Redirected Files)' part
Fix Math (instead of _Math) issue
Fix missings imports/exports
Reintroduce RollerCoaster stuff

4.2.4 :

Fix Line/LineSegments circular dependency ( Be aware: Line constructor don't return LineSegments in case of wrong arguments, and log an error instead of a warning )

4.2.3 :

Fix Detector module.export code snippet

4.2.2 :

README.md fix wrong copy/paste

4.2.1 :

Ignore some dev files for npm

4.2.0 :

Change main entry point of package to Three.es.js

4.1.1 :

Fix NodeLib circular dependency with FunctionNode

4.1.0 :

Allow to build es module under production environment
Fix node warning about unhandled promise rejection
Fix rollup warning about indent option moved under output options
Clean up sources

4.0.0 :

XLoader.js: is now ignored due to AMD module
Add Earcut, Curves, EXRLoader, GCodeLoader, LoaderUtils
Remove KeyframeTrackConstructor, KeyframeTrackPrototype, PathPrototype and ImageUtils
Update imports statements

3.0.0 :

Cloth.js: is remove due to bad usage of global variable from his html example file
Add two new fix for three package in CameraNode and NodeLib
Fix almost all missings imports statements
Note:
- MMDExporter and MMDLoader need external dependency from https://github.com/takahirox/mmd-parser
- FBXLoader and VTKLoader need external dependency from https://github.com/imaya/zlib.js
- TTFLoader need external dependency from https://github.com/nodebox/opentype.js

2.2.0 :

Add tests about every file to check their imports

2.1.1 :

Fix missing import statement in ShaderPass

2.1.0 :

Export and import statement support multilines

2.0.0 :

Support Three.js r88
Reintroduce ColladaLoader in available modules
Refactor the convert pipeline

threejs-full-es6's People

Contributors

Stargazers

Watchers

Forkers

classikd ksabariraj dgorobopec dkozma mattmm3d mmxnuaa wustxing

threejs-full-es6's Issues

Is there any way of selecting which branch of three.js is being converted?

Well done with this package, so far it looks like one of the best solutions to the problem of importing three.js examples as modules!

Personally, I need to be able to select which branch the modules come from, especially for development work. I'd love to be able to do some thing like npm run convert dev to convert examples from the dev branch. Is there any way of setting that up?

isPowerOfTwo does not exist on Math

Hi,

There is a little typo on some of the usage of isPowerOfTwo (in Water.js line 78 for example).
The function is used from the Math Javascript library and not the _Math functions from Three.js.

Would appreciate if you could fix it as i couldn't figure out how to submit a pull request !

Thank you.

LineSegments: THREE.Object3D.add: object not an instance of THREE.Object3D.

Seems that prototype for LineSegments is not set up properly, works with regular threejs, breaks with this version.

LoaderSupport breaks when using async option in ObjLoader2

The following line(66020) breaks

workerCode += 'THREE = { LoaderSupport: {} };\n\n';

It works fine when I replace it with

workerCode += 'var LoaderSupport = {};\n\n';

It would be great it if it can be fixed.

GLTFLoader: Missing Loader import from THREE

Loader is undefined as it is not imported from THREE at this line:
https://github.com/Itee/threejs-full-es6/blob/master/sources/loaders/GLTFLoader.js#L1665

Could not find a declaration file for module 'threejs-full-es6'

import { Scene, GLTFExporter, GLTFLoader, OrbitControls, PerspectiveCamera, Color, AmbientLight, DirectionalLight, SpotLight, WebGLRenderer, PCFSoftShadowMap } from 'threejs-full-es6';
import { Utils } from './utils';

The from 'threejs-full-es6' has this error:

  Try `npm install @types/threejs-full-es6` if it exists or add a new declaration (.d.ts) file containing `declare module 'threejs-full-es6';`

And when I'm trying to build it:
TypeScript error: src/index.ts(1,166): Error TS7016: Could not find a declaration file for module 'threejs-full-es6'. 'c:/users/ranbu/documents/dev/threejs-viewer/node_modules/threejs-full-es6/builds/Three.es.js' implicitly has an 'any' type. Trynpm install @types/threejs-full-es6if it exists or add a new declaration (.d.ts) file containingdeclare module 'threejs-full-es6';

Any idea on what's wrong?

If its not a bug - Maybe you can provide some simple example or a boilerplate for how to use and build a project that is using this module?

Thank you.

Unable to convert some files

Hello!
Great repo but I've some issue like follow:

Unable to find specific path part for:
myapp/node_modules/threejs-full-es6/node_modules/three/examples/js
Convert:
myapp/node_modules/threejs-full-es6/node_modules/three/examples/js/AnimationClipCreator.js
myapp/node_modules/threejs-full-es6/sources/AnimationClipCreator.js

'convert-three' errored after 373 ms
Error: Unable to find specific path part for:
myapp/node_modules/threejs-full-es6/node_modules/three/examples/js/AnimationClipCreator.js

Is it my fault?
Claudio

Can't load FBX files

Hello,
I am trying to load some FBX files in a React component and I can't do it. No errors show in the console. I noticed that FBXLoader needs zlib library, and i have installed it from npm npm install zlipjs - but what after that? The documentation of that package is not too helpful too.
I have tried OBJ files and it works just fine.
Could you please give me a hand on this ?

Thank you for your work on this project!

Cannot assign to read-only property 'exports' of object '#'

Hello,

I'm trying to build your looking great package with webpack, but I encounter this issue :

Could you help me ?

Import error

Hi,

I am getting the below error. Could you please help me on this?

build.js:1 SyntaxError: 'import' and 'export' may only appear at the top level (127829:0) while parsing \node_modules\threejs-full-es6\builds\Three.es.js while parsing file: \node_modules\threejs-full-es6\builds\Three.es.js

Thanks,
Sabari.

UMD build issue -- "Loader" appends "$1" inconsistently

Description

When using the OBJLoader the library would throw an error on a load because it thought that "Loader" did not exist. It turns out that the UMD build appends "$1" to global variables, but it didn't do it consistently. I am not sure why, but some of the references to Loader$1 don't have the "$1" appended.

I don't know enough about UMD to even guess what happened during the build process.

Here's the full error if anyone is really interested:

columnNumber: 11
fileName: "http://localhost:3000/packages/modules.js?hash=46576314c50b796413508f325387c5546a838a9b"

OBJLoader2 doesn't work if all materials don't have texture

I loaded an OBJ file using OBJLoader. The OBJ had a related material file. One of the materials didn't have a texture, hence no texture coordinates in the OBJ. Then there were 3 materials with textures, and texture coordinates in the OBJ ('vt' vertices). This means that some faces had vt vertices and others didn't.

In RawMesh.prototype.buildFace there is a section where the loader pushes indices to the variable used to create the geometry. The issue is that when there are texture coordinates for some faces and not for others then the object counts get all out of whack. I fixed the issue by just pushing uv indices even if the face being parsed didn't have a vt vertex. This just fills the array with a NaN (which is the same thing that happens in the original OBJLoader. I have a feeling that the same thing would happen if some faces had normal vertices and others didn't.

I'm not sure about the spec for OBJ files. This file can be read by other programs, so I think that the file is probably fine, and that the problem lies in how it's being parsed. Either buildFace needs to pass NaN or the code that processes the parsed faces needs to change something.

Uncaught TypeError: FunctionNode is not a constructor at three:84450

Trying to use threejs-full-es6/builds/Three.es.js

Constructor is being called before FunctionNode is defined.

Missing dependencies

Hello,

I would like to use the files you've adapted for ES6 in my application.
I include them like that for instance:
import { ShaderPass } from 'threejs-full-es6/sources/postprocessing/ShaderPass'

But sometimes i encounter problems with some dependencies which are missing.
For example in ShaderPass.js, i had to add this line to make it works:
import { UniformsUtils } from '../renderers/shaders/UniformsUtils.js'

Do I forget a step ?
I tried to use patch & build commands, but then i don't really understand what file to use :/

Thank you

Missed "Loader" import in MTLLoader

Hi! I tried to load .mtl in my scene and got the next error:

Uncaught ReferenceError: Loader is not defined
    at webpackJsonp../node_modules/threejs-full-es6/builds/Three.es.js.MTLLoader.MaterialCreator.loadTexture (Three.es.js:70426)

In this part of code:

	loadTexture: function ( url, mapping, onLoad, onProgress, onError ) {

		var texture;
		var loader = Loader.Handlers.get( url );

And as i can see you didn't import Loader into MTLLoader.js
This is your imports:

import { FileLoader } from '../loaders/FileLoader.js'
import { Color } from '../math/Color.js'
import { MeshPhongMaterial } from '../materials/Materials.js'
import { Vector2 } from '../math/Vector2.js'
import { TextureLoader } from '../loaders/TextureLoader.js'
import {
	FrontSide,
	RepeatWrapping
} from '../constants.js'
import { DefaultLoadingManager } from '../loaders/LoadingManager.js'

Reflector missing import { _Math } from '../math/Math'

Love this project.

Reflector.js throws an error missing Math.isPowerOfTwo.
To fix, Reflector.js needs
import { _Math } from '../math/Math'

and line 65 needs to be updated with the underscore.
if ( ! _Math.isPowerOfTwo( textureWidth ) || ! _Math.isPowerOfTwo( textureHeight ) ) {

itee / threejs-full-es6 Goto Github PK

threejs-full-es6's Introduction

threejs-full-es6

DEPRECATED: Use three-full instead

Extended Three JavaScript 3D library

Setup

Usage

Using ES6:

Using Node/CommonJS:

Using UMD:

Using AMD:

From HTML (not recommended):

Commands

Missings

Redirected Files

Bugs

Change log

5.0.7:

5.0.6:

5.0.5:

5.0.4:

5.0.3:

5.0.2 (Thanks to Marc Bartels):

5.0.1 :

5.0.0 :

4.2.4 :

4.2.3 :

4.2.2 :

4.2.1 :

4.2.0 :

4.1.1 :

4.1.0 :

4.0.0 :

3.0.0 :

2.2.0 :

2.1.1 :

2.1.0 :

2.0.0 :

threejs-full-es6's People

Contributors

Stargazers

Watchers

Forkers

threejs-full-es6's Issues

Recommend Projects

Recommend Topics

Recommend Org