JSFiddle - React, Tailwind, and code Playground
HTML
<script src='https://raw.githack.com/mrdoob/three.js/r102/build/three.min.js'></script>
<script src='https://raw.githack.com/mrdoob/three.js/r102/examples/js/lines/LineSegmentsGeometry.js'></script>
<script src='https://raw.githack.com/mrdoob/three.js/r102/examples/js/lines/LineGeometry.js'></script>
<script src='https://raw.githack.com/mrdoob/three.js/r102/examples/js/lines/WireframeGeometry2.js'></script>
<script src='https://raw.githack.com/mrdoob/three.js/r102/examples/js/lines/LineMaterial.js'></script>
<script src='https://raw.githack.com/mrdoob/three.js/r102/examples/js/lines/LineSegments2.js'></script>
<script src='https://raw.githack.com/mrdoob/three.js/r102/examples/js/lines/Line2.js'></script>
JavaScript
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );
// Create cube
// NOTE 1: Use LineGeometry instead BufferGeometry
// and set the positions with an array.
var geometry = new THREE.LineGeometry();
geometry.setPositions(cube(1));
// Line style
// NOTE 2: Instantiate a LineMaterial instead of LineBasicMaterial
// with a resolution parameter.
var material = new THREE.LineMaterial( {
color: 0xffffff,
linewidth: 5, // Does nothing due to OpenGL limit
resolution: new THREE.Vector2(window.innerWidth, window.innerHeight)
});
// NOTE 3: Create a Line2 Object
wireframe = new THREE.Line2(geometry, material);
scene.add(wireframe);
camera.position.z = 5;
function render() {
requestAnimationFrame( render );
wireframe.rotation.x += 0.025;
wireframe.rotation.y += 0.025;
renderer.render( scene, camera );
}
render();
function cube( size ) {
var h = size * 0.5;
var geometry = new THREE.BufferGeometry();
var position = [];
// NOTE 3 + 4: Return the position array directly so it can be
// passed into the LineGeometry directy and create a cube out
// of a single path.
position.push(
- h, - h, - h,
- h, h, - h,
h, h, - h,
h, - h, - h,
- h, - h, - h,
- h, - h, h,
- h, h, h,
- h, h, - h,
- h, h, h,
h, h, h,
h, h, - h,
h, h, h,
h, - h, h,
h, - h, - h,
h, - h, h,
- h, - h, h,
);
return position;
}