Three.js failing to display objects

Question

Three.js failing to display objects

I am currently developing a project using modular Three.js with TypeScript. Although the scene is being created successfully, I am facing an issue where no elements are being rendered on the canvas. Below is the snippet of my code:

import * as THREE from 'three/build/three.module'

class App {
    private scene = new THREE.Scene();
    private camera;
    private renderer = new THREE.WebGLRenderer();
    private container = document.getElementById('widget');

    constructor() {
        this._init();
        let geometry = new THREE.BoxGeometry(1, 1, 1);
        let material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
        let cube = new THREE.Mesh(geometry, material);
        this.scene.add(cube);
    }

    _init() {
        this.camera = new THREE.PerspectiveCamera(45, this.container.clientWidth / this.container.clientHeight, 1, 1000);
        this.camera.position.z = 5;
        this.scene.add(this.camera)
        this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
        this.container.appendChild(this.renderer.domElement);
    }
}

new App()

javascript typescript three.js

Answer 1

Answer №1

Your code is not displaying anything because you haven't specified it to render yet.

When referring to the "getting started" documentation at , it's important to note that you've only covered the "creating the scene" aspect so far.

In addition to setting up the scene, you also need to include the steps for rendering the scene as outlined in the tutorial.

Somewhere within your code, there should be a call to

yourAppInstance.renderer.render()

method. This can be done by storing your App instance in a variable like this:

var myApp = new App()

myApp.renderer.render(myApp.camera, myApp.scene)

If working with TypeScript, consider how you access these components in a safe manner.

Alternatively, you can integrate the render call within your constructor function:

constructor() {
    this._init();
    let geometry = new THREE.BoxGeometry(1, 1, 1);
    let material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
    let cube = new THREE.Mesh(geometry, material);
    this.scene.add(cube);
    this.renderer.render(this.camera,this.scene) // <-- add this

}

Answer 2

Your code is not displaying anything because you haven't specified it to render yet.

When referring to the "getting started" documentation at , it's important to note that you've only covered the "creating the scene" aspect so far.

In addition to setting up the scene, you also need to include the steps for rendering the scene as outlined in the tutorial.

Somewhere within your code, there should be a call to

yourAppInstance.renderer.render()

method. This can be done by storing your App instance in a variable like this:

var myApp = new App()

myApp.renderer.render(myApp.camera, myApp.scene)

If working with TypeScript, consider how you access these components in a safe manner.

Alternatively, you can integrate the render call within your constructor function:

constructor() {
    this._init();
    let geometry = new THREE.BoxGeometry(1, 1, 1);
    let material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
    let cube = new THREE.Mesh(geometry, material);
    this.scene.add(cube);
    this.renderer.render(this.camera,this.scene) // <-- add this

}

Three.js failing to display objects

Answer №1

Similar questions

Steps for incorporating a type declaration for an array of objects in a React application with TypeScript

javascript issue with showing content on click

Encountering a problem when using the routingService to navigate inside a JavaScript function

Angular 2: Copious Errors in the Mix

What is the function of the Angular dependency injection mechanism?

Tips for uploading information to a web service

The Vue application encountered an issue while trying to mount the component due to the absence of a defined template or render function. The error was triggered

Receiving and monitoring events triggered by a Vue component that was dynamically mounted

How to Retrieve Video Viewing Time Using jQuery

What is the best method to retrieve the value from a chosen list item?

The findOneAndUpdate function in MongoDB is adding a new record into the database

Steps for invoking the next() function within the beforeRouterEnter guard

Iterate over a collection of objects to find connections between the starting and ending points, and retrieve the number of occurrences

Encountering issues with the setSinkId() function in an Electron application

Implementing Laravel's functionality for calculating average ratings with the help of jQuery

Unlock the message with Proxy Re-encryption technology

What is preventing this from retrieving the source code?

Retrieving multiple images from a directory and storing the image filenames in a JSON array

Does an invisible property value exist?

The file 'index.js' does not have a default export