Create a Three.js material that displays only the outline without any fill

Question

Create a Three.js material that displays only the outline without any fill

Currently, I am attempting to create a visualization of a space time cube like the one shown at this link: using the webgl javascript framework known as three.js. One challenge I have encountered is trying to achieve the effect of having the cube display only its outlines with a material. To tackle this, I decided to create 6 planes to represent the walls of the cube instead of using an actual cube geometry due to difficulties in rendering objects inside it. The closest solution I managed to reach was setting wireframe to true. However, this approach resulted in not just rendering the outlines but also showing every other line of each polygon, which wasn't ideal. Regrettably, navigating the three.js "API" has proven to be less than helpful in finding a suitable solution.

javascript 3d three.js visualization diagram

Answer 1

Answer №1

Extracted from "Guidance on creating lines" - ThreeJS documentation

If you have set up your scene, renderer and camera, you are ready to proceed.

var material = new THREE.LineBasicMaterial({
    color: 0x0000ff
});

var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-10, 0, 0));
// Following these points creates a line
geometry.vertices.push(new THREE.Vector3(0, 10, 0));
geometry.vertices.push(new THREE.Vector3(10, 0, 0));

var line = new THREE.Line(geometry, material);  
scene.add(line);

// Update function
renderer.render(scene, camera);

Answer 2

Extracted from "Guidance on creating lines" - ThreeJS documentation

If you have set up your scene, renderer and camera, you are ready to proceed.

var material = new THREE.LineBasicMaterial({
    color: 0x0000ff
});

var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-10, 0, 0));
// Following these points creates a line
geometry.vertices.push(new THREE.Vector3(0, 10, 0));
geometry.vertices.push(new THREE.Vector3(10, 0, 0));

var line = new THREE.Line(geometry, material);  
scene.add(line);

// Update function
renderer.render(scene, camera);

Create a Three.js material that displays only the outline without any fill

Answer №1

Similar questions

Error: A semicolon is required before the statement in an HTML select tag

How can Vuetify be used to create a v-row that floats above other elements, maintains a fixed position, and still adheres to the width of its parent element

Problem with jQueryUI Sortable cancel property preventing input editing

The transition effect does not seem to be functioning correctly when adding a class

Breaking down a intricate JavaScript expression in order to reformat it into a different structure

The WebSocket connection in the browser, when accessed through a remote server, typically shows a CLOSED state in the readyState property during the on

"Implementing a function triggered by a change event within a concealed input

There is a lag in the loading of css stylesheets

Sending a two-dimensional array through an HTML form field using JavaScript

Achieve compatibility for two different types of route parameters in Vue.js

Shader utilizing alpha channel to conceal neighboring objects

When you utilize React.createRef, the value of `current` is consistently null

Error: Unable to access property 'BOTTOM' of an object that is not defined

Using Vue to bring in an npm module that does not have any exports

Error message "env: '/bin/flask': No such file or directory" pops up while executing the command "npm run start-backend"

Can ngFor be utilized within select elements in Angular?

Vue-Router 4 now automatically redirects the default URL to a "404 Page Not Found

Ways to completely eliminate a global component in VueJS

Determining height of an element in AngularJS directive prior to rendering the view

"Enhance your website with a backspace button using jquery - here's