JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
<canvas id="triangles"></canvas>
JavaScript
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
var renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true,
canvas: document.getElementById('triangles')
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1);
camera.position.z = 10;
drawTriangle(
new THREE.Vector3(0, 10, 0),
new THREE.Vector3(-5, -0, 0),
new THREE.Vector3(0,1,1)
);
renderer.render(scene, camera);
function drawTriangle (vertex1, vertex2, vertex3) {
var triangleGeometry = new THREE.Geometry();
var triangleMaterial = new THREE.MeshBasicMaterial({
color: 0x000000,
wireframe: true,
wireframeLinewidth: 1
});
var triangle = new THREE.Mesh(triangleGeometry, triangleMaterial);
triangleGeometry.vertices = [vertex1, vertex2, vertex3];
triangleGeometry.faces.push(new THREE.Face3(0, 1, 2));
THREE.GeometryUtils.center(triangleGeometry);
scene.add(triangle);
return triangle;
}