How to move my 3D loaded model?

khush_patibandha · July 3, 2023, 1:10pm

I started with three js recently and I am trying to make a static website with a space theme. I did found a yt video to render bunch of stars and make them move towards the camera and once they go past the camera, they will simply re render. resulting in a cool effect. But I want to add some space shuttles and other 3D models to make it even better, I have loaded a space shuttle model that I want to use but I don’t know how to animate it so that it can create an effect of “floating” in the space.

2023-07-03 18-34-43.mkv (4.2 MB)

This is the current state of my project, and I want the space shuttle model to also go past the camera just like stars and then re render. I am sorry if this sounds dumb, am just starting out. Do lemme know if someone want to have a look at the code.

What I would like to se: some suggestions/ study material on how to tackle this issue.

Prerna_Mohan · July 3, 2023, 3:34pm

Movement of your space shuttle can also follow same process that you’ve done for your stars.

What exactly is this “floating effect” and how you intend it to be different than your stars movement? Can you elaborate?

khush_patibandha · July 3, 2023, 3:51pm

Yes it is suppose to be just like stars.

bunch of space shuttle will be rendered randomly and will just travel in a straight path and will re render once they pass the camera pov.

I tried following the same process like the stars. But it’s not really working. I did some searching and found out that I might need to do some basic animation. So I am figuring out the optimal solution for this.

Prerna_Mohan · July 3, 2023, 3:54pm

How are you making the stars travel in a path, can you explain? And also, what is the problem you’re facing in case of the shuttle.

You can add the relevant code snippet here.

hofk · July 3, 2023, 6:33pm

Maybe you can take procedures from these examples from the collection?

FlightRouteQuaternion
MovingCameraAlongSpline
PoinsForEngines

khush_patibandha · July 4, 2023, 2:50pm

import * as THREE from './three.js-master/three.js-master/build//three.module.js'
import { GLTFLoader } from './three.js-master/three.js-master/examples/jsm/loaders/GLTFLoader.js'
import { TrackballControls } from './three.js-master/three.js-master/examples/jsm/controls/TrackballControls.js'

let scene, camera, renderer, starGeo, stars;

function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 10;
    camera.position.x = Math.PI / 2;

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    starGeo = new THREE.BufferGeometry();
    const vertices = [];
    for (let i = 0; i < 6000; i++) {
        const star = new THREE.Vector3(
            Math.random() * 600 - 300,
            Math.random() * 600 - 300,
            Math.random() * 600 - 300
        );
        star.velocity = 0;
        star.acceleration = 0.02;
        vertices.push(star.x, star.y, star.z);
    }
    starGeo.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));

    const sprite = new THREE.TextureLoader().load('/assets/star.jpg');
    const starMaterial = new THREE.PointsMaterial({
        color: 0xaaaaaa,
        size: 0.7,
        map: sprite,
        transparent: true,
        alphaTest: 0.5,
    });

    stars = new THREE.Points(starGeo, starMaterial);
    scene.add(stars);


    const loader = new GLTFLoader();
    loader.load('assets/low_poly_space_shuttle/scene.gltf', function(gltf) {
        console.log(gltf);
        const root = gltf.scene;

        const initialRotation = new THREE.Euler(Math.PI , Math.PI , Math.PI);
        const rotationMatrix = new THREE.Matrix4().makeRotationFromEuler(initialRotation);
        root.applyMatrix4(rotationMatrix);

        root.scale.set(0.001, 0.001, 0.001);

        const textureLoader = new THREE.TextureLoader();
        const texture = textureLoader.load('assets/low_poly_space_shuttle/textures/Material_diffuse.jpeg', function() {
        const material = new THREE.MeshPhongMaterial({ map: texture });
            root.traverse(function(node) {
                if (node.isMesh) {
                    node.material = material;
                }
            });
        });

        scene.add(root);

        const controls = new TrackballControls(camera, renderer.domElement);
        function animate() {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
        }

        animate();
    }, function(xhr) {
        console.log((xhr.loaded / xhr.total * 100) + "% loaded");
    }, function(error) {
        console.log('An error occurred');
    });
    const light = new THREE.AmbientLight(0xffffff, 1);
    light.position.set(2, 2, 5);
    scene.add(light);

    animate();
}

