我嘗試在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>
在開發者控制檯中的任何錯誤? – MMK
沒有錯誤 –
你可以把console.log(geometry);在addline()中查看幾何是否有值。 – MMK