Guide to displaying multiple 3D models using the stlloader technique

Question

Guide to displaying multiple 3D models using the stlloader technique

I am facing an issue with rendering multiple models at the same time. When I try to render them, the display shows up as white and blank with no errors in the console. I am only able to render one model at a time. How can I render multiple models simultaneously? enter image description here

import * as THREE from './threejs/three.module.js';
import {STLLoader} from './threejs/STLLoader.js';
import {OrbitControls} from './threejs/OrbitControls.js';

let scene, camera, renderer, object;

function init(){
    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        10000
    );
    camera.position.z = 10;

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

    scene.add(object);

    let control = new OrbitControls(camera, renderer.domElement);

    let light = new THREE.DirectionalLight(0xffffff);
    light.position.set(0,0,10);
    scene.add(light);

    let light2 = new THREE.DirectionalLight(0xffffff);
    light2.position.set(0,0,-10);
    scene.add(light2);

    animate();
    loadModels();
}

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

var models = [];

function loadModels(){
    loadModel('/左肾占位/NING_XUAN_QING_M_056Y_Violet_001.stl', -5);
    loadModel('/左肾占位/NINGXUANQINGM056Y_Turquoise_001.stl', 0);
}

function loadModel(path, positionY){
    let loader = new STLLoader();
    loader.load(path, (model)=>{
        let obj = new THREE.Mesh(
            model,
            new THREE.MeshLambertMaterial({color: 0x00ff00})
        );
        obj.scale.set(0.2, 0.2, 0.2);
        obj.position.set(0, positionY, 0);
        obj.rotation.x = -Math.PI/2;
        models.push(obj);
        scene.add(obj);
    });
}

The model is a Left renal mass comprised of multiple parts, each with its own 3D model file. I need to combine all these parts together to form a complete model.

javascript three.js webgl

Answer 1

Answer №1

Let's break down the process of your code in a simpler form:

function start() {
  action1();
}

function action1() {
  start();
}

First of all, the function start() is never triggered. Even if it was, it would lead to an endless loop, like this:

start > action > start > action > and so on...

Moreover, you are not incorporating the loaded items into your scene, resulting in nothing to display. Here is a guideline in pseudocode to ensure a sequential execution and avoid repetition:

// Declare scene and loader variables
let scene, loader;

function start() {
    // Initialize scene and loader
    scene = new THREE.Scene();
    loader = new STLLoader();

    // ...

    action1();
    animate();
}

function action1() {
    // Utilize the loader to import geometry
    loader.load("Violet_001.stl", (model)=>{
        // Upon loading geometry, create a mesh
        let object1 = new THREE.Mesh(
            model,
            new THREE.MeshLambertMaterial({color: 0x00ff00})
        );
        object1.scale.set(0.2, 0.2, 0.2);

        // Add the Mesh to the scene for rendering
        scene.add(object1);
    });
}

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

// Lastly, remember to kick start the process by calling init!
start();

Answer 2

Let's break down the process of your code in a simpler form:

function start() {
  action1();
}

function action1() {
  start();
}

First of all, the function start() is never triggered. Even if it was, it would lead to an endless loop, like this:

start > action > start > action > and so on...

Moreover, you are not incorporating the loaded items into your scene, resulting in nothing to display. Here is a guideline in pseudocode to ensure a sequential execution and avoid repetition:

// Declare scene and loader variables
let scene, loader;

function start() {
    // Initialize scene and loader
    scene = new THREE.Scene();
    loader = new STLLoader();

    // ...

    action1();
    animate();
}

function action1() {
    // Utilize the loader to import geometry
    loader.load("Violet_001.stl", (model)=>{
        // Upon loading geometry, create a mesh
        let object1 = new THREE.Mesh(
            model,
            new THREE.MeshLambertMaterial({color: 0x00ff00})
        );
        object1.scale.set(0.2, 0.2, 0.2);

        // Add the Mesh to the scene for rendering
        scene.add(object1);
    });
}

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

// Lastly, remember to kick start the process by calling init!
start();

Guide to displaying multiple 3D models using the stlloader technique

Answer №1

Similar questions

Concealing div containers and eliminating gaps

Troubleshooting the issue of browser prefix injections not functioning properly in Vue when using the

Determine if an HTML element contains a specific class using JavaScript

Understanding the specific types of subclasses derived from an abstract generic class in Typescript

Getting an out-of-range exception (System.ArgumentOutOfRangeException) in C# Razor pages while attempting an AJAX call

What is the best way to implement custom serialization for Date types in JSON.stringify()?

HTML: Mark the chosen hyperlink or tag

Elevate with Ease: Tailwind's Height Transition

remove MongoDB entry using unique identifier

What is the best way to create a function that shifts a musical note up or down by one semitone?

Tips for styling buttons in react-admin with custom CSS

Add a new value to the translation token using ng-bind

Invoking servlet using Ajax

Console displays null as the attribute value

Associate text with a color from a predetermined list (JavaScript)

Using the Loop Function in Node.js with EJS Templates

Unlocking Controller Functions in AngularJS Directives: A Step-by-Step Guide

Jssor's dynamic slider brings a touch of sophistication to preview upcoming images

Is it possible to use JavaScript to make a CSS animation mimic the behavior of a :hover effect?

javascript popup appears twice in IE when using PHP