Creating 3D shapes with ExtrudeParametricGeometry in ThreeJS

Question

Creating 3D shapes with ExtrudeParametricGeometry in ThreeJS

Is it possible to combine ExtrudeGeometry with ParametricGeometry?
For example:

function customGeometryFunction(u,v){
  var x = -(width/2) + width * u;
  var y = -(height/2) + height *v;
  var z = (Math.sin(u*Math.PI))* -20;
  return new THREE.Vector3(x,y,z);
}

let parametricGeometry = new THREE.ParametricGeometry(customGeometryFunction, 100, 100);
let extrudedGeometry = new THREE.ExtrudeGeometry(parametricGeometry, {amount:10, ...});

In this scenario, the parametricGeometry represents a plane-like geometry. The objective is to add depth to this geometry. Any suggestions or workarounds are appreciated!

javascript three.js geometry

Answer 1

Answer №1

When dealing with a plane-like structure that has some depth to it, one approach is to manipulate the geometry of a box:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.setScalar(3);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

var boxGeom = new THREE.BoxGeometry(2, 2, 3, 10, 10, 1);
boxGeom.vertices.forEach(v => {
  v.z += Math.cos(v.x * 2) * Math.sin(v.y * 2) * 0.125;
});

var deformed = new THREE.Mesh(boxGeom, new THREE.MeshBasicMaterial({
  color: "aqua",
  wireframe: true
}));
scene.add(deformed);

render();

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

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/90/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Answer 2

When dealing with a plane-like structure that has some depth to it, one approach is to manipulate the geometry of a box:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.setScalar(3);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

var boxGeom = new THREE.BoxGeometry(2, 2, 3, 10, 10, 1);
boxGeom.vertices.forEach(v => {
  v.z += Math.cos(v.x * 2) * Math.sin(v.y * 2) * 0.125;
});

var deformed = new THREE.Mesh(boxGeom, new THREE.MeshBasicMaterial({
  color: "aqua",
  wireframe: true
}));
scene.add(deformed);

render();

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

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/90/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Creating 3D shapes with ExtrudeParametricGeometry in ThreeJS

Answer №1

Similar questions

Fb.UI Dialogs now appearing in Popups rather than an iframe (part 2)

JavaScript and .NET Core: Implementing file uploads without the use of FormData or FromFrom

Obtain the URL for a Facebook Page or Profile

Using Node.js and React to dynamically render a different HTML file in response to a request

Exploring the concept of event delegation: Understanding the difference between Event.target and

What techniques can I employ in Angular to develop engaging widgets using plain HTML, without any Angular-specific elements?

Understanding the purpose of the meshPerAttribute parameter in an InstancedBufferAttribute in Three.js

What is a method to omit elements within a nested child element from a selection without relying on the children() function

Tips for displaying the html content saved in the database onto an ejs webpage

No output is displayed in the absence of errors. The program is functioning correctly

The maximum size for MongoDB documents is restricted to 16 megabytes

Is there a way to store a blob URL as a (.webm) video on my server using a combination of JavaScript and PHP

Integrating Amazon external images in NextJS

Retrieving data from a JSON file using JavaScript in a Node.js environment

Tips on preventing right-click actions in jqGrid

Issue with React video element not pausing

Using the same module in multiple files

Challenge encountered while adding child nodes to jqtree following a successful ajax call

Converting a text file to JSON in TypeScript

Firefox causing issues with Rails Ajax functionality