1

I make a rotating box, and it's working properly. Then I change the material code to a wireframe material with a linebasicmaterial. I read the three.js documentation and follow examples. but it doesn't show anything. just plain white. I already change the color hex, since the default was white.

this is the js fiddle example http://jsfiddle.net/wick3dsono/tXgcD/

  // revolutions per second
  var angularSpeed = 0.2; 
  var lastTime = 0;

  // this function is executed on each animation frame
  function animate(){
    // update
    var time = (new Date()).getTime();
    var timeDiff = time - lastTime;
    var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
    cube.rotation.y += angleChange;
    lastTime = time;

    // render
    renderer.render(scene, camera);

    // request new frame
    requestAnimationFrame(function(){
        animate();
    });
  }

  // renderer
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // camera
  var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 500;

  // scene
  var scene = new THREE.Scene();

  // material
  var mat = new THREE.LineaBasicMaterial({color: 0x00aeef});

  // primary cube (little one)
  var cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200), mat);
  cube.overdraw = true;
  cube.rotation.x = Math.PI * 0.1;
  scene.add(cube);

  // secondary cube (big one)
  //var cube_big = new THREE.Mesh(new THREE.CubeGeometry(200,200,200), mat);
  //cube_big.overdraw = true;
  //cube_big.rotation.x = Math.PI * 0.1;
  //scene.add(cube_big);

  // add subtle ambient lighting
  var ambientLight = new THREE.AmbientLight(0xbbbbbb);
  scene.add(ambientLight);

  // directional lighting
  var directionalLight = new THREE.DirectionalLight(0xffffff);
  directionalLight.position.set(1, 1, 1).normalize();
  scene.add(directionalLight);

  // start animation
  animate();

anyway, I'm new with js fiddle too, so maybe there was a mistake when i put the code on js fiddle. I just copy paste from my code editor, erasing the html and head tag, and copy the script to the js field. on my code editor, i just put it together on one html file.

4

1 回答 1

2

您可以使用带有选项的 MeshBasicMaterial 或 MeshLambert 材质:wireframe: true

于 2013-07-21T19:38:49.377 回答