Explore the world of threejs with a sphere adorned with cube bumps

Currently, I am navigating through the internet in search of a solution for my problem. The example I came across is quite impressive, take a look: . My dilemma lies in converting these squares into CSS cubes while ensuring that they do not get cut off by the sphere. I need the cubes to bump over the sphere instead. Can anyone offer advice on how to achieve this or suggest an alternative starting point? I'm still new to using three.js, so any guidance is appreciated.

Thank you.

Following Lee Tylor's recommendation, here is more information about what I have accomplished:

In line with the periodic table sample in Three.js, I am initializing the sphere exactly as shown in the example. However, when certain words are typed in the inputs, they transform into cubes. While this part works fine, the issue arises with the cubes appearing flat on the sides. My goal is to make the cubes protrude over the sphere. I am unsure whether this is a CSS-related problem or an issue with three.js.

Check out the live example here:

You can find the file where all the action happens at dev.certatim.com/panhaptic/sphere_js/app/javascripts/functions.js

I hope this additional information clarifies my query. :(

javascriptcssthree.js

Answer №1

One way to create a cube using CSS3DRenderer in JavaScript is as follows:

// Define parameters
var r = Math.PI / 2;
var d = 50;
var pos = [ [ d, 0, 0 ], [ -d, 0, 0 ], [ 0, d, 0 ], [ 0, -d, 0 ], [ 0, 0, d ], [ 0, 0, -d ] ];
var rot = [ [ 0, r, 0 ], [ 0, -r, 0 ], [ -r, 0, 0 ], [ r, 0, 0 ], [ 0, 0, 0 ], [ 0, 0, 0 ] ];

// Create cube object
var cube = new THREE.Object3D();
scene.add(cube);

// Create sides of the cube
for (var i = 0; i < 6; i++) {

    var element = document.createElement('div');
    element.style.width = '100px';
    element.style.height = '100px';
    element.style.background = new THREE.Color(Math.random() * 0xffffff).getStyle();
    element.style.opacity = '0.50';

    var object = new THREE.CSS3DObject(element);
    object.position.fromArray(pos[i]);
    object.rotation.fromArray(rot[i]);
    cube.add(object);

}

You can view an example on Fiddle: http://jsfiddle.net/MdPrb/7

This code uses three.js version r.64.

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

What are some tips for managing the hover effect using CSS3?

Here's a demonstration of my current setup. When you hover over the black box, a transition occurs and reveals my tooltip. However, I only want the tooltip to appear when hovering over the black box itself. Currently, the transition also triggers if y ...

javascriptjqueryhtmlcss

Tips for organizing data and dynamically linking options to another select value?

One of my challenges involves working with two select elements. The first select allows for multiple options, while the second select is dependent on the choice made in the first one. <select class="form-control" id="select1"> <option value=""& ...

javascriptjquerydictionary

How can Vue 3's v-bind=$attrs be implemented effectively?

I am currently in the process of migrating my Vue 2 application to Vue 3. According to the official documentation, the $listeners object has been removed in Vue 3 and event listeners are now part of $attrs. This includes taking non-prop attributes like cla ...

javascriptvue.jsvuejs2vue-componentvuejs3

Push Button Unleashes a Cascade of Buttons

After creating a dropdown button, I encountered an issue where replicating it multiple times resulted in all the buttons on the page opening simultaneously. I initially thought that wrapping the button in a class called "dropdown" would prevent this from h ...

htmlcssbootstrap-4

Tips for toggling the visibility of an element when a button is clicked in React

In my todo list, I need to display the details of each item when clicked on a button. There are two buttons available: "View Details" and "Hide Details". Below is the code snippet: class Todos extends React.Component{ construc ...

javascripthtmlcssreactjs

Once the grunt build process is complete, execute "heroku run fileName" to launch the

In order to gain a deeper understanding of Heroku scheduling, I decided to delve into an informative post on the topic and followed the instructions provided to build the app. The highlight of the post was when I successfully executed heroku run numCheck a ...

javascriptnode.jsangularjsherokuyeoman

How to assign a specific class to a list item in AngularJS based on its attribute value

Having some difficulties with this code: .directive('mydirective', function() { return { template: '<ul>\ <li priority="500"><a href="#"><i></i>Inbox</a></li>\ ...

javascriptjqueryangularjsunderscore.js

Uploading files in chunks using a combination of HTML, JavaScript,

I've been using a file chunking solution (although I can't recall its origin), but I've made some modifications to suit my requirements. Most of the time, the file uploads successfully; however, there are instances where an error occurs. U ...

javascriptphphtml

Is there a way to eliminate the shadow effect on a specific part of a material-ui AppBar?

I want to remove the shadow that appears on the navbar when it overlaps with the sidebar. https://i.sstatic.net/eHh0u.png Currently, I am using Material-UI's AppBar component for my NavBar. export default function NavBar() { return ( <div&g ...

cssreactjsmaterial-uijsx

Tips for creating dynamic rope animations with canvas and CSS3 styling

Interested in creating a canvas animation, or possibly using CSS3 for the same purpose. Looking to add an automatic rope animation, similar to it swaying gently. I've searched for scripts and other solutions, but haven't found anything suitable. ...

htmlipadcsscanvasjquery-animate

Resetting initial values with Velocity.js post-animation

After animating elements into view on a page, I want to defer further animation through CSS classes. However, Velocity keeps all animated properties in the style= tag, hindering CSS transitions. My solution involves resetting the CSS upon completion, but ...

javascriptjquerycssanimationvelocity.js

Issues with CSS3 height transitions in a specific scenario

Check out this simplified version of my code on CodePen: http://codepen.io/anon/pen/pjZXob I am attempting to create a smooth transition in the height of the .destinationsTopicContent div, from 0 to auto. However, it is nested within a div that has visibi ...

htmlcss

Developing a personalized camera feature using ReactJS

After searching for a suitable npm library to create a custom camera component within my ReactJS project, I came across an article providing detailed information at this link. However, I am facing challenges in converting the existing pure JavaScript code ...

javascriptreactjsjsx

The command "bin" is not identified as an internal or external command in this npm script

I'm new to using node/npm and encountering an issue when attempting to start an npm script. Every time I try to execute a simple script like the one below, I get the error message "bin is not recognized as an internal or external command." I have suc ...

javascriptnpmbin

Implementing non-blocking asynchronous object return in a node.js function

Struggling with a function that accesses data from a JSON file and queries it for a specific key. Unfortunately, the return function seems to be executing before the query can find the key. Even after querying and attempting to return the variable queryre ...

javascriptjsonnode.jsasynchronous

Expand the grid with extra rows once it has been generated, especially when dealing with a large volume of database records, utilizing JQGrid or JSGrid

Having a large dataset (json) that takes too long to display in the grid for users, I'm looking for a solution. My idea is to initially run a filtered query (e.g. records from the current year) to quickly build the grid. Once the grid is presented to ...

javascriptjsonajaxjqgridjsgrid

Tips for creating a multi-line text field with ellipsis using a div in CSS

Similar Question: How to Insert Ellipsis in HTML Tag for Content that is Too Wide Using CSS to Display “…” on Overflowing Multiline Blocks Hello, I am attempting to create a div tag to present a question. The size of this div bo ...

csshtmltextellipsis

Styling elements with CSS to create horizontal and vertical lines between them

Struggling to replicate the design elements from this image using CSS. Specifically, I need help creating a horizontal yellow line over the title "nossos numeros" and vertical blue lines between "Cursos", "Alunos", and "Aulas". I am working with Bootstrap ...

csstwitter-bootstrap-4

Is there a way to convert Firebase JSON into a JavaScript object? If so, what is the method to

I am currently working on using the kimono web scraper in conjunction with Firebase to obtain data stored as JSON. To convert the JSON to XML, I am utilizing a JavaScript library which allows me to create a variable from the JSON file (an example is shown ...

javascriptjsonxmlfirebasefirebase-realtime-database

Utilizing the navigator object in React Navigator and expo to enhance component functionality

My React Native application requires a redirection on a specific component. Within my main App.js component, I have the following code snippet: import React from "react"; import { Text } from "react-native"; import { createAppContainer } from "react-nav ...

javascriptreactjsreact-nativereact-navigation