function animate() {
    starGeo.attributes.position.array.forEach((_, index) => {
        const x = starGeo.attributes.position.array[index * 3];
        const y = starGeo.attributes.position.array[index * 3 + 1];
        const z = starGeo.attributes.position.array[index * 3 + 2];
  
        starGeo.attributes.position.array[index * 3 + 2] += 0.5; // Move towards the camera
        if (z > 300) {
            starGeo.attributes.position.array[index * 3 + 2] = -300; // Reset position once it goes beyond the screen
        }
    });
    starGeo.attributes.position.needsUpdate = true;

    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}
init();

this is the current state of by code if you want to have a look.

khush_patibandha · July 4, 2023, 2:51pm

Sure, thanks for sharing.

Prerna_Mohan · July 4, 2023, 3:36pm

If you want a simple movement of your space shuttle just like your stars, update your space shuttle’s position in the animate function like your are doing for stars, like so:

let scene, camera, renderer, starGeo, stars, root ; // make root global

function animate() {
    starGeo.attributes.position.array.forEach((_, index) => {
        const x = starGeo.attributes.position.array[index * 3];
        const y = starGeo.attributes.position.array[index * 3 + 1];
        const z = starGeo.attributes.position.array[index * 3 + 2];
  
        starGeo.attributes.position.array[index * 3 + 2] += 0.5; // Move towards the camera
        if (z > 300) {
            starGeo.attributes.position.array[index * 3 + 2] = -300; // Reset position once it goes beyond the screen
        }
    });
    if(root)
        root.position.z += 0.1

    starGeo.attributes.position.needsUpdate = true;

    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}

Also, instead of checking for root is undefined till it is loaded, better use a loading manager to wait for your space shuttle to load, then start animating.

khush_patibandha · July 5, 2023, 6:59am

Thank you very much, It works. I really appreciate your help.

khush_patibandha · July 5, 2023, 1:15pm

I am trying to clone the 3D models to place them on to the scene and I have added this code, but I am running into some issue,
(1) this code have no effect
(2) but is slowing my program down and making it lag, which suggest it is working but not rendering any models?

for(let i = 0; i < 3000; i++) {
            const shuttle = root.clone();
            shuttle.position.set(
                Math.random() * 600 - 300,
                Math.random() * 600 - 300,
                Math.random() * 600 - 300,
            );
            scene.add(shuttle);
            shuttles.push(shuttle);
        }

added this code block while I loaded the initial model,

shuttles.forEach((shuttle) => {
        shuttle.position.z += 0.001;
        if(shuttle.position.z > 300) {
            shuttle.position.z = -300;
        }
    })

added this code block in my animate function so that it could move the model around while re rendering it once it passes the camera pov.

Prerna_Mohan · July 5, 2023, 2:05pm

Try to have larger increments in the Z position of your shuttles like 0.1 instead of 0.001.

khush_patibandha · July 5, 2023, 4:12pm

That’s not the case because I have already tried doing that.

Update: once I reduced the amount of 3D models to be rendered to 10 from 3000 it stopped lagging. So, there has to be some process running in the background that is not letting the cloned models to render. Also it’s not showing any warnings in the console as well.

Prerna_Mohan · July 5, 2023, 4:57pm

That should run perfectly fine, may be there’s something in your code that you messed up. Can you update your latest code maybe…

khush_patibandha · July 5, 2023, 5:11pm

import * as THREE from './three.js-master/three.js-master/build//three.module.js'
import { GLTFLoader } from './three.js-master/three.js-master/examples/jsm/loaders/GLTFLoader.js'
import { TrackballControls } from './three.js-master/three.js-master/examples/jsm/controls/TrackballControls.js'

let scene, camera, renderer, starGeo, stars, root, shuttles = [];

