Remove face4

example/web_gl_custom_attributes_lines/web_gl_custom_attributes_lines.dart

@@ -12,13 +12,13 @@ var uniforms, amplitude, opacity, color;
 var attributes, displacement, customColor;
 
 var text = "three.dart",
-    height = 15.0,
+    height = 15,
     size = 50,
 
     curveSegments = 10,
     steps = 40,
 
-    bevelThickness = 5,
+    bevelThickness = 5.0,
     bevelSize = 1.5,
     bevelSegments = 10,
     bevelEnabled = true,
@@ -88,7 +88,6 @@ void init() {
       curveSegments,
       1,
       null,
-      null,
       0,
       1,
       size,

example/web_gl_geometries/web_gl_geometries.dart

@@ -1,135 +1,107 @@
+/*
+ * Based on r70
+ */
+
 import 'dart:html';
 import 'dart:math' as Math;
-import 'package:vector_math/vector_math.dart';
 import 'package:three/three.dart';
+import 'package:vector_math/vector_math.dart';
 import 'package:three/extras/image_utils.dart' as ImageUtils;
-import 'package:three/extras/scene_utils.dart' as SceneUtils;
-
-Element container;
 
+DivElement container;
+WebGLRenderer renderer;
 PerspectiveCamera camera;
 Scene scene;
-WebGLRenderer renderer;
-
 
 void main() {
   init();
   animate(0);
 }
 
 void init() {
+  container = new DivElement();
+  document.body.append(container);
 
-  container = new Element.tag('div');
-  document.body.nodes.add(container);
-
-  camera = new PerspectiveCamera(45.0, window.innerWidth / window.innerHeight, 1.0, 2000.00);
-  camera.position.y = 400.0;
-
+  camera = new PerspectiveCamera(45.0, window.innerWidth / window.innerHeight, 1.0, 2000.0)
+    ..position.y = 400.0;
+
   scene = new Scene();
-
-  scene.add(new AmbientLight(0x404040));
-
-  var light = new DirectionalLight(0xffffff);
-  light.position.setValues(0.0, 1.0, 0.0);
-  scene.add(light);
-
-  Texture map = ImageUtils.loadTexture('textures/ash_uvgrid01.jpg');
+
+  var map = ImageUtils.loadTexture('UV_Grid_Sm.jpg');
   map.wrapS = map.wrapT = RepeatWrapping;
   map.anisotropy = 16;
 
-  var materials = [
-      new MeshLambertMaterial(ambient: 0xbbbbbb, map: map, side: DoubleSide),
-      new MeshBasicMaterial(color: 0xffffff, wireframe: true, transparent: true, opacity: 0.1, side: DoubleSide)];
-
-  var object = SceneUtils.createMultiMaterialObject(new CubeGeometry(100.0, 100.0, 100.0, 4, 4, 4), materials);
-  object.position.setValues(-200.0, 0.0, 400.0);
-  scene.add(object);
-
-
-  object = SceneUtils.createMultiMaterialObject(new CylinderGeometry(25.0, 75.0, 100.0, 40, 5), materials);
-  object.position.setValues(0.0, 0.0, 400.0);
-  scene.add(object);
-
-  object = SceneUtils.createMultiMaterialObject(new IcosahedronGeometry(75.0, 1), materials);
-  object.position.setValues(-200.0, 0.0, 200.0);
-  scene.add(object);
-
-  object = SceneUtils.createMultiMaterialObject(new OctahedronGeometry(75.0, 2), materials);
-  object.position.setValues(0.0, 0.0, 200.0);
-  scene.add(object);
-
-
-  object = SceneUtils.createMultiMaterialObject(new TetrahedronGeometry(75.0, 0), materials);
-  object.position.setValues(200.0, 0.0, 200.0);
-  scene.add(object);
-
-  object = SceneUtils.createMultiMaterialObject(new PlaneGeometry(100.0, 100.0, 4, 4), materials);
-  object.position.setValues(-200.0, 0.0, 0.0);
-  scene.add(object);
-
-  var object2 = SceneUtils.createMultiMaterialObject(new CircleGeometry(50, 10, 0, Math.PI), materials);
-  object2.rotation.x = Math.PI / 2;
-  object.add(object2);
-
-  object = SceneUtils.createMultiMaterialObject(new SphereGeometry(75.0, 20, 10), materials);
-  object.position.setValues(0.0, 0.0, 0.0);
-  scene.add(object);
-
-
-  var points = [];
-
-  for (var i = 0; i < 50; i++) {
-
-    points.add(new Vector3(Math.sin(i * 0.2) * 15.0 + 50.0, 0.0, (i - 5) * 2.0));
-
-  }
-
-  object = SceneUtils.createMultiMaterialObject(new LatheGeometry(points, 20), materials);
-  object.position.setValues(200.0, 0.0, 0.0);
-  scene.add(object);
-
-  object = SceneUtils.createMultiMaterialObject(new TorusGeometry(50, 20, 20, 20), materials);
-  object.position.setValues(-200.0, 0.0, -200.0);
-  scene.add(object);
-
-  object = SceneUtils.createMultiMaterialObject(new TorusKnotGeometry(50.0, 10.0, 50, 20), materials);
-  object.position.setValues(0.0, 0.0, -200.0);
-  scene.add(object);
-
-  object = new AxisHelper();
-  object.position.setValues(200.0, 0.0, -200.0);
-  object.scale.x = object.scale.y = object.scale.z = 0.5;
-  scene.add(object);
-
-
-  object = new ArrowHelper(new Vector3(0.0, 1.0, 0.0), new Vector3.zero(), 50.0);
-  object.position.setValues(200.0, 0.0, 400.0);
-  scene.add(object);
-
-  renderer = new WebGLRenderer(); // TODO - {antialias: true}
-  renderer.setSize(window.innerWidth, window.innerHeight);
-  renderer.sortObjects = false;
-
-  container.nodes.add(renderer.domElement);
-
+  var material = new MeshLambertMaterial(ambient: 0xbbbbbb, map: map, side: DoubleSide);
+
+  scene.add(new Mesh(new SphereGeometry(75.0, 20, 10), material)
+    ..position.setValues(-400.0, 0.0, 200.0));
+
+  scene.add(new Mesh(new IcosahedronGeometry(75.0, 1), material)
+    ..position.setValues(-200.0, 0.0, 200.0));
+
+  scene.add(new Mesh(new OctahedronGeometry(75.0, 2), material)
+    ..position.setValues(0.0, 0.0, 200.0));
+
+  scene.add(new Mesh(new TetrahedronGeometry(75.0, 0), material)
+    ..position.setValues(200.0, 0.0, 200.0));
+
+  scene.add(new Mesh(new PlaneGeometry(100.0, 100.0, 4, 4), material)
+    ..position.setValues(-400.0, 0.0, 0.0));
+
+  scene.add(new Mesh(new CubeGeometry(100.0, 100.0, 100.0, 4, 4, 4), material)
+    ..position.setValues(-200.0, 0.0, 0.0));
+
+  scene.add(new Mesh(new CircleGeometry(50.0, 20, 0.0, Math.PI * 2), material)
+    ..position.setValues(0.0, 0.0, 0.0));
+
+  scene.add(new Mesh(new RingGeometry(10.0, 50.0, 20, 5, 0.0, Math.PI * 2), material)
+    ..position.setValues(200.0, 0.0, 0.0));
+
+  scene.add(new Mesh(new CylinderGeometry(25.0, 75.0, 100.0, 40, 5), material)
+    ..position.setValues(400.0, 0.0, 0.0));
+
+  var points = new List.generate(50, (i) => 
+      new Vector3(Math.sin(i * 0.2) * Math.sin(i * 0.1) * 15 + 50, 0.0, (i - 5) * 2.0));
+
+  scene.add(new Mesh(new LatheGeometry(points, 20), material)
+    ..position.setValues(-400.0, 0.0, -200.0));
+
+  scene.add(new Mesh(new TorusGeometry(50.0, 20.0, 20, 20), material)
+    ..position.setValues(-200.0, 0.0, -200.0));
+
+  scene.add(new Mesh(new TorusKnotGeometry(50.0, 10.0, 50, 20), material)
+    ..position.setValues(0.0, 0.0, -200.0));
+
+  scene.add(new DirectionalLight(0xffffff)
+    ..position.setValues(0.0, 1.0, 0.0));
+
+  scene.add(new AmbientLight(0x404040));
+
+  //scene.add(new AxisHelper(50.0)..position.setValues(200.0, 0.0, -200.0));
+
+  scene.add(new ArrowHelper(new Vector3(0.0, 1.0, 0.0), new Vector3.zero(), 50.0)
+    ..position.setValues(400.0, 0.0, -200.0));
+
+  renderer = new WebGLRenderer()
+    ..setSize(window.innerWidth, window.innerHeight);
+  container.append(renderer.domElement);
+
   window.onResize.listen(onWindowResize);
 }
 
-onWindowResize(event) {
-
+void onWindowResize(Event e) {
   camera.aspect = window.innerWidth / window.innerHeight;
   camera.updateProjectionMatrix();
 
   renderer.setSize(window.innerWidth, window.innerHeight);
 }
 
-animate(num time) {
+void animate(num time) {
   window.requestAnimationFrame(animate);
   render();
 }
 
-render() {
-
+void render() {
   var timer = new DateTime.now().millisecondsSinceEpoch * 0.0001;
 
   camera.position.x = Math.cos(timer) * 800.0;
@@ -141,7 +113,6 @@ render() {
     object.rotation.x = timer * 5.0;
     object.rotation.y = timer * 2.5;
   });
-
+  
   renderer.render(scene, camera);
-
-}
+}

example/web_gl_geometries2/webgl_geometries2.dart

@@ -0,0 +1,109 @@
+/*
+ * Based on r70
+ */
+
+import 'dart:html';
+import 'dart:math' as Math;
+import 'package:three/three.dart';
+import 'package:vector_math/vector_math.dart';
+import 'package:three/extras/image_utils.dart' as ImageUtils;
+import 'package:three/extras/scene_utils.dart' as SceneUtils;
+import 'package:three/extras/curve_extras.dart' as Curves;
+
+DivElement container;
+WebGLRenderer renderer;
+PerspectiveCamera camera;
+Scene scene;
+
+void main() {
+  init();
+  animate(0);
+}
+
+void init() {
+  container = new DivElement();
+  document.body.append(container);
+
+  camera = new PerspectiveCamera(45.0, window.innerWidth / window.innerHeight, 1.0, 2000.0)
+    ..position.y = 400.0;
+
+  scene = new Scene();
+
+  var map = ImageUtils.loadTexture('UV_Grid_Sm.jpg');
+  map.wrapS = map.wrapT = RepeatWrapping;
+  map.anisotropy = 16;
+
+  var materials = 
+      [new MeshLambertMaterial(ambient: 0xbbbbbb, map: map, side: DoubleSide),
+       new MeshBasicMaterial(color: 0xffffff, wireframe: true, transparent: true, opacity: 0.1, side: DoubleSide)];
+
+  var torus2 = new ParametricGeometry.torusKnot(radius: 150.0, tube: 10.0, 
+      segmentsR: 50, segmentsT: 20, p: 2.0 , q: 3.0, heightScale: 1.0);
+
+  var sphere2 = new ParametricGeometry.sphere(75.0, 20, 10);
+  var tube2 = new ParametricGeometry.tube(new Curves.GrannyKnot(), segments: 150, radius: 2.0, closed: true);
+
+  scene.add(SceneUtils.createMultiMaterialObject(new ParametricGeometry.klein(20, 20), materials)
+     ..position.setZero()
+     ..scale.scale(10.0));
+
+   scene.add(SceneUtils.createMultiMaterialObject(new ParametricGeometry.mobius(20, 20), materials)
+     ..position.setValues(10.0, 0.0, 0.0)
+     ..scale.scale(100.0));
+
+   scene.add(SceneUtils.createMultiMaterialObject(new ParametricGeometry.plane(200.0, 200.0, 10, 20), materials));
+
+   scene.add(SceneUtils.createMultiMaterialObject(torus2, materials)
+     ..position.setValues(0.0, 100.0, 0.0));
+
+   scene.add(SceneUtils.createMultiMaterialObject(sphere2, materials)
+     ..position.setValues(200.0, 0.0, 0.0));
+
+   scene.add(SceneUtils.createMultiMaterialObject(tube2, materials)
+     ..position.setValues(100.0, 0.0, 0.0));
+
+   scene.add(new AxisHelper(50.0)..position.setValues(200.0, 0.0, -200.0));
+
+   scene.add(new ArrowHelper(new Vector3(0.0, 1.0, 0.0), new Vector3.zero(), 50.0)
+     ..position.setValues(200.0, 0.0, 400.0));
+
+   scene.add(new AmbientLight(0x404040));
+
+   scene.add(new DirectionalLight(0xffffff)
+     ..position = new Vector3(0.0, 0.0, 1.0));
+
+  renderer = new WebGLRenderer()
+    ..setSize(window.innerWidth, window.innerHeight);
+
+  container.append(renderer.domElement);
+
+  window.onResize.listen(onWindowResize);
+}
+
+void onWindowResize(Event e) {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+
+  renderer.setSize(window.innerWidth, window.innerHeight);
+}
+
+void animate(num time) {
+  window.requestAnimationFrame(animate);
+  render();
+}
+
+void render() {
+  var timer = new DateTime.now().millisecondsSinceEpoch * 0.0001;
+
+  camera.position.x = Math.cos(timer) * 800.0;
+  camera.position.z = Math.sin(timer) * 800.0;
+
+  camera.lookAt(scene.position);
+
+  scene.children.forEach((object) {
+    object.rotation.x = timer * 5.0;
+    object.rotation.y = timer * 2.5;
+  });
+
+  renderer.render(scene, camera);
+}

example/web_gl_geometries2/webgl_geometries2.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>three.dart webgl - geometries</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+    <style>
+      body {
+        font-family: Monospace;
+        background-color: #000;
+        margin: 0px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>   
+    <script type="application/dart" src="webgl_geometries2.dart"></script>
+    <script src="packages/browser/dart.js"></script>
+  </body>
+</html>