Three.js tutorial: Rendering multiple instances of a single object

        var vertgeometry = new THREE.BoxGeometry(75,75,150);
        var vertmaterial = new THREE.MeshPhongMaterial ( {
            color: 0xFFFFFF,
            wireframe: true
        });
        var vert = new THREE.Mesh(vertgeometry, vertmaterial);
        vert.rotation.x = -Math.PI * 0.5;
        vert.position.z = 0;
        vert.position.x = 0;
        vert.position.y = 75;
        vert.recaiveShadow = true


        var kogeometry = new THREE.BoxGeometry(15,15,15);
        var komaterial = new THREE.MeshPhongMaterial ({
            color: 0xFFFFFF,
            wireframe: true
        });
        var ko1 = new THREE.Mesh(kogeometry, komaterial);
        ko1.position.z = -30;
        ko1.position.x = -30;
        ko1.position.y = 157.5;


        var ko2 = new THREE.Mesh(kogeometry, komaterial);

        ko2.position.set(0,157.5,-30);

        var ko3 = new THREE.Mesh(kogeometry, komaterial);

        ko3.position.set(30,157.5,-30);

        var ko4 = new THREE.Mesh(kogeometry, komaterial);

        ko4.position.set(30,157.5,0);

        var ko5 = new THREE.Mesh(kogeometry, komaterial);

        ko5.position.set(30,157.5,30);


        var ko6 = new THREE.Mesh(kogeometry, komaterial);

        ko6.position.set(30,157.5,30);

        var ko7 = new THREE.Mesh(kogeometry, komaterial);

        ko7.position.set(0, 157.5, 30);

        var ko8 = new THREE.Mesh(kogeometry, komaterial);

        ko8.position.set(-30,157.5, 30);

        var ko9 = new THREE.Mesh(kogeometry, komaterial);

        ko9.position.set(-30, 157.5, 0);


        Bastion = new THREE.Object3D();
        Bastion.add(vert, ko1, ko2, ko3, ko4, ko5, ko6, ko7, ko8, ko9);
        scene.add(Bastion);

I have successfully merged 10 geometries into one object named 'Bastion'. Now my goal is to add this object to the scene three more times with different positions. I am encountering an issue where the last one I added disappears. Is there a solution for duplicating and positioning this object multiple times without manually creating additional geometries? Your guidance and expertise are appreciated as I am still learning and may face challenges like this.

Answer №1

After doing thorough research, I was able to discover the solution to my problem. All I needed to do was clone my object using the following code:

let duplicate = originalObject.clone();
        duplicate.position.set(100, 100, 100);
        duplicate.add(duplicate);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using jQuery to iterate through an open dialog box

