I think we should re-export all the libraries to make it easier to use three.dart.
I believe some 3rd party libraries should be re-exported as well (like vector_math) since they are used in three.dart's public API.

I can not use Float32Array, Int32Array, ..etc on latest Dart.
This is might a pattern you might want to use in the typed_data instead is might recommended.

I was wondering if it would be possible to switch to using the Matrix and Vector types from the vector_math library (https://github.com/johnmccutchan/vector_math), which already has SIMD support?

Hi

I am trying out the new vector_math version.

In the rotateCamera method of TrackballControls there is the following comment:

// TODO Check that vector_math's Quaternion.rotate is equivalent to multiplyVector3

It seems to me that they aren't equivalent. The vector_math version rotates in the opposite direction.

For some reason this line in pubspec

dependencies:
three:
git: https://github.com/threeDart/three.dart.git

doesn't work anymore when doing

import 'package:three/three.dart';

The examples don't seem to run as is at the moment.

Currently trying to run the Canvas Geometry Cube demo. I got a few exceptions I managed to fix, but the one below threw me off.

"Class 'CubeGeometry' has no instance getter 'Strings'."

Can anyone help me understand what's going on? Thanks.

Three.dart is broken, please replace Strings.join(..) with something like:

The Strings class have been removed. You should be able to do something like this:
print(['hello', 'world'].join(' '));
Thnks

The copyInto call at the end of the update function in trackball.dart appears to copy lastPosition into object.position rather than the other way round. I think it should be:

object.position.copyInto( lastPosition );

texImage2D seems to be broken when pixels is null which results in "Exception: Typed data object expected"

see: https://code.google.com/p/dart/issues/detail?id=3890

Just wondered if anyone had got vertex or face colors to work? Variations of the following code always seem to give me a white sphere:

Three.SphereGeometry spheregeometry = new Three.SphereGeometry(5.0, 10, 10);

spheregeometry.colors = new List<Three.Color>(spheregeometry.vertices.length);

// First, assign colors to vertices as desired
for (int i = 0; i < spheregeometry.vertices.length; i++) 
{
   spheregeometry.colors[i] = new Three.Color().setRGB(77, 115, 153);
}

for (int i = 0; i < spheregeometry.faces.length; i++) 
{
   var face = spheregeometry.faces[i];

   // face.color.setRGB(77, 115, 153);

   // Determine if face is a tri or a quad
   int numberofsides = (face is Three.Face3) ? 3 : 4;

   face.vertexColors = new List<Three.Color>(numberofsides);

   // Assign color to each vertex of current face
   for (int j = 0; j < numberofsides; j++)  
   {
      var vertexindex = face.indices[j];

      // Initialize color variable
      face.vertexColors[j] = spheregeometry.colors[vertexindex]; 
   }
}            

Three.Material material = new Three.MeshBasicMaterial( 
      color: 0xffffff, shading: Three.FlatShading, 
      vertexColors: Three.VertexColors);

Three.Mesh spheremesh = new Three.Mesh(spheregeometry, material);

scene.add(spheremesh);

Anything obvious I'm doing wrong?

Hi guys,

This is the first version of the master repo that doesn't work for me when I open it in the latest release build of Dart Editor. I get the following error:

Running pub install ...
Pub install fail, Cannot install 'stats' from Git (https://github.com/financeCoding/stats.dart.git).
Please ensure Git is correctly installed.

It seems to me that the problem is due to an external dependency being introduced for the stats.dart project?

I've written a post on our group outlining what I think should be a core set of principals when updating three.dart: https://groups.google.com/forum/#!topic/three-dart/vf9f3gzM6as

Please let me know what you think!

Hi,

To make social sharing better, could you add a screenshot image for each sample? That way, when someone shares the link on G+ it can also show a cool screenshot.

This will work:

<head>
<meta itemprop="image" content="SCREENSHOT IMAGE URL">
</head>

Thanks!

Exception: Illegal argument(s): 0
Vector3.x= (package:vector_math/src/vector_math/vector3.dart:444:31)
JSONLoader._parseModel (package:three/src/loaders/JSONLoader.dart:287:18)
JSONLoader._createModel (package:three/src/loaders/JSONLoader.dart:98:16)
JSONLoader._loadAjaxJSON. (package:three/src/loaders/JSONLoader.dart:42:25)

I use the lasted git version, downloaded today.

Canvas_Geometry_Cube.dart works fine out of the box. However, when I switch from CanvasRenderer to WebGLRenderer, only the back face of the cube is drawn. (And because it's backface-culled, you have to rotate that to the front first.)
The JS original does not have this problem.

I'm referring to f79e73d since that's the only one I found working with a current Dart SDK.

We should update the gh-pages and README.md to reflect latest demos with javascript generated code on http://threedart.github.com/three.dart/

Hi

The fixes from the following three.js pull request need implementing in the Dart version:

mrdoob/three.js#3485

Particularly the "Switching to domElement coordinates" issue, since at the moment it doesn't work properly if not using the full browser window size for the Three scene. The following change to handleResize seems to fix this particular issue:

   handleResize () { 
      Rect rect = domElement.getBoundingClientRect();
      screen
      ..width = rect.width
      ..height = rect.height
      ..offsetLeft = rect.left
      ..offsetTop = rect.top;      

      radius = ( screen.width + screen.height ) / 4;
    }

The other webgl samples have seem to break after 7d7c5d5 That was the last commit before Added MorphTarget d451be0

Hi, first off: thanks for porting this great library.

I implemented it in one of my projects today (using the latest branch) and got it working pretty quickly. I'm now wondering:

1. How far is your shader support? I'd like to use the Blinn-Phong shader.
2. is it a temporary bug that the JS version is not yet working? I get the error Uncaught TypeError: Object #<Vector4> has no method 'get$_r' when trying to use the JS version.

Thanks again!

Hello

I am getting the following GL ERROR when rendering a very simple scene:

.WebGLRenderingContext: GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 0

The init code for my scene just creates a Line object consisting of 3 line pieces (6 vertices) and a Mesh object created from a CylinderGeometry. If I omit adding either the Line or the Mesh to the scene, the error disappears. However, when rendering both objects I get the error for every frame.

// init the scene
init(){

  renderer = new WebGLRenderer(antialias: true);

  renderer.setClearColorHex( 0xffffff, 1 );

  // create a scene
  scene = new Scene();

  // put a camera in the scene
  camera = new PerspectiveCamera(70.0, window.innerWidth / window.innerHeight, 1.0, 10000.0 );
  camera.position.setValues(0.0, 2.0, 14.0);
  scene.add(camera);

  // create a camera contol
  cameraControls  = new TrackballControls(camera);

  Geometry linegeometry = new Geometry();    

  linegeometry.vertices.add(new Vector3(-10.0, 0.0, 0.0));    
  linegeometry.vertices.add(new Vector3(10.0, 0.0, 0.0));

  linegeometry.vertices.add(new Vector3(0.0, -10.0, 0.0));    
  linegeometry.vertices.add(new Vector3(0.0, 10.0, 0.0));

  linegeometry.vertices.add(new Vector3(0.0, 0.0, -10.0));    
  linegeometry.vertices.add(new Vector3(0.0, 0.0, 10.0));

  Line line = new Line(linegeometry, new LineBasicMaterial(color: 0x000000), LinePieces);

  scene.add(line);  

  CylinderGeometry arrowgeometry = new CylinderGeometry(0.4, 0.0, 0.7, 16, 1);

  // x-axis
  Mesh arrow = new Mesh(arrowgeometry, new MeshBasicMaterial(color: 0xff0000));
  arrow.position.x = 10.0;
  arrow.rotation.z = -Math.PI / 2.0;
  scene.add(arrow);
}

Is there anything I'm doing obviously wrong or is this likely to be a bug?

Thanks.

I have been trying to get Point/Directional lights working as I would expect. I haven't had much luck so I have compared it to the JS version which does give the expected behaviour. I have basically just setup a point light that should move around with the camera. However, in the Dart version it doesn't seem to light the scene correctly. Here is the essential code from the two versions:

Dart:

var scene, renderer;
var camera, cameraControls;

// init the scene
init(){

  Element canvas = new Element.tag("canvas");          

  renderer = new WebGLRenderer(antialias: true);  
  renderer.setClearColorHex(0xffffff, 1.0);

  // This sets the canvas width/height as well as the viewport
  renderer.setSize(window.innerWidth, window.innerHeight );  
  document.body.append(renderer.domElement); 

  camera = new PerspectiveCamera(70.0, window.innerWidth / window.innerHeight, 1.0, 1000.0);

  camera.position.x = 302.0113830566406; 
  camera.position.y = -359.92315673828125;
  camera.position.z = 171.01007080078125;

  camera.up.x = -0.20658795535564423;
  camera.up.y = 0.24620194733142853;
  camera.up.z = 0.8830221891403198;

  camera.lookAt(new Vector3(0.0, 0.0, 0.0));

  scene = new Scene();

  PointLight pointlight = new PointLight(0xffffff, intensity: 1, distance: 0);
  pointlight.position.setValues(0.0, 0.0, 0.0);
  camera.add(pointlight);

  scene.add(camera);

  var geometry = new CubeGeometry(200.0, 200.0, 200.0);

  MeshPhongMaterial material  = new MeshPhongMaterial(
      ambient   : 0x444444,
      color   : 0xff0000,
      shininess : 300,
      specular  : 0xffffff,
      shading   : SmoothShading,
      reflectivity: 100
  );

  var cubemesh = new Mesh(geometry, material);
  scene.add(cubemesh);

  cameraControls = new TrackballControls(camera, renderer.domElement);

  cameraControls.rotateSpeed = 1.0;
  cameraControls.zoomSpeed = 1.2;
  cameraControls.panSpeed = 0.8;

  cameraControls.noZoom = false;
  cameraControls.noPan = false;

  cameraControls.staticMoving = true;
  cameraControls.dynamicDampingFactor = 0.3;
}

// animation loop
animate(time) {
  window.requestAnimationFrame( animate );
  render();
}

// render the scene
render() {
  // update camera controls
  cameraControls.update();
  // actually render the scene
  renderer.render( scene, camera );
}

void main() {
  init();
  animate(0);
}

Javascript:

var camera, scene, renderer, controls;
var mesh;

init();
animate();

function init() {

  renderer = new THREE.WebGLRenderer({ clearColor: 0xffffff, clearAlpha: 1, antialias: true });
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );

  camera.position.x = 302.0113830566406; 
  camera.position.y = -359.92315673828125;
  camera.position.z = 171.01007080078125;

  camera.up.x = -0.20658795535564423;
  camera.up.y = 0.24620194733142853;
  camera.up.z = 0.8830221891403198;

  camera.lookAt(new THREE.Vector3(0, 0, 0));

  scene = new THREE.Scene();

  var light = new THREE.PointLight(0xffffff, 1, 0);
  light.position.set(0, 0, 0);
  camera.add(light);

  scene.add(camera);

  var geometry = new THREE.CubeGeometry( 200, 200, 200 );

  var material = new THREE.MeshPhongMaterial({
    ambient   : 0x444444,
    color   : 0xff0000,
    shininess : 300,
    specular  : 0xffffff,
    shading: THREE.SmoothShading,
    reflectivity: 100
  });

  mesh = new THREE.Mesh( geometry, material );
  scene.add(mesh);

  controls = new THREE.TrackballControls(this.camera, this.renderer.domElement);
  controls.rotateSpeed = 1;
  controls.zoomSpeed = 1.2;
  controls.panSpeed = 1;

  controls.noZoom = false;
  controls.noPan = false;

  controls.staticMoving = true;
  controls.dynamicDampingFactor = 0.3;
}

function animate() {

  requestAnimationFrame( animate );
  controls.update();
  renderer.render( scene, camera );
}

This should be trivial to fix

Suggestions:
* The name of "lib/extras/core/ArcCurve.dart", "ArcCurve", should be lower-case. Maybe use "arc_curve"?
* The name of "lib/extras/core/ClosedSplineCurve3.dart", "ClosedSplineCurve3", should be lower-case. Maybe use "closed_spline_curve3"?
* The name of "lib/extras/core/CubicBezierCurve.dart", "CubicBezierCurve", should be lower-case. Maybe use "cubic_bezier_curve"?
* The name of "lib/extras/core/CubicBezierCurve3.dart", "CubicBezierCurve3", should be lower-case. Maybe use "cubic_bezier_curve3"?
* The name of "lib/extras/core/Curve.dart", "Curve", should be lower-case. Maybe use "curve"?
* The name of "lib/extras/core/CurvePath.dart", "CurvePath", should be lower-case. Maybe use "curve_path"?
* The name of "lib/extras/core/EllipseCurve.dart", "EllipseCurve", should be lower-case. Maybe use "ellipse_curve"?
* The name of "lib/extras/core/Gyroscope.dart", "Gyroscope", should be lower-case. Maybe use "gyroscope"?
* The name of "lib/extras/core/LineCurve.dart", "LineCurve", should be lower-case. Maybe use "line_curve"?
* The name of "lib/extras/core/LineCurve3.dart", "LineCurve3", should be lower-case. Maybe use "line_curve3"?
* The name of "lib/extras/core/Path.dart", "Path", should be lower-case. Maybe use "path"?
* The name of "lib/extras/core/QuadraticBezierCurve.dart", "QuadraticBezierCurve", should be lower-case. Maybe use "quadratic_bezier_curve"?
* The name of "lib/extras/core/QuadraticBezierCurve3.dart", "QuadraticBezierCurve3", should be lower-case. Maybe use "quadratic_bezier_curve3"?
* The name of "lib/extras/core/Shape.dart", "Shape", should be lower-case. Maybe use "shape"?
* The name of "lib/extras/core/SplineCurve.dart", "SplineCurve", should be lower-case. Maybe use "spline_curve"?
* The name of "lib/extras/core/SplineCurve3.dart", "SplineCurve3", should be lower-case. Maybe use "spline_curve3"?
* The name of "lib/extras/geometries/CircleGeometry.dart", "CircleGeometry", should be lower-case. Maybe use "circle_geometry"?
* The name of "lib/extras/geometries/ConvexGeometry.dart", "ConvexGeometry", should be lower-case. Maybe use "convex_geometry"?
* The name of "lib/extras/geometries/CubeGeometry.dart", "CubeGeometry", should be lower-case. Maybe use "cube_geometry"?
* The name of "lib/extras/geometries/CylinderGeometry.dart", "CylinderGeometry", should be lower-case. Maybe use "cylinder_geometry"?
* The name of "lib/extras/geometries/ExtrudeGeometry.dart", "ExtrudeGeometry", should be lower-case. Maybe use "extrude_geometry"?
* The name of "lib/extras/geometries/IcosahedronGeometry.dart", "IcosahedronGeometry", should be lower-case. Maybe use "icosahedron_geometry"?
* The name of "lib/extras/geometries/LatheGeometry.dart", "LatheGeometry", should be lower-case. Maybe use "lathe_geometry"?
* The name of "lib/extras/geometries/OctahedronGeometry.dart", "OctahedronGeometry", should be lower-case. Maybe use "octahedron_geometry"?
* The name of "lib/extras/geometries/ParametricGeometry.dart", "ParametricGeometry", should be lower-case. Maybe use "parametric_geometry"?
* The name of "lib/extras/geometries/PlaneGeometry.dart", "PlaneGeometry", should be lower-case. Maybe use "plane_geometry"?
* The name of "lib/extras/geometries/PolyhedronGeometry.dart", "PolyhedronGeometry", should be lower-case. Maybe use "polyhedron_geometry"?
* The name of "lib/extras/geometries/SphereGeometry.dart", "SphereGeometry", should be lower-case. Maybe use "sphere_geometry"?
* The name of "lib/extras/geometries/TetrahedronGeometry.dart", "TetrahedronGeometry", should be lower-case. Maybe use "tetrahedron_geometry"?
* The name of "lib/extras/geometries/TextGeometry.dart", "TextGeometry", should be lower-case. Maybe use "text_geometry"?
* The name of "lib/extras/geometries/TorusGeometry.dart", "TorusGeometry", should be lower-case. Maybe use "torus_geometry"?
* The name of "lib/extras/geometries/TorusKnotGeometry.dart", "TorusKnotGeometry", should be lower-case. Maybe use "torus_knot_geometry"?
* The name of "lib/extras/geometries/TubeGeometry.dart", "TubeGeometry", should be lower-case. Maybe use "tube_geometry"?
* The name of "lib/extras/helpers/ArrowHelper.dart", "ArrowHelper", should be lower-case. Maybe use "arrow_helper"?
* The name of "lib/extras/helpers/AxisHelper.dart", "AxisHelper", should be lower-case. Maybe use "axis_helper"?
* The name of "lib/extras/helpers/CameraHelper.dart", "CameraHelper", should be lower-case. Maybe use "camera_helper"?
* The name of "lib/extras/objects/ImmediateRenderObject.dart", "ImmediateRenderObject", should be lower-case. Maybe use "immediate_render_object"?
* The name of "lib/extras/objects/LensFlare.dart", "LensFlare", should be lower-case. Maybe use "lens_flare"?
* The name of "lib/extras/renderers/plugins/ShadowMapPlugin.dart", "ShadowMapPlugin", should be lower-case. Maybe use "shadow_map_plugin"?

Package has 39 warnings. Upload anyway (y/n)? y
three 0.2.5 uploaded successfully.

should be changed to client.x and client.y

You must have overlooked the mousemove function in trackball.dart, it's changed elsewhere

Noticing the follow issue.

In JSONLoader.dart, when nUvLayers is zero the following lists are created with zero size.

geometry.faceUvs = new List(nUvLayers);
geometry.faceVertexUvs = new List(nUvLayers);

Later in the WebGLRenderer.dart

obj_uvs  = geometry.faceVertexUvs[ 0 ],
obj_uvs2 = (geometry.faceVertexUvs.length > 1) ? geometry.faceVertexUvs[ 1 ] : null,

will throw

Exception: RangeError: 0
Stack Trace: #0      List.[] (dart:core-patch:1050:3)
#1      WebGLRenderer.setMeshBuffers (http://127.0.0.1:3030/Users/adam/dart/three.dart/example/webgl_performance/packages/three/src/renderers/WebGLRenderer.dart:1631:36)
#2      WebGLRenderer.updateObject (http://127.0.0.1:3030/Users/adam/dart/three.dart/example/webgl_performance/packages/three/src/renderers/WebGLRenderer.dart:4526:21)
#3      WebGLRenderer.initWebGLObjects (http://127.0.0.1:3030/Users/adam/dart/three.dart/example/webgl_performance/packages/three/src/renderers/WebGLRenderer.dart:4315:16)
#4      WebGLRenderer._render (http://127.0.0.1:3030/Users/adam/dart/three.dart/example/webgl_performance/packages/three/src/renderers/WebGLRenderer.dart:3806:44)
#5      WebGLRenderer.render (http://127.0.0.1:3030/Users/adam/dart/three.dart/example/webgl_performance/packages/three/src/renderers/WebGLRenderer.dart:3768:49)
#6      WebGL_Performance.render (http://127.0.0.1:3030/Users/adam/dart/three.dart/example/webgl_performance/WebGL_Performance.dart:118:20)
#7      WebGL_Performance.animate.animate (http://127.0.0.1:3030/Users/adam/dart/three.dart/example/webgl_performance/WebGL_Performance.dart:100:11)

A potential fix could be

obj_uvs  = (geometry.faceVertexUvs.length == 0) ? [] : geometry.faceVertexUvs[ 0 ],
obj_uvs2 = (geometry.faceVertexUvs.length > 1) ? geometry.faceVertexUvs[ 1 ] : null,

@nelsonsilva Once this is patched I'll make a deploy and announcement :)

delete this one

I'm trying to use custom attributes for a ShaderMaterial. However, that seems to be pretty broken,

First of all, we have there (which is not true)

//var attributes; - Moved to Material

but also

Map attributes;

Later, WebGLRenderer tries to "extend (JS-style)"

originalAttribute.needsUpdate

which cannot work, of course. Also, things like

material.attributes.forEach((a) {

are in the code, which also do not "compile". So it partly looks like JavaScript still.

I could try to fix that myself, but could anybody give me a hint about the right approach? What type should attributes have? In case we stick with map, what type should the values have? Do we need a new wrapper type for that?

Ran into a strange issue today. Bascially I am trying to draw lots of small spheres that are surrounded by a slightly larger partially transparent sphere. See below image:

This seems to work OK for a small number of spheres (< 17 on my machine). However, if the number of spheres is increased, I seem to get issues with the transparent spheres. They seem to either not be transparent at all or they flick between having transparency and not on each frame.

I have put together a small example at:
https://github.com/markhats/three.dart_examples/tree/master/examples/webgl_transparency

At it is at the moment, you can see the transparency flickering on some of the spheres. If you change NUM_SPHERES (line 6) from 50 to say 10, the flickering disappears.

Thought it would be pretty straight forward, but apparently I'm getting this error:

Breaking on exception: Class '_LinkedHashMap' has no instance getter 'position'.

Here is my code

import 'dart:html';
import 'dart:math' as Math;
import 'package:three/three.dart';
import 'package:vector_math/vector_math.dart';

class Webgl_Buffergeometry_Particles  {
  var container, camera, scene, renderer;

  var particleSystem;

  var rnd = new Math.Random();

  void run() {
    init();
    animate(0);
  }

  void init() {

    container = document.query( '#container' );

    camera = new PerspectiveCamera( 27.0, window.innerWidth / window.innerHeight, 5.0, 3500.0 )
    ..position.z = 2750.0;

    scene = new Scene()
    ..fog = new FogLinear(0x050505, 2000.0, 3500.0);

    var particles =  500000;

    var positions = new GeometryAttribute.float32(particles * 3, 3);
    var colors     = new GeometryAttribute.float32(particles * 3, 3);

    var geometry = new BufferGeometry();
    geometry.attributes = {
       "position" : positions,
       "color"    : colors
    };

    var color = new Color();

    var n = 1000, n2 = n / 2; // particles spread in the cube

    for ( var i = 0; i < positions.array.length; i += 3 ) {

      // positions
      var x = rnd.nextDouble() * n - n2;
      var y = rnd.nextDouble() * n - n2;
      var z = rnd.nextDouble() * n - n2;

      positions.array[ i     ] = x;
      positions.array[ i + 1 ] = y;
      positions.array[ i + 2 ] = z;

      // colors
      var vx = ( x / n ) + 0.5;
      var vy = ( y / n ) + 0.5;
      var vz = ( z / n ) + 0.5;

      color.setRGB( vx, vy, vz );

      colors.array[ i ]     = color.r;
      colors.array[ i + 1 ] = color.g;
      colors.array[ i + 2 ] = color.b;
    }

    geometry.computeBoundingSphere();
    var material = new ParticleBasicMaterial( size: 15, vertexColors: 2 );

    particleSystem = new ParticleSystem( geometry, material );
    scene.add( particleSystem );

    renderer = new WebGLRenderer()
    ..setClearColor(scene.fog.color, 1)
    ..setSize( window.innerWidth, window.innerHeight );

    container.children.add( renderer.domElement );

    window.onResize.listen( onWindowResize );
  }

  onWindowResize(event) {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );
  }


  animate(num time) {
    window.requestAnimationFrame( animate );
    render();
  }

  render() {
    var time = new DateTime.now().millisecondsSinceEpoch * 0.01;

    particleSystem.rotation.x = time * 0.25;
    particleSystem.rotation.y = time * 0.5;

    renderer.render( scene, camera );
  }
}

void main() {
  new Webgl_Buffergeometry_Particles().run();
}

Is this an error or am I missing something? Anyways, hope you find some time soon to update three.dart to the latest revision and get some more examples up and running :)

Hi I'm new using three.dart and test a few days ago I got a few, but now do not work.
Can be due to the new version the Dart to use?
Dart Editor version 0.4.0_r18915
Dart SDK version 0.4.0.0_r18915

Error:
Class 'CubeGeometry' has no instance getter 'Strings'.

NoSuchMethodError : method not found: 'Strings'
Receiver: Instance of 'CubeGeometry'
Arguments: []

Break at: dart:core-patch
Line: noSuchMethod(InvocationMirror invocation) {

While pub is in motion we should fix the following comments and republish.

• Please put part files (e.g. lib/extras/core/, lib/extras/helpers/, etc) in "lib/src". Only libraries that are meant to be directly imported by users should be in "lib" outside of "lib/src".
• According to the package layout guidelines, "tools" should be called "tool".

http://code.google.com/p/dart/issues/detail?id=7212

ThreeJS format use RRGGBB format for color and Three Dart I think use BBGGRR , so you get incorrect colors and need manual change the js model materials.

It's changed.

On the webgl renderer if we remove a mesh from the scene and add it again. It will not show again.
This is just a problem on the webgl renderer. It's working fine on Canvas renderer.

This is just a FYI. I'll try to fix and make a pull request.

Some notable changes are:

• Adding of hop runner. tested on here https://drone.io/github.com/threeDart/three.dart/41
• Bug fixes for dart-sdk version 0.5.0.1_r21823
• Adding Quaternion rotationBetween method

The WebGL_Custom_Attributes_Particles example sent by @br4ge in #110 which uses a particle system and custom attributes is not working as expected.

Just noticed this one. When using the CanvasRender and the geometry has no face vertex uvs, a RangeError occurs in projectScene (Projector.dart). This seems to be due to the following code:

cl = faceVertexUvs.length;
for ( c = 0; c < cl; c ++ ) {
   List<UV> uvs = faceVertexUvs[ c ][ f ];

   if ( uvs == null ) continue;

   //TODO: interpreting this code as dynamically creating arrays.
   ul = uvs.length;
   for ( u = 0; u < ul; u ++ ) {
      List faceUVs = _face.uvs[c];
      faceUVs.add(uvs[u]);
      //_face.uvs[ c ][ u ] = uvs[ u ];
   }
}

The problem is that faceVertexUvs is a list of a lists. When there are no uvs, there is still an empty list contained within the outer list. Thus faceVertexUvs.length will be 1. However, the List<UV> uvs = faceVertexUvs[ c ][ f ]; will try to access an element of the empty list.

It can be fixed by adding if ( faceVertexUvs[c].length == 0 ) continue; at the top of the loop or by putting a condtion on the whole loop.

tried to port another example, with little success..

Am I doing something wrong here?

import 'dart:html';
import 'dart:math' as Math;
import 'package:vector_math/vector_math.dart';
import 'package:three/three.dart';
import 'package:three/extras/image_utils.dart' as ImageUtils;

class WebGL_Custom_Attributes_Particles  {
  var container, camera, scene, renderer, sphere;
  var uniforms, amplitude, color;
  var attributes, size, customColor;

  var rnd = new Math.Random();

  final vertexShader = 
"""
uniform float amplitude;
attribute float size;
attribute vec3 customColor;

varying vec3 vColor;

void main() {

  vColor = customColor;

  vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );

  //gl_PointSize = size;
  gl_PointSize = size * ( 300.0 / length( mvPosition.xyz ) );

  gl_Position = projectionMatrix * mvPosition;

}
""";

  final fragmentShader = 
""" 
uniform vec3 color;
uniform sampler2D texture;

varying vec3 vColor;

void main() {

  gl_FragColor = vec4( color * vColor, 1.0 );
  gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );

}
""";


  void run() {
    init();
    animate(0);
  }

  void init() {

    container = new Element.tag('div');
    document.body.nodes.add( container );

    camera = new PerspectiveCamera( 40.0, window.innerWidth / window.innerHeight, 1.0, 10000.00 )
    ..position.y = 300.0;

    scene = new Scene();

    size = new Attribute.float();
    customColor = new Attribute.color();

    attributes = { "size"        : size,
                   "customColor" : customColor };

    amplitude = new Uniform.float(1.0);
    color = new Uniform.color(0xffffff);

    uniforms = { "amplitude" : amplitude,
                 "color"     : color,
                 "texture"   : ImageUtils.loadTexture("threejs.org/examples/textures/sprites/spark1.png") };

    var shaderMaterial = new ShaderMaterial(uniforms:       uniforms,
                                            attributes:     attributes,
                                            vertexShader:   vertexShader,
                                            fragmentShader: fragmentShader,
                                            blending:       AdditiveBlending,
                                            depthTest:      false,
                                            transparent:    true);



    var radius = 200.0;
    var geometry = new Geometry();

    for ( var i = 0; i < 100000; i++ ) {

      var vertex = new Vector3.zero();
      vertex.x = rnd.nextDouble() * 2 - 1;
      vertex.y = rnd.nextDouble() * 2 - 1;
      vertex.z = rnd.nextDouble() * 2 - 1;
      vertex.scale(radius);

      geometry.vertices.add( vertex );

    }

    sphere = new ParticleSystem( geometry, shaderMaterial );

    sphere.isDynamic = true;
    //sphere.sortParticles = true;

    var vertices = sphere.geometry.vertices;

    for( var v = 0; v < vertices.length; v++ ) {

      size.value.add(10.0);
      customColor.value.add(new Color( 0xffaa00 ));

      if ( vertices[ v ].x < 0 )
        customColor.value[ v ].setHSL( 0.5 + 0.1 * ( v / vertices.length ), 0.7, 0.5 );
      else
        customColor.value[ v ].setHSL( 0.0 + 0.1 * ( v / vertices.length ), 0.9, 0.5 );

    }

    scene.add( sphere );

    renderer = new WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.sortObjects = false;

    container.nodes.add( renderer.domElement );

    window.onResize.listen(onWindowResize);
  }

  onWindowResize(event) {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );
  }

  animate(num time) {
    window.requestAnimationFrame( animate );
    render();
  }

  render() {

    var time = new DateTime.now().millisecondsSinceEpoch * 0.0001;

    sphere.rotation.z = 0.01 * time;

    for( var i = 0; i < size.value.length; i++ ) {

      size.value[ i ] = 14 + 13 * Math.sin( 0.1 * i + time );

    }

    size.needsUpdate = true;

    renderer.render( scene, camera );

  }

}

void main() {
  new WebGL_Custom_Attributes_Particles().run();
}

I was examining the WebGL_Geometry_Shapes example and a NoSuchMethodError caused by mappedBy. It looks like this was caused by a reversion from mappedBy to map in the Dart SDK which is discussed here:
http://news.dartlang.org/2013/01/breaking-change-mappedby-is-now-map-skip-take-return-iterables.html

It was thrown by the use of mappedBy in this line in the clone method of the GeometryUtils library: cloneGeo.vertices = vertices.mappedBy((vertex) => vertex.clone()).toList();

Class 'List' has no instance method 'mappedBy'.

NoSuchMethodError : method not found: 'mappedBy'
Receiver: GrowableObjectArray
Arguments: [Closure: (dynamic, dynamic) => dynamic]

I am using the latest build of three.dart

from pubspec.yaml:

three:
git:
url: https://github.com/threeDart/three.dart.git
ref: latest
browser: any

http://threedart.github.com/three.dart/example/webgl_performance/WebGL_Performance.html

Chrome console throws the following error.

Uncaught RangeError: value 0 js_array.dart:277
Uncaught RangeError: value 0 

Reported by: Andrew Chatham

I've been playing with three.dart and really like it so far. I've run
into problems trying to remove elements from a scene, though. This
will crash:

scene.add(cube);
renderer.render(scene, camera);
scene.remove(cube);
renderer.render(scene, camera);

I don't follow the code well enough yet to know what the real problem
is, but it's getting a Mesh where it expects a WebGlObject in
WebGLRenderer.removeObject().

User error, or is this a bug? I didn't see remove() used in any of the
examples, so I could be doing it wrong.

I'm trying to use the generateShapes function in font_utils.dart with the following code:

var fontshapes = FontUtils.generateShapes("Hello world");

but get the following exception on the first line of the function:

The null object does not have a method '[]'.

NoSuchMethodError : method not found: '[]'
Receiver: null
Arguments: ["normal"]

The line in question is:

var face = faces[font][weight][style];

faces is decalared as:

Map<String, Map<String, Map<String, FontFace>>> faces = {};

However, the internal Maps don't seem to be initialized anywhere. I'm not really sure how this code is meant to work but I think the issue may be something to do with differences in syntax between Dart and Javascript Maps.

Exception: Unsupported operation: Infinity or NaN toInt
Stack Trace: #0      double.toInt (dart:core-patch:652:3)
#1      WebGLRenderer.painterSort.painterSort (http://127.0.0.1:3030/Users/adam/dart/three.dart/example/shadows/packages/three/src/renderers/WebGLRenderer.dart:3767:43)
#2      Sort.insertionSort_ (dart:_collection-dev:905:34)
#3      Sort._doSort (dart:_collection-dev:894:21)
#4      Sort.sort (dart:_collection-dev:884:12)
#5      IterableMixinWorkaround.sortList (dart:collection:271:14)
#6      List.sort (dart:core-patch:1261:37)
#7      WebGLRenderer._render (http://127.0.0.1:3030/Users/adam/dart/three.dart/example/shadows/packages/three/src/renderers/WebGLRenderer.dart:3882:19)
#8      WebGLRenderer.render (http://127.0.0.1:3030/Users/adam/dart/three.dart/example/shadows/packages/three/src/renderers/WebGLRenderer.dart:3773:49)
#9      render (http://127.0.0.1:3030/Users/adam/dart/three.dart/example/shadows/shadows.dart:142:18)
#10     animate.animate (http://127.0.0.1:3030/Users/adam/dart/three.dart/example/shadows/shadows.dart:115:9)

What should we do if NaN?

    // Sorting
    painterSort ( a, b ) => (b.z - a.z).toInt();
    numericalSort ( a, b ) => (b[ 1 ] - a[ 1 ]).toInt();

a MehsPhongMaterial breaks the rendering with:
NoSuchMethodError : method not found: 'shininess'
Receiver: Instance of 'WebGLMaterial'
Arguments: []
coming from WebGlRenderer.refreshUniformPong
probably because is passed as WebGLMaterial on which the property 'shininess' is not visible (it's hidden into material._material)

I'm using three:, git:, ref: latest, url: https://github.com/threeDart/three.dart.git

Any help?

Looks like Dart M5 killed three.dart.

Looks like the issue has something to do with the change from Float32Array to Float32List.
type 'Float32List' is not a subtype of type 'int' of 'size'.

Using a webgl enabled browser in android none of the examples seem to work
I see no error message just a blank page
Webgl experiments do work in android chrome

Might this be an issue of dart not falling back to js?

Would appreciate a live demo. You could host it on Github itself.

This will speed up three.dart math operations at least 4x, if not more.

https://www.dartlang.org/slides/2013/02/Bringing-SIMD-to-the-Web-via-Dart.pdf

The examples no longer seem to work when compiled to Javascript e.g. web_geometry_cube. I'm getting the following console output when running them:

Not sure why these have stopped working. I'm pretty sure they were OK a couple of weeks ago so maybe it's a recent change in Dart??

ShapeGeometry class contains error in addShape method, to fix it needs to insert "this" into line:
var shapesOffset = vertices.length;
so fixed version will be:
var shapesOffset = this.vertices.length;
Error points to three.dart, but it is another bug and it is bug of dart.
Error looks like "Local variables cannot be referenced before they are declared"

I'm trying to mess around with morphTargets, but I'm having trouble trying to figure out which object im supposed to add to the List geometry.morphTargets.

The Three.js example is just passing a dynamic object with a "name" and "vertices" property.

geometry.morphTargets.push( { name: "target" + i, vertices: vertices } );

It seems however that the object that has to be passed on Three.dart needs a morphTargetBase.

What is the proper way of passing a morphTarget to the morphTargets list?

All the WebGL examples seem to crash Dartium for me with the latest version of Dart (v0.6.3_r24898).

The error given in the Dart Editor is:

Uncaught TypeError: Cannot read property 'length' of undefined

There is no line number or anything given and the debugger doesn't break on the error so it's pretty hard to work out what has happened. Does anyone else get this behaviour?