CODEWITHSUNDEEP
javascriptthree.jsshapesjsfiddle
Koala7
Koala7

Reputation: 1404

Remove widthSegments and heightSegments in PlaneGeometry threejs

I am trying to remove the widthSegments and heightSegments.

If i change this

var tergeo= new THREE.PlaneGeometry(100, 100, 1, 1);

to

var tergeo= new THREE.PlaneGeometry(100, 100, 0, 0);

It does not work

How can i remove widthSegments and heightSegments in this jsFiddle ?

Upvotes: 1

Views: 320

Answers (1)

prisoner849
prisoner849

Reputation: 17596

Here is an option with an indexed buffer geometry:

body{
  overflow: hidden;
  margin: 0;
}
<script type="module">
import * as THREE from "https://cdn.skypack.dev/[email protected]";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

let g = QuadGeometry(THREE.MathUtils.randInt(5, 10), THREE.MathUtils.randInt(5, 10));
let m = new THREE.LineBasicMaterial({color: "yellow"});
let quad = new THREE.Line(g, m);
scene.add(quad);

function QuadGeometry(w, h){
  let pts = [
    [0.5, 0.5], 
    [-0.5, 0.5], 
    [-0.5, -0.5], 
    [0.5, -0.5]
  ].map(p => {return new THREE.Vector2(p[0], p[1])});
  let g = new THREE.BufferGeometry().setFromPoints(pts);
  g.setIndex([0, 1, 2, 3, 0]);
  g.scale(w, h, 1);
  
  return g;
}

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});
</script>

Upvotes: 2

Related Questions