I want to add a small animation for the user to indicate that their submission is in progress. $("#textscreen").dialog({ modal: true, draggable: false, open: function(event, ui) { $(this).everyTime("1s", function(i) { var d ...

Exploring the best way to use $set in Mongoose for dynamically updating an embedded

I'm currently attempting to create a unique function that can update the value of a specific embedded MongoDB document within an array. The goal is to change the value based on its position. function removeAddress(accountNum, pos) { const remove ...

After completing the mapSeries operation, I aim to re-implement the function

How can I return queries (functions) after performing mapSeries? Any help is appreciated! async querys(querys) { const pool = await poolPromise; if (pool != null) { const transaction = new sql.Transaction(pool); ...

The difference between invoking a method directly and utilizing a function to invoke a method

Imagine we have a method inside a class that looks like this class Blog extends Component { postClicked = (id) => { this.setState({selectedPostId: id}) } render () { const newPosts = this.state.posts.map(el => { return & ...

Adding auth0 authentication to a Next.js 13 application: A step-by-step guide

Currently, I am using a nextjs 12 application and set up auth0 as my authentication provider by following the guidelines provided here: https://auth0.com/docs/quickstart/webapp/nextjs/interactive. However, I am now looking to upgrade my application to next ...

jQuery - harnessing the power of JavaScript events such as "dragover"

I have a JavaScript function that includes an event listener for 'dragover'. Here is the code snippet: document.getElementById("someID").addEventListener("dragover", function(){ //Add your logic here }, fa ...

Click Function for Modifying the Content of a Popup Window

I'm a beginner in JavaScript and I need help figuring out how to achieve the following task. Essentially, my goal is to have lines of code like this: <a onclick="JavascriptFunction(0000000)"><img src="image1.png"></a> The number w ...

Exploring the world of pagination using AJAX (jQuery) - managing large datasets

Would it be wise to implement ajax pagination for large databases? I have a fast jQuery live search filter, but I'm concerned that I won't be able to use it alongside PHP pagination because the page content is typically generated from the databa ...

What could be causing [object HTMLImageElement] to appear when attempting to update my favicon image?

Yesterday, I posted a question and received an incredibly helpful answer. Take a look at the question here. The response also includes the code snippet. However, when viewing my rendered HTML, instead of getting the link as expected, I am seeing <link ...

The onChange function failed to provide the expected target value

I attempted to implement an onChange function for a TextArea component, but I encountered an issue where the state was not updating when using console.log or passing it to the payload. Interestingly, when I used JSON.stringify, the value was successfully ...

The propagation of SVG events from embedded images via the <image> elements

I'm currently developing a diagramming tool using HTML, CSS, and Javascript with SVG for the drawing canvas. This tool consists of predefined "building blocks" that users can place on the canvas, rather than allowing free-hand drawing of shapes. Each ...

Identifying the user's location within the application and dynamically loading various Angular scripts

Currently, I am working on a large-scale web application using Laravel and Angular. In this project, I have integrated various angular modules that come with their own controllers, directives, and views. One challenge I am facing is the need to load diffe ...

JQuery transmits null values

I have been troubleshooting my code for what feels like forever, but I just can't seem to find the error... My current project involves experimenting with JQuery and AJAX. I created a simple form with a textarea for submission. The form works perfect ...

Converting month names to uppercase with moment.js

After changing the moment's locale by setting the property below: moment.locale(chosenLocale); It appears that everything is functioning correctly. The month names and weekday names are displayed according to the selected locale, and week numbers ar ...

Combining stencil clipping with EffectComposer in Three.js poses a challenge

UPDATE: My initial question was too simplistic. Please refer to the revised version below. I am currently attempting to merge the technique showcased in the clipping/stencil example of Three.js, which utilizes the stencil buffer to render 'caps' ...

What is the method for retrieving hotels from a database based on their proximity to a specific set of latitude and longitude coordinates?

I have a database table with latitude, longitude, and hotel locations. I want to create a feature that will show hotels near a specific point defined by latitude and longitude. Code Snippet function findNearbyHotels() { $this->lo ...

Issue with TypeORM Many-to-Many relation returning incorrect data when using the "where" clause

I'm facing an issue with my database tables - User and Race. The relationship between them is set as Many to Many , where a Race can have multiple Users associated with it. My goal is to retrieve all the Races that a particular user is a member of. Ho ...

Defining ReactNode as a prop in a TypeScript React component: A comprehensive guide

Is there a way to create a React component in TypeScript that accepts another React component as a prop? I am attempting to write the following code: const MyComponent = () => ( <span>Hello</span> ); // when trying this, I get an error m ...

Include criteria in my ajax call (conditional statements)

Is there a way to add conditions to my ajax request? Whenever I include the code below, it only seems to work for one item at a time. $.ajax({ type: 'GET', url: urlPost, success: function (data) { $.each(data, function (key, value) { ...

What is causing my Cordova hook to require two executions before functioning properly?

Currently, I am working on a Cordova project that involves the use of browserify to utilize require() in the mobile app. The setup works well, so now my goal is to automate the browserifying process of my js files by integrating it into a Cordova hook. Thi ...