[英]How to add line in scene in three.js?
我嘗試在three.js中添加一行。 但是，當在我的代碼中調用addline函數時，它不會出現在場景中。 我嘗試使用MVC設計模式。 我不知道我在哪里犯錯。 謝謝你的幫助。
我的代碼如下：
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>
嘗試一些類似的事情，它的基本示例可以幫助您理解。
var renderer, scene, camera, controls; var geometry, material, line, vertices; init(); function init() { document.body.style.cssText = 'margin: 0; overflow: hidden;'; renderer = new THREE.WebGLRenderer({ alpha: 1, antialias: true, clearColor: 0xffffff }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000); camera.position.set(5, 5, 5); controls = new THREE.OrbitControls(camera, renderer.domElement); material = new THREE.LineBasicMaterial({ color: 0x0077ff }); geometry = new THREE.Geometry(); geometry.vertices.push(new THREE.Vector3(0, 0, 0)); line = new THREE.Line(geometry, material) scene.add(line); addLine(); // add line } function addLine() { vertices = geometry.vertices; for(var i=0;i<100;i+=10){ vertices.push(new THREE.Vector3(i,i+10,i+20)); } geometry = new THREE.Geometry(); geometry.vertices = vertices; scene.remove(line); line = new THREE.Line(geometry, material) scene.add(line); renderer.render(scene, camera); }
<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>
您在這里有兩個問題：
更改以下兩行代碼：
這樣一來，您的相機就能看到足夠遠的距離以顯示您的線條。
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
如何將fbxloader加載的攝像機添加到three.js中的場景？
[英]How to add the camera loaded by fbxloader to scene in three.js?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.