如何在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場景中添加線條？

回答

相關問題