Here's how you can use welding techniques to attach objects and incorporate fin-like structures in THREE

Question

Here's how you can use welding techniques to attach objects and incorporate fin-like structures in THREE

I am currently working on a project involving a rocket ship orbiting various planets. To achieve this, I have started by creating my own rocket ship object and am aiming to model it similarly to this design:

https://kyleagnew.files.wordpress.com/2018/02/lowpolyrocket5.jpg

Here is the current model that I have developed: https://jsfiddle.net/pfya1sjm/4/

As you can see from my model, it consists of multiple objects aligned along the y-axis, resulting in visible lines between them and an overall lack of smoothness. Is there a way to either avoid this or merge the objects together for a seamless appearance?

Additionally, I am looking to create fin-like structures protruding from the bottom of the rocket, as shown in the example I am trying to replicate.

// once everything is loaded, we run our Three.js stuff.
                $(function() {

                    var stats = initStats();

                    // create a scene, that will hold all our elements such as objects, cameras and lights.
                    var scene = new THREE.Scene();
                    
                    ...
                    
                        GameLoop();

body {
          margin: 0;
        }

<script type="text/javascript" src="https://threejs.org/build/three.js"></script>
        <script type="text/javascript" src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
        <script type="text/javascript" src="https://threejs.org/examples/js/libs/stats.min.js"></script>
        <script type="text/javascript" src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>

        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

javascript three.js

Answer 1

Answer №1

The reason the edges between different body sections look sharp is due to the fact that the normals of the vertices don't match and blend together seamlessly.

THREE.MeshPhongMaterial relies on vertex normals to determine how edges should be blended. If the normals at an edge are consistent, the edges will appear smooth. However, if the normals are pointing in different directions, the edges will look distinct and hard.

You have several options available to address this issue:

Adjust the geometry so that connected edges share the same normal vector value for their paired vertices.
Manually combine geometries into a single object and reconcile any differing normals to ensure they align.
Create a custom geometry definition using THREE.Geometry or THREE.BufferGeometry.

I highly recommend exploring option 3, especially when defining intricate features like "fins". While you could attempt to manipulate pre-made mesh shapes to achieve your desired effect, crafting a custom geometry is likely to be much more straightforward.

Answer 2

The reason the edges between different body sections look sharp is due to the fact that the normals of the vertices don't match and blend together seamlessly.

THREE.MeshPhongMaterial relies on vertex normals to determine how edges should be blended. If the normals at an edge are consistent, the edges will appear smooth. However, if the normals are pointing in different directions, the edges will look distinct and hard.

You have several options available to address this issue:

Adjust the geometry so that connected edges share the same normal vector value for their paired vertices.
Manually combine geometries into a single object and reconcile any differing normals to ensure they align.
Create a custom geometry definition using THREE.Geometry or THREE.BufferGeometry.

I highly recommend exploring option 3, especially when defining intricate features like "fins". While you could attempt to manipulate pre-made mesh shapes to achieve your desired effect, crafting a custom geometry is likely to be much more straightforward.

Here's how you can use welding techniques to attach objects and incorporate fin-like structures in THREE

Answer №1

Similar questions

Traverse through an object in ReactJS

Alternative for document.ready in AngularJS when outside of AngularJS

Querying the Collection for document counts is failing to display any data

Creating a stylish navigation bar with custom components using Material UI and React

When attempting to import my JSX file into page.js, I continue to encounter the error "module not found." How can I troubleshoot and resolve this issue in Visual Studio Code

The transformation of a class-based component into a functional one is proving to be ineffective

Fetching from the same origin results in a null comparison issue due to HTTP CORS restrictions

The value of the checked input with the name `nameofinput` is currently not defined

Intermittent connectivity issues causing clients to miss messages from Nodejs server

A bounding box aligned with the camera's perspective

Ways to specify a setter for a current object property in JavaScript

Retrieve the HTML structure from an AJAX response

When using the POST method with npm http-server, an error 405 is thrown

Troubleshooting: Mongoose Array Object Order Modification Issue

Unable to submit form in Node.js with Express

CKFinder Error: Unable to find definition for t.event.special.swipe

Embedding a Three.js object within a div element that has disabled zoom functionality and prevents scrolling or zooming within

Unable to store user data in the MongoDB Database

Showing data from a Node.js Express application in a Jade template file

Developing a custom camera system for a top-down RPG game using Javascript Canvas