¿Cómo puedo representar gráficamente las dimensiones de ancho, alto y profundidad?

Quiero esto, pero se ajusta a los tamaños ingresados ​​en un formulario en una página web en HTML/CSS bastante normal:

ingrese la descripción de la imagen aquí

Allá por la década de 1990, podía mostrar las proporciones de una caja en 3D usando VRML y tener los controles ajustables con bonitos controles deslizantes/campos de entrada de texto. Tampoco tomaría todo el día hacer ejercicio. La caja se podía iluminar y se podía ver en 3D perfecto desde cualquier ángulo.

Una década después, no sé cuál es la mejor forma de representar una caja simple con proporciones relativas. Quiero algo que funcione en todos los navegadores.

¿Qué tan dura puede ser una caja?

@DA01: ¿Sería este un candidato para la migración a UX?
parece que Theodore nos está preguntando cómo construir tal cosa. Esto pertenece al desbordamiento de pila (donde mi respuesta sería considerar mirar algunas de las bibliotecas Canvas JS más nuevas que pueden hacer algunas cosas en 3D).
Acabo de intentar migrar esto a SO, pero creo que la recompensa me impide hacerlo.

Respuestas (4)

Desafortunadamente, no hay forma de lograr esto solo con HTML y CSS. Casi toda la interactividad en una página web que no sean enlaces requiere escribir código en JavaScript.

Ahora, si está dispuesto/puede sumergirse en un poco de programación, el aspecto 3D de las cosas hace que el problema sea un poco (pero no enormemente) más complejo. Si solo tuviera que ajustar el ancho y la altura (es decir, 2D), sería casi trivial de programar, pero ajustar la profundidad en la imagen complica las cosas.

Probablemente querrá dibujar el cuadro en código usando una API con comandos de dibujo lineal, como Processing.js

Creo que processing.js es exactamente lo que necesito: la primitiva de cuadro debería hacer el trabajo bien.

Al comparar VRML con la tecnología moderna, recuerde que los navegadores no tenían compatibilidad nativa con VRML, los usuarios necesitaban complementos como Cosmo Player para ver cualquier cosa.

Dicho esto, se me ocurren dos formas en las que puedes lograr tu objetivo:

Sugeriría revisar Three.js. Usar eso con HTML5/CSS3 debería ser una solución bastante sencilla.

Aquí hay algunos enlaces para empezar.

http://en.wikipedia.org/wiki/Threejs
http://www.aerotwist.com/tutorials/primeros pasos-con-tres-js
/ http://mrdoob.github.com/tres.js/

Después de una evaluación exhaustiva, parece que dibujar un cuadro simple en 3D (no 3D ortográfico) está más allá de lo que es capaz de hacer el navegador web moderno. Esto es repugnante y estoy completamente horrorizado.

La forma en que hice esto fue para no molestarme, para tener un dibujo simple y eso fue todo. Sueños reducidos. ¿Qué tan difícil puede ser una caja simple? Demasiado difícil para la web plana de hoy.

Sería más informativo comentar las respuestas dadas y dónde no cubrieron su requisito. De un vistazo, la respuesta de imsky parece cubrirlo.
Dediqué mucho tiempo a tratar de dibujar un cuadro simple en 3D en una página web: todo lo que necesitaba era una imagen 2D de 3D, sin interacción, modelo de iluminación intrincado ni nada involucrado . Sin embargo, para mi irritación, parece que ninguno de los kits de herramientas '3d en la web' realmente funcionan, podrían funcionar si tiene el navegador/sistema operativo correcto, ¡pero no funcionan en el mío! Lo que no entiendo es que no sería posible tener un juego de computadora/consola en 2D, tiene que ser en 3D, sin embargo, con Internet parece que colectivamente no nos importa el 3D; si lo hiciéramos, tendría funcionó correctamente hace años. ¡Me desespero!
pone los ojos en blanco Bueno, en primer lugar, ciertamente puedes desarrollar videojuegos en 2D, no estoy seguro de dónde tienes la impresión de que no puedes. En segundo lugar, aunque desearía que la web 3D estuviera más avanzada de lo que está, ciertamente funciona y he estado trabajando con tecnologías web 3D durante años stackoverflow.com/questions/6376705/…
Los ojos definitivamente se ponen en blanco : no voy a tener ninguna de esas tonterías de Flash en una página web de mi propia invención. No tengo ningún esfuerzo de WebGL que no funcione en las pantallas de los clientes. Semana 1 de cualquier módulo de gráficos 3D de Comp Sci y tiene un cuadro en la pantalla con unas pocas líneas de código. Hemos tenido esta cosa de Internet desde que Al Gore lo inventó y parece que soy la única persona que quiere dibujar un 3D básico en un cuadro 2D. Esto sería más fácil en el ZX81.
Mira los ejemplos de HTML5 de Apple.
¿Cómo puedo representar gráficamente las dimensiones de ancho, alto y profundidad?
RespuestasAquíPolítica de privacidad1y, 0v