I installed three.js using npm install.
I work since month with three.js using the following single import:
import * as THREE from 'three'
Now it is the first time, I am trying to used a jsm example as described on https://threejs.org/docs/#manual/en/introduction/Installation:
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
oc = new OrbitControls();
Now I get the following error:
[SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'] {
It burns down to that the core three.js files import dependencies using
import { LineBasicMaterial } from './LineBasicMaterial.js';
but the jsm files import from three.module.js
import { SaderLib,ShaderMaterial,Vector2} from "../../../build/three.module.js";
So three.module.js is a different script "format"?
I guess, I have to change my gulpfile?
var bundler = watchify(browserify(['./src/index.js'], { debug: true}).transform(babel.configure({presets: ["es2015"]}))) // original
But I admit, that I never really fully understood this part.
Can't believe I am the first one running into this.
How do you include jsm examples with three.js over nodes.js?
Why do the js files under /src use a different include method than under /examples ?
Related
I'm trying to use d3.group, a very new addition to the d3-array submodule that got released a few days ago. I am using a yarn/webpack workflow and import statements to pull in D3 like so:
import * as d3 from 'd3';
However, when I tried to use d3.group, it didn't work.
console.log(d3.group)
Returns undefined.
I to solve this, I had to install the newest version of d3-array and assign that to a new namespace.
import * as d3Array from 'd3-array';
console.log(d3Array.group)
This successfully returned the function.
So my question is, when Bostock or the other D3 developers update the submodules, do the updates not get added to the main D3 namespace until a major update? Is it necessary to pull from the submodules every time I want to use a really new feature?
Considering that the newest d3-array is not it on the latest d3 bundle, and you're using webpack/yarn
You can easily loads the modules on the d3.*, install the latest modules and wrap then together,
example:
// select all your d3 modules and save it on d3.js
// then load it on your script -> import d3 from './d3';
import { select, selectAll } from 'd3-selection'
import { group } from 'd3-array'
const d3 = Object.assign(
{},
{
select,
selectAll,
group,
}
)
export default d3;
ref: https://www.giacomodebidda.com/how-to-import-d3-plugins-with-webpack/
I'm importing images into a component, and due to the our file structure a complex relative path is required:
// TODO is there a better way of importing images? image helper?
import browserImg from './../../../assets/images/screenshot-browser.png';
import phoneImg from './../../../assets/images/screenshot-phone.png';
Is there a better way of doing this? Something like the image helper/asset-pipeline in ruby?
If you use Webpack to bundle your application, you can make use of webpack aliases:
resolve: {
alias: {
assets: 'src/assets' // relative to the webpack configuration file
}
}
Then, you can simply use the alias to refer to your assets as such:
import browserImg from 'assets/images/screenshot-browser.png';
I have some javascript code which uses d3 sankey plugin for creating a chart. In my new project, I need to reuse the same code, but the new project is in typescript. I am looking for a DefinitelyTyped file for the plugin. I browsed through https://github.com/DefinitelyTyped/DefinitelyTyped, but couldn't find it.
Is there any other location where I can get this file from?
Sankey plugin link: https://github.com/d3/d3-sankey
Also, without a d.ts file for this plugin, is there a way to access it through typescript?
The code in d3 plugin looks something like this:
d3.sankey = function () {
// Rest of the code goes here
}
The way I use it in javascript is as below:
d3.sankey().nodeWidth(30).size([100,100]);
Would appreciate any help or guidance.
Thanks!
As a heads-up, I have just submitted a Pull Request #16051 to DefinitelyTyped which contains TS definitions for d3-sankey.
Once they are merged, they will be published as per standard process to npm/#types. I.e. npm install --save-dev #types/d3-sankey will do.
IMPORTANT: When I wrote them up, I noticed that the current API documentation in the d3-sankey repo appears to be in some need of rectification (e.g. missing methods, mentioning of accessor functions, which are not used in the code base)
When I have a second, I will file an issue there/submit a PR.
UPDATE (2017-05-01):
The "official" TypeScript definitions for d3-sankey are now available (see npm #types/d3-sankey). Simply use them with npm as indicated above.
The PR to update the actual API documentation of d3-sankey to reflect the source code is still awaiting a merge here.
You need to expand the definition of the d3 type to include the sankey() method and the methods it accepts.
At the absolute minimum, you need to extend the d3 module with a declaration file to make clear that d3 has been extended with the d3-sankey module. You do so by creating a definition file that you place within the #types directly with the following contents:
declare module 'd3' {
export function sankey(...args[]) : any;
}
This tells TS that there is a d3 module, and that it exports the function listed. If the d3 module already exists, it extends that module.
So you can then import the d3 service and use it:
import dd3 = require('d3');
dd3.sankey();
If you want to expand on the type file, you instead write the definition file as so:
declare module 'd3' {
interface ISankey {
nodeWidth() : number;
nodeWidth(width : number|{(arg: number) : number}) : void;
// Add Other d3.sankey Methods Here
}
export function sankey() : ISankey;
}
As https://github.com/antonkulaga/threejs-facade is heavily outdated I tried an approach like: https://github.com/Katrix-/threejs-facade and would like to create a facade for the new three.js library.
I am by no means a JS expert, nor am I a Scala.js expert, so odds are I am doing something really dumb.
After another question I am using this sbt-scalajs-bundler and sbt-web-scalajs-bundler
My build.sbt looks like this:
lazy val client = (project in file("modules/client"))
.enablePlugins(ScalaJSBundlerPlugin, ScalaJSWeb) // ScalaJSBundlerPlugin automatically enables ScalaJSPlugin
.settings(generalSettings: _*)
.settings(
name := "client"
//, scalaJSModuleKind := ModuleKind.CommonJSModule // ScalaJSBundlerPlugin implicitly sets moduleKind to CommonJSModule enables ScalaJSPlugin
,jsDependencies += ProvidedJS / "three.min.js"
)
lazy val server = (project in file("modules/server"))
.enablePlugins(PlayScala, WebScalaJSBundlerPlugin)
.settings(generalSettings: _*)
.settings(
name := "server"
,scalaJSProjects := Seq(client)
,pipelineStages in Assets := Seq(scalaJSPipeline)
//,pipelineStages := Seq(digest, gzip)
,compile in Compile := ((compile in Compile) dependsOn scalaJSPipeline).value
)
three.min.js is in the resources-folder of my client project.
One part of the Facade is e.g.
#js.native
#JSImport("THREE", "Scene")
class Scene extends Object3D {
and I want to use it like this: val scene = new Scene. On scala.js side this actually compiles just fine, but when I run it I get:
Error: Cannot find module "THREE"
in the browser and I wonder why. It's called like this in three.min.js after all.
Now I tried providing and serving the three.min.js file from the server side as well, because I thought that maybe it was just missing at runtime, but no, that does not seem to be the cause.
So now I wonder what am I doing wrong here?
Just to clarify: Rest of transpiled js works just fine, if I do not export any usage of the Facade!
As explained in this part of Scala.js documentation, #JSImport is interpreted by the compiler as a JavaScript module import.
When you use the CommonJSModule module kind (which is the case when you enable the ScalaJSBundlerPlugin), this import is translated into the following CommonJS import:
var Scene = require("THREE").Scene;
This annotation only tells how your Scala code will be interfaced with the JS world, but it tells nothing about how to resolve the dependency that provides the THREE module.
With scalajs-bundler you can define how to resolve JS dependencies from the NPM registry by adding the following setting to your client project:
npmDependencies += "three" -> "0.84.0"
(And note that you can’t use jsDependencies to resolve these modules with #JSImport)
Also, note that the correct CommonJS import to use three.js is "three" instead of "THREE", so your #JSImport annotation should look like the following:
#JSImport("three", "Scene")
Alternatively, if you don’t want to resolve your dependencies from the NPM registry, you can supply your CommonJS module as a resource file. Just put it under the src/main/resources/Scene.js and refer to it in the #JSImport as follows:
#JSImport("./Scene", "Scene")
You can see a working example here.
I’m using the new Xcode 8 feature of code generation for my Core Data model using Class Definition as the Codegen option.
When I build I get the following output for each of my entities:
<unknown>:0: error: no such file or directory: ‘/path/to/DerivedSources/CoreDataGenerated/Model/.Entity+CoreDataClass.swift'
<unknown>:0: error: no such file or directory: ‘/path/to/DerivedSources/CoreDataGenerated/Model/.Entity+CoreDataProperties.swift’
...
Command /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/swiftc failed with exit code 1
On inspecting the files I can see the following:
Entity+CoreDataClass.swift:
import Foundation
import CoreData
public class Entity: NSManagedObject {
}
Entity+CoreDataProperties.swift
import Foundation
import CoreData
import
extension Entity {
#nonobjc public class func fetchRequest() -> NSFetchRequest<Entity> {
return NSFetchRequest<Entity>(entityName: “Entity");
}
#NSManaged public var title: String?
}
In the second, the obvious thing that shouldn’t be there is the empty import statement, which I’m guessing is causing the crash.
Could I be doing something wrong? Is this a bug?
I’ve tried all the usual, clean, clean build folder, restart Xcode/Mac with no luck.
The Module field of the entity in the Data Model inspector had a value in it, I deleted this so now it’s empty and the placeholder reads “Global namespace”. This seems to have worked!
Core Data is heavily string-based. Using names such as "Entity" for your entities can lead to unexpected results. Also avoid using names in your data model such as "description", or "item" or "attribute" etc. If you do want to use those names, prefix them: names like "My_entity" or "ACEntity" are fine.