function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 10;
    camera.position.x = Math.PI / 2;

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    starGeo = new THREE.BufferGeometry();
    const vertices = [];
    for (let i = 0; i < 6000; i++) {
        const star = new THREE.Vector3(
            Math.random() * 600 - 300,
            Math.random() * 600 - 300,
            Math.random() * 600 - 300
        );
        star.velocity = 0;
        star.acceleration = 0.02;
        vertices.push(star.x, star.y, star.z);
    }
    starGeo.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));

    const sprite = new THREE.TextureLoader().load('/assets/star.jpg');
    const starMaterial = new THREE.PointsMaterial({
        color: 0xaaaaaa,
        size: 0.7,
        map: sprite,
        transparent: true,
        alphaTest: 0.5,
    });

    stars = new THREE.Points(starGeo, starMaterial);
    scene.add(stars);


    const loader = new GLTFLoader();
    loader.load('assets/low_poly_space_shuttle/scene.gltf', function(gltf) {
        console.log(gltf);
        root = gltf.scene;

        root.scale.set(0.001, 0.001, 0.001);

        const textureLoader = new THREE.TextureLoader();
        const texture = textureLoader.load('assets/low_poly_space_shuttle/textures/Material_diffuse.jpeg', function() {
            const material = new THREE.MeshPhongMaterial({ map: texture });
            root.traverse(function(node) {
                if (node.isMesh) {
                    node.material = material;
                }
            });
        });

        // ***************** Expiremental (should render multiple 3D models, but doesnt) 
        // When you do i < 3000 (some big number) it will start lagging. That means that some process is running in the background but the cloned models are not getting rendered. 

        for(let i = 0; i < 10; i++) {
            const shuttle = root.clone();
            shuttle.position.set(
                Math.random() * 600 - 300,
                Math.random() * 600 - 300,
                Math.random() * 600 - 300,
            );
            scene.add(shuttle);
            shuttles.push(shuttle);
        }
        // *****************


        scene.add(root);

        // const controls = new TrackballControls(camera, renderer.domElement);
        // function animate() {
        //     requestAnimationFrame(animate);
        //     controls.update();
        //     renderer.render(scene, camera);
        // }
        
        animate();
    }, function(xhr) {
        console.log((xhr.loaded / xhr.total * 100) + "% loaded");
    }, function(error) {
        console.log('An error occurred');
    });
    const light = new THREE.AmbientLight(0xffffff, 1);
    light.position.set(2, 2, 5);
    scene.add(light);

    animate();
}

function animate() {
    starGeo.attributes.position.array.forEach((_, index) => {
        const x = starGeo.attributes.position.array[index * 3];
        const y = starGeo.attributes.position.array[index * 3 + 1];
        const z = starGeo.attributes.position.array[index * 3 + 2];
  
        starGeo.attributes.position.array[index * 3 + 2] += 1.0; // Move towards the camera
        if (z > 300) {
            starGeo.attributes.position.array[index * 3 + 2] = -300; // Reset position once it goes beyond the screen
        }
    });
    starGeo.attributes.position.needsUpdate = true;

    // makes the loaded model move in a straight line. 
    if(root != undefined) {
        root.position.z += 0.05;
    }

    // added as an expirement(should work, but dosent)
    shuttles.forEach((shuttle) => {
        // shuttle.position.z += 1;
        if(root != undefined) {
            shuttle.position.z += 0.05;
        }
        if(shuttle.position.z > 300) {
            shuttle.position.z = -300;
        }
    })

    
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}
init();

Hey, thanks for your response. This is the current state of my code.

Prerna_Mohan · July 6, 2023, 5:03am

This works fine without any issues, maybe check your model or textures are correct…
You can try to replicate the problem on codepen or stackbiltz.

Topic		Replies	Views
How to clone and move 3D models along different paths? Questions animation , gltf-loader	4	374	May 27, 2024
GLB model animation not working Questions animation , gltf-loader , gltf	4	5533	May 14, 2020
Animate Actions from Blender Questions animation	2	1086	April 23, 2020
Moving loaded FBX models in space. How to do this? Questions transform	7	4497	August 9, 2018
Model not showing on page Questions loaders	3	306	June 30, 2023

How to move my 3D loaded model?

Related topics