Question

当我的代码运行时，我看不到任何在场景中绘制的内容。没有错误，但我没有看到绘制三个ArrowHelper成员。

但是，如果我在draw（）函数中创建3个局部ArrowHelper变量并将其添加到场景中，它就可以工作。

每次使用上面的代码调用render时，都会绘制ArrowHelper。我不想使用该版本的原因是因为我认为它是在每次渲染调用时向场景添加新的网格物体。我宁愿只添加一个网格然后更改它。

我有一个Frame的常用函数，它返回一个新的Frame实例。我使用该常用函数来实例化变量A.

有人能解释我的第一种方法出了什么问题吗？（欢迎任何其他信息，建议等）

我的源代码是：

main.js：

var init=false;
var scene, camera, controls, renderer;

var A;


function initScene()
{

  // Create scene and camera
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
  camera.position.z = 5;

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

  // Create controls object for mouse control of the scene
  controls = new THREE.OrbitControls( camera, renderer.domElement );


  A = Frame.common.unit();
  A.draw();

  // Set init flag
  init = true;

  // Call render
  render();
}



function render() 
{
  if(!init)
  {
    console.log("Calling initScene");
    initScene();
  }

  // Request frame and call controls.update()
  requestAnimationFrame(render);
  controls.update(); 

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

frame.js：

var Frame = function(p, i, j, k) 
{
  console.log("Frame instance created");
  this.p = p;
  this.i = i;
  this.j = j;
  this.k = k;

  this.i_arrow = new THREE.ArrowHelper( this.i, this.p, 1, 0x0000ff );
  this.j_arrow = new THREE.ArrowHelper( this.j, this.p, 1, 0x00ff00 );
  this.k_arrow = new THREE.ArrowHelper( this.k, this.p, 1, 0xff0000 );
};

Frame.common = 
{
  unit: function()
  {
    console.log("\"Unit\" Frame instance being created");
    var p = new vec3.fromValues(0, 0, 0);
    var i = new vec3.fromValues(1, 0, 0);
    var j = new vec3.fromValues(0, 1, 0);
    var k = new vec3.fromValues(0, 0, 1);
    var result = new Frame(p, i, j, k,);

    return result;
  },

  rand: function()
  {
    console.log("Random Frame instance being created");
    var p = {};
    vec3.random(p);

    var i_hat = {};
    vec3.random(i_hat);

    var j_hat = {};
    vec3.random(j_hat);

    var k_hat = {};
    vec3.random(k_hat);

    var result = new Frame(p, i_hat, j_hat, k_hat);
    return result;
  }

} // End common

Frame.prototype.draw = function(scene)
{
  scene.add(this.i_arrow, this.j_arrow, this.k_arrow);

  /*var i = new THREE.Vector3(this.i[0], this.i[1], this.i[2]);
  var j = new THREE.Vector3(this.j[0], this.j[1], this.j[2]);
  var k = new THREE.Vector3(this.k[0], this.k[1], this.k[2]);

  var p = new THREE.Vector3(this.p[0], this.p[1], this.p[2]);

  var i_arrow = new THREE.ArrowHelper( i, p, 1, 0x0000ff );
  var j_arrow = new THREE.ArrowHelper( j, p, 1, 0x00ff00 );
  var k_arrow = new THREE.ArrowHelper( k, p, 1, 0xff0000 );
    scene.add(i_arrow);
    scene.add(j_arrow);
    scene.add(k_arrow);*/
}

的index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'/>
    <title>HTM Tutorial</title>
    <style>
      body {margin: 0;}
      canvas {width: 100%; height: 100%}
    </style>
  </head>

  <body onload='initScene()'>

    <script type="text/javascript" src="node_modules/three/three.min.js"></script>
    <script type="text/javascript" src="node_modules/gl-matrix/dist/gl-matrix-min.js"></script>
    <script type="text/javascript" src="js/lib/OrbitControls.js"></script> 
    <script type="text/javascript" src="js/frame.js"></script>
    <script type="text/javascript" src="js/main.js"></script>

  </body>
</html>

THREE.js不绘制类对象

0 个答案: