init() {
this.scene = new this.$three.Scene();
const axesHelper = new this.$three.AxesHelper(100);
this.scene.add(axesHelper);
this.createLine();
this.camera = new this.$three.PerspectiveCamera(60,1,0.01,2000);
this.camera.position.set(30,30,30);
this.camera.lookAt(0,0,0);
this.renderer = new this.$three.WebGLRenderer();
this.renderer.setSize(1000,800);
this.renderer.render(this.scene, this.camera);
window.document.getElementById("threejs").appendChild(this.renderer.domElement);
},
createLine() {
let a = new this.$three.Vector3(10,0,0);
let b = new this.$three.Vector3(0,10,0);
let c = new this.$three.Vector3(0,0,10);
let geometry = new this.$three.BufferGeometry().setFromPoints([a,b,c,a]);
let material = new this.$three.LineBasicMaterial({color:0xffccdd});
let line = new this.$three.Line(geometry, material);
this.scene.add(line);
}
createLine2() {
let arr = new Float32Array([
20,0,0,
0,20,0,
0,0,20,
]);
let position = new this.$three.BufferAttribute(arr, 3)
let geometry = new this.$three.BufferGeometry();
geometry.setAttribute("position", position);
let material = new this.$three.LineBasicMaterial({color:0xb5a6dd});
let line = new this.$three.LineLoop(geometry, material);
// let line = new this.$three.Line(geometry, material);
this.scene.add(line);
},
three.js 在三维空间中绘制线框
于 2024-03-08 13:36:53 首次发布