create a 3D object by adding a default height javascript

Question

I have this code which should create a 3D form. The idea is that I have whatever coordinates stored into a vector in the same plan to which I should add a default height in order to make it 3D. As you can see I am a beginner in programming and this is the first time I use ThreeJS so can you tell me what am I doing wrong? Honestly I have no clue and I would like to know if there is another way of adding the default height to my 2D vector coordinates in order to make it 3D without using ThreeJS. Thank you!

$(document).ready(function(){

function storeCoordinate(x, y, array) {
array.push(x);
array.push(y);
}

var coords = [];
var z=500;
storeCoordinate(3, 5, coords);
storeCoordinate(10, 100, coords);
storeCoordinate(30, 120, coords);
storeCoordinate(3, 5, coords);

for (var i = 0; i < coords.length; i+=2) {
    var x = coords[i];
    var y = coords[i+1];

    var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        var shape = new THREE.Shape( coords );

        ctx.moveTo(coords[i],coords[i+1]);
        ctx.lineTo(coords[i+2],coords[i+3]);
        ctx.stroke();
}


  var render,mycanvas,scene,camera,renderer,light;


    init();
    animate();
  function init(){
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 1, 1000 );

    var extrudedGeometry = new THREE.ExtrudeGeometry(shape, {amount: 5, bevelEnabled: false});


    var extrudedMesh = new THREE.Mesh(extrudedGeometry, new THREE.MeshPhongMaterial({color: 0xff0000}));
    scene.add(extrudedMesh);


    document.body.onmousemove = function(e){
        extrudedMesh.rotation.z = e.pageX / 100;
        extrudedMesh.rotation.x = e.pageY / 100;
    }

    //lights

    dirLight = new THREE.DirectionalLight(0xffffff);
      dirLight.intensity = .9;
      dirLight.position.set(500, 140, 500);
      dirLight.castShadow = true;
      dirLight.shadowMapHeight =  2048
      dirLight.shadowMapWidth = 2048
      dirLight.shadowDarkness = .15

    spotLight = new THREE.PointLight( 0xffffff );
      spotLight.intensity = .5
      spotLight.position.set( -500, 140, -500 );
      camera.add( spotLight)
      camera.add(dirLight);


    lighthelper = new THREE.DirectionalLightHelper(dirLight, 20);
      lighthelper.children[1].material.color.set(0,0,0)
      lighthelper.visible = false;
      scene.add(lighthelper);


    ambientLight = new THREE.AmbientLight( 0x020202, 1 );
      scene.add( ambientLight );

    light = new THREE.PointLight(0xffffff);
    light.position.set(-100,200,100);
    scene.add(light);

    renderer = new THREE.WebGLRenderer({canvas: mycanvas});

    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.autoRotate = true;
        controls.enableZoom = true;
        controls.enablePan = true;
        controls.rotateSpeed = 3.0;
        controls.zoomSpeed = 1.0;
        controls.panSpeed = 2.0;
        controls.enableDamping = true;
        controls.dampingFactor = 0.25;
        controls.minDistance = 1.1;
        controls.maxDistance = 1000;
        controls.keys = [65, 83, 68]; // [ rotateKey, zoomKey, panKey ]
  }

  function animate() {
    window.requestAnimationFrame( animate );
    render();
  }

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

  var loader = new THREE.OBJLoader();

});

prisoner849 · Accepted Answer

Just an option of how you can do it, using THREE.ExtrudeGeometry():

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 3);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var grid = new THREE.GridHelper(5, 10, "white", "gray");
grid.geometry.rotateX(Math.PI * 0.5);
scene.add(grid);

var points = [
  new THREE.Vector2(0, 1),
  new THREE.Vector2(1, 1),
  new THREE.Vector2(1, 0)
]

var shape = new THREE.Shape(points);
var extrudeGeom = new THREE.ExtrudeGeometry(shape, {
  amount: 0.5,
  bevelEnabled: false
});
var mesh = new THREE.Mesh(extrudeGeom, new THREE.MeshBasicMaterial({
  color: "aqua",
  wireframe: true
}));
scene.add(mesh);

render();

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

body {
  overflow: hidden;
  margin: 0;
}

create a 3D object by adding a default height javascript

Answers (1)

Related Questions