使用Three.dart创建双面平面。运行时浏览器上不显示任何内容

时间:2014-06-02 18:42:05

标签: dart webgl dart-editor

这里的新手总数。当我从Dart编辑器运行它时,浏览器打开,加载一段时间,然后显示一个空页面。我做错了什么?如何使用three.dart创建几何平面?

这里是.dart文件。抱歉格式不佳。

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

Element container;
PerspectiveCamera camera;
Scene scene;
WebGLRenderer renderer;

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

void init() {
     container = new Element.tag('canvas');
     document.body.nodes.add(container);

     camera = new PerspectiveCamera(45.0, window.innerWidth / window.innerHeight, 1.0, 2000.00);
     camera.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);

     var geometry = new PlaneGeometry(5, 20);
     var material = new MeshBasicMaterial(color: 0xffff00, side: DoubleSide);
     var plane = new Mesh(geometry, material);
     scene.add(plane);

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

onWindowResize(event) {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

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

render() {
    camera.lookAt(scene.position);
    renderer.render(scene, camera);
}

1 个答案:

答案 0 :(得分:0)

你的代码有多处错误(坦率地说 - 它完全搞砸了)。 You can get working example here.同时检查浏览器的控制台日志。如果你有The built-in library 'dart:json' is not available on Dartium.,那么你有旧的.dart版本。确保pubspec.yaml具有正确的依赖关系:

dependencies:
  browser: any
  vector_math: any
  three: ">=0.2.5+1 <0.3.0"