如何在three.js场景中添加线条？

我尝试在three.js中添加一行。但是，在我的代码中调用addline函数时，它不会出现在场景中。我尝试使用MVC设计模式。我不知道我犯了什么错误。谢谢你的帮助。
我的代码如下：如何在three.js场景中添加线条？

function View(viewArea) { 
    var viewport = document.getElementById(viewArea); 
    var viewportHeight = document.getElementById(viewArea).offsetHeight; 
    var viewportWidth = document.getElementById(viewArea).offsetWidth; 

    var renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(viewportWidth, viewportHeight); 
    viewport.appendChild(renderer.domElement); 

    var scene = new THREE.Scene(); 
    var camera = new THREE.PerspectiveCamera(75, viewportWidth/viewportHeight, 0.1, 1000); 
    camera.position.set(100,70,3000); 
    camera.lookAt(new THREE.Vector3(0, 0, 0)); 

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

    this.scene = scene; 
    this.camera = camera; 
    this.light = light; 
    this.renderer = renderer; 
} 

View.prototype.addLine = function (geometry) { 
    var material = new THREE.LineBasicMaterial({ color: 0x000000 }); 
    var line = new THREE.Line(geometry, material); 
    this.scene.add(line); 
}; 

View.prototype.render = function() { 
    this.renderer.render(this.scene, this.camera); 
}; 

function Controller(viewArea) { 
    var view = new View(viewArea); 

    var geometry = new THREE.Geometry(); 
    geometry.vertices.push(new THREE.Vector3(0, 0, 0)); 
    for(var i=0;i<100;i+=10){ 
     geometry.vertices.push(
      new THREE.Vector3(i,i+10,i+20) 
     ); 
     view.addLine(geometry); 
    } 
    view.render(); 
}

我的HTML代码：

<body> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" id="leftMenu"> 
       </div> 
       <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"> 
        <div class="row" id="viewport"> 
        </div> 
        <div class="row" id="informationMenu"> 
        </div> 
       </div> 
       <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" id="rightMenu"> 
       </div> 
      </div> 
     </div> 

    <script type="text/javascript"> 
     $(document).ready(function(){ 
      var controller = new Controller('viewport'); 
     }); 
    </script> 
</body>

来源

2017-02-14 Şeyma Yaman

在开发者控制台中的任何错误？ – MMK

没有错误 –

你可以把console.log（geometry）;在addline（）中查看几何是否有值。 – MMK

您这里有两个问题：

你的线是黑色的黑色背景上的
你的相机实在是太遥远，你的线被淘汰

改变这两行代码：

这可以让您的相机看起来足够显示您的线。

var camera = new THREE.PerspectiveCamera(75, viewportWidth/viewportHeight, 0.1, 5000);

这只是让你的行粉色

var material = new THREE.LineBasicMaterial({ color: 0xff00ff });

这应该做的伎俩，我希望帮助。

另一方面：我会将线几何添加到场景中一次。尝试在环路外移动view.addLine(geometry)。

function Controller(viewArea) { 
    var view = new View(viewArea); 

    var geometry = new THREE.Geometry(); 
    geometry.vertices.push(new THREE.Vector3(0, 0, 0)); 
    for(var i=0;i<100;i+=10){ 
     geometry.vertices.push(
      new THREE.Vector3(i,i+10,i+20) 
     ); 
    } 

    view.addLine(geometry); 
    view.render(); 
}

这里有一个工作笔： http://codepen.io/BBlanchard/pen/RKdNoO

来源

2017-02-14 23:04:48

尝试像其基本的例子，你可以明白我的意思了一些事情。

\t var renderer, scene, camera, controls; 
 
\t var geometry, material, line, vertices; 
 
\t init(); 
 

 
\t function init() { 
 
\t document.body.style.cssText = 'margin: 0; overflow: hidden;'; 
 
\t renderer = new THREE.WebGLRenderer({ 
 
\t  alpha: 1, 
 
\t  antialias: true, 
 
\t  clearColor: 0xffffff 
 
\t }); 
 
\t renderer.setSize(window.innerWidth, window.innerHeight); 
 
\t document.body.appendChild(renderer.domElement); 
 

 
\t scene = new THREE.Scene(); 
 
\t camera = new THREE.PerspectiveCamera(40, window.innerWidth/window.innerHeight, 1, 1000); 
 
\t camera.position.set(5, 5, 5); 
 
\t controls = new THREE.OrbitControls(camera, renderer.domElement); 
 

 
\t material = new THREE.LineBasicMaterial({ 
 
\t  color: 0x0077ff 
 
\t }); 
 
\t geometry = new THREE.Geometry(); 
 
\t geometry.vertices.push(new THREE.Vector3(0, 0, 0)); 
 

 
\t line = new THREE.Line(geometry, material) 
 

 
\t scene.add(line); 
 
\t addLine(); // add line 
 
\t } 
 

 
\t function addLine() { 
 
\t vertices = geometry.vertices; 
 
\t for(var i=0;i<100;i+=10){ 
 
    vertices.push(new THREE.Vector3(i,i+10,i+20)); 
 
    } 
 
\t geometry = new THREE.Geometry(); 
 
\t geometry.vertices = vertices; 
 
\t scene.remove(line); 
 
\t line = new THREE.Line(geometry, material) 
 
\t scene.add(line); 
 
\t renderer.render(scene, camera); 
 
\t }

<script src=http://mrdoob.github.io/three.js/build/three.min.js></script> 
 
<script src=http://mrdoob.github.io/three.js/examples/js/controls/OrbitControls.js></script>

来源

2017-02-14 11:17:49 MMK

谢谢。我知道这个想法 –

@ŞeymaYaman酷。 – MMK

如何在three.js场景中添加线条？

回答

相关问题