line -> plane

by uggway

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: 0 !important;
}
html, body {
  height: 100%;
  margin: 0;
}

JavaScript

import * as THREE from "https://cdn.skypack.dev/[email protected]";

import {
  OrbitControls
} from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls";


let mesh, renderer, scene, camera, controls

init()
animate()

function init() {
  // renderer
  renderer = new THREE.WebGLRenderer({
    antialias: true
  })
  renderer.setPixelRatio(window.devicePixelRatio)
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)

  // scene
  scene = new THREE.Scene()
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

  camera.position.set(10, 0, 0)


  const controls = new OrbitControls(camera, renderer.domElement)

  scene.add(new THREE.AmbientLight(0x999999, 0.5))



  const shape = new THREE.Shape();
  shape.moveTo(0, 0);
  shape.lineTo(0, 5);


  const extrudeSettings = {
    steps: 1,
    depth: 3,
    bevelEnabled: true
  };

  const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings)
  const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00
  })
  const mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)
  
  // center geo for example
  mesh.geometry.center()




  window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  })

}

function render() {
  renderer.render(scene, camera)
}

function animate() {
  requestAnimationFrame(animate)
  render()
}