console
const content = buildContentModels()
renderModel(content)
function make2dPointsAndLines() {
const points = [
[1, 1],
[2, 10],
[10, 10],
]
const lines = [
[0, 1],
[2, 1],
]
return { points, lines }
}
function buildContentModels() {
const group = new THREE.Group()
const { points, lines } = make2dPointsAndLines()
const vertices = points.reduce((result, [x, y]) => {
result.push(x, 0, y)
return result
}, [])
const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
const material = new THREE.PointsMaterial({ color: 0xff0000, size: 3 });
group.add(new THREE.Points(geometry, material));
const lineMaterial = new THREE.LineBasicMaterial({ color: 0xff0000 });
lines.forEach(line => {
const point0 = vertices.slice(line[0] * 3, line[0] * 3 + 3)
const point1 = vertices.slice(line[1] * 3, line[1] * 3 + 3)
const lineVertices = point0.concat(point1)
lineGeometry = new THREE.BufferGeometry();
lineGeometry.setAttribute('position', new THREE.Float32BufferAttribute(lineVertices, 3));
group.add(new THREE.Line(lineGeometry, lineMaterial));
})
return group
}
function renderModel(model) {
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
scene.add(new THREE.GridHelper(100, 10, 0x00dddd, 0xffffff))
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight,
0.1, 1000);
camera.position.set(0, 100, 75);
camera.lookAt(0, 0, 13)
const ambient = new THREE.AmbientLight(0xffffff, 0.6)
scene.add(ambient)
scene.add(model)
const animate = function () {
requestAnimationFrame(animate);
renderer.render(scene, camera);
};
animate();
}
<div>test</div>
body { margin: 0; }
canvas { width: 100%; height: 100% }