This discussion is archived
1 2 Previous Next 16 Replies Latest reply: Jan 5, 2013 10:42 AM by KonradZuse RSS

Scene Builder questions

KonradZuse Explorer
Currently Being Moderated
Hello all!

I am curious about a few things with Scene builder 1.0 and 1.1.

1. How come there is 3D rotations and such, but there are only 2D shapes? No cubes or anything....

2. Why is there touch, and swipe settings if JavaFX isn't on mobile right now(Which is what I read, but I heard that at the last JavaOne there was Android with JavaFX)??

3. Why isnt there more versatility within the inners of charts and such. We have to do all of that manually, which I can understand, but it would be nice to set up everything via scene builder...



I have seen you can make custom controls, what about shapes? I still need to read more of the docs. I think it's ridiculous there aren't 3D shapes, I really need cubes for a project.... Pictures on each side would be nice too :)
  • 1. Re: Scene Builder questions
    KonradZuse Explorer
    Currently Being Moderated
    bump, no one has Scene Builder experience?
  • 2. Re: Scene Builder questions
    James_D Guru
    Currently Being Moderated
    I've not really worked with any of the aspects of JavaFX you're asking about (3D, mobile, etc). But since no-one's responded I'll give you my $0.02 worth. There are others out there far better qualified to respond. I don't use SceneBuilder, but AIUI pretty much anything you can do in JavaFX can be managed with NetBeans and SceneBuilder.

    1. You can make 3D shapes by creating 2D shapes, transforming them in a 3D coordinate system, and piecing the results together. It's a young technology: there are plenty of things that still need adding (many probably in higher demand than 3D shapes), but it's not that hard to create the things you need while you're waiting.

    2. There are other touch screen devices out there. See http://fxexperience.com/2012/10/building-the-javaone-kiosks-park-1/ for example. And you shouldn't completely rule out JavaFX being available for mobile in the future http://fxexperience.com/2012/12/javafx-for-tablets-mobile/.

    3. As I said, it's a young technology. But what specifically are you looking to do?

    For the 3D question, here's a 15 minute cube demo. Like I said, I've not played with this much, so it's not exactly perfect, but it makes a cube and spins it around. I don't see any reason you couldn't do this with ImageViews instead of Rectangles.
    import javafx.animation.RotateTransition;
    import javafx.animation.Transition;
    import javafx.application.Application;
    import javafx.geometry.Point3D;
    import javafx.scene.Group;
    import javafx.scene.PerspectiveCamera;
    import javafx.scene.Scene;
    import javafx.scene.paint.Color;
    import javafx.scene.shape.Rectangle;
    import javafx.scene.transform.Rotate;
    import javafx.scene.transform.Translate;
    import javafx.stage.Stage;
    import javafx.util.Duration;
    
    public class CubeDemo extends Application {
    
      private static final double CUBE_SIZE = 100;
    
      @Override
      public void start(Stage primaryStage) {
        final Point3D xAxis = new Point3D(1, 0, 0);
        final Point3D yAxis = new Point3D(0, 1, 0);
    
        Rectangle bottomFace = createRectangle(Color.BLUE);
    
        Rectangle topFace = createRectangle(Color.GREEN);
        topFace.getTransforms().addAll(new Translate(0, 0, -CUBE_SIZE));
    
        Rectangle frontFace = createRectangle(Color.RED);
        frontFace.getTransforms().addAll(new Rotate(-90, xAxis),
            new Translate(0, CUBE_SIZE / 2, CUBE_SIZE / 2));
    
        Rectangle backFace = createRectangle(Color.YELLOW);
        backFace.getTransforms().addAll(new Rotate(90, xAxis),
            new Translate(0, -CUBE_SIZE / 2, CUBE_SIZE / 2));
    
        Rectangle leftFace = createRectangle(Color.MAGENTA);
        leftFace.getTransforms().addAll(new Rotate(-90, yAxis),
            new Translate(-CUBE_SIZE / 2, 0, CUBE_SIZE / 2));
    
        Rectangle rightFace = createRectangle(Color.CYAN);
        rightFace.getTransforms().addAll(new Rotate(90, yAxis),
            new Translate(CUBE_SIZE / 2, 0, CUBE_SIZE / 2));
    
        Group root = new Group();
        root.getChildren().addAll(leftFace, bottomFace, frontFace, topFace,
            backFace, rightFace);
        root.relocate(3 * CUBE_SIZE / 2, 3 * CUBE_SIZE / 2);
    
        RotateTransition rotation = new RotateTransition(new Duration(3000), root);
        rotation.setAxis(new Point3D(1, 1, 1));
        rotation.setFromAngle(0);
        rotation.setToAngle(360);
        rotation.setCycleCount(Transition.INDEFINITE);
    
        Scene scene = new Scene(root, 4 * CUBE_SIZE, 4 * CUBE_SIZE);
        PerspectiveCamera camera = new PerspectiveCamera();
        scene.setCamera(camera);
        primaryStage.setScene(scene);
        primaryStage.show();
        rotation.play();
      }
    
      private Rectangle createRectangle(final Color fill) {
        Rectangle rect = new Rectangle(-CUBE_SIZE / 2, -CUBE_SIZE / 2, CUBE_SIZE,
            CUBE_SIZE);
        Color fillCol = fill.deriveColor(0, 1, 1, 0.6);
        rect.setFill(fillCol);
        return rect;
      }
    
      public static void main(String[] args) {
        launch(args);
      }
    }
  • 3. Re: Scene Builder questions
    KonradZuse Explorer
    Currently Being Moderated
    Cubes already exist in the API. What I want to know is if I can use FXML and transfer a cube over to Scene Builder and manipulate it there. I thought about using 6 rectangles, but that is stupid....

    I know that you can import FXML and Custom Controls... what about shapes?
    /**
    
     * Copyright (c) 2008, 2011 Oracle and/or its affiliates.
    
     * All rights reserved. Use is subject to license terms.
    
     */
    
    import javafx.scene.transform.Rotate;
    
    import javafx.scene.PerspectiveCamera;
    
    import javafx.scene.transform.Translate;
    
    import javafx.application.Application;
    
    import javafx.scene.Group;
    
    import javafx.scene.Scene;
    
    import javafx.stage.Stage;
    
    import javafx.animation.Animation;
    
    import javafx.animation.KeyFrame;
    
    import javafx.animation.KeyValue;
    
    import javafx.animation.Timeline;
    
    import javafx.scene.Group;
    
    import javafx.scene.Node;
    
    import javafx.scene.paint.Color;
    
    import javafx.scene.shape.RectangleBuilder;
    
    import javafx.scene.transform.Rotate;
    
    import javafx.util.Duration;
    
     
    
    /**
    
     * A sample that demonstrates an animated rotation of 3D cubes. When the
    
     * application runs in standalone mode, the scene must be constructed with
    
     * the depthBuffer argument set to true, and the root node must have depthTest
    
     * set to true.
    
     *
    
     * @see javafx.scene.transform.Rotate
    
     * @see javafx.scene.paint.Color
    
     * @see javafx.scene.shape.RectangleBuilder
    
     */
    
    public class CubeSample extends Application {
    
     
    
        private Timeline animation;
    
     
    
        private void init(Stage primaryStage) {
    
            Group root = new Group();
    
            primaryStage.setResizable(false);
    
            primaryStage.setScene(new Scene(root, 400,150,true));
    
            primaryStage.getScene().setCamera(new PerspectiveCamera());
    
            root.getTransforms().addAll(
    
                new Translate(400 / 2, 150 / 2),
    
                new Rotate(180, Rotate.X_AXIS)
    
            );
    
            root.getChildren().add(create3dContent());
    
        }
    
     
    
        public Node create3dContent() {
    
            Cube c = new Cube(50,Color.RED,1);
    
            c.rx.setAngle(45);
    
            c.ry.setAngle(45);
    
            Cube c2 = new Cube(50,Color.GREEN,1);
    
            c2.setTranslateX(100);
    
            c2.rx.setAngle(45);
    
            c2.ry.setAngle(45);
    
            Cube c3 = new Cube(50,Color.ORANGE,1);
    
            c3.setTranslateX(-100);
    
            c3.rx.setAngle(45);
    
            c3.ry.setAngle(45);
    
     
    
            animation = new Timeline();
    
            animation.getKeyFrames().addAll(
    
                    new KeyFrame(Duration.ZERO,
    
                            new KeyValue(c.ry.angleProperty(), 0d),
    
                            new KeyValue(c2.rx.angleProperty(), 0d),
    
                            new KeyValue(c3.rz.angleProperty(), 0d)
    
                    ),
    
                    new KeyFrame(Duration.seconds(1),
    
                            new KeyValue(c.ry.angleProperty(), 360d),
    
                            new KeyValue(c2.rx.angleProperty(), 360d),
    
                            new KeyValue(c3.rz.angleProperty(), 360d)
    
                    ));
    
            animation.setCycleCount(Animation.INDEFINITE);
    
     
    
            return new Group(c,c2,c3);
    
        }
    
     
    
        public void play() {
    
            animation.play();
    
        }
    
     
    
        @Override public void stop() {
    
            animation.pause();
    
        }
    
     
    
        public class Cube extends Group {
    
            final Rotate rx = new Rotate(0,Rotate.X_AXIS);
    
            final Rotate ry = new Rotate(0,Rotate.Y_AXIS);
    
            final Rotate rz = new Rotate(0,Rotate.Z_AXIS);
    
            public Cube(double size, Color color, double shade) {
    
                getTransforms().addAll(rz, ry, rx);
    
                getChildren().addAll(
    
                    RectangleBuilder.create() // back face
    
                        .width(size).height(size)
    
                        .fill(color.deriveColor(0.0, 1.0, (1 - 0.5*shade), 1.0))
    
                        .translateX(-0.5*size)
    
                        .translateY(-0.5*size)
    
                        .translateZ(0.5*size)
    
                        .build(),
    
                    RectangleBuilder.create() // bottom face
    
                        .width(size).height(size)
    
                        .fill(color.deriveColor(0.0, 1.0, (1 - 0.4*shade), 1.0))
    
                        .translateX(-0.5*size)
    
                        .translateY(0)
    
                        .rotationAxis(Rotate.X_AXIS)
    
                        .rotate(90)
    
                        .build(),
    
                    RectangleBuilder.create() // right face
    
                        .width(size).height(size)
    
                        .fill(color.deriveColor(0.0, 1.0, (1 - 0.3*shade), 1.0))
    
                        .translateX(-1*size)
    
                        .translateY(-0.5*size)
    
                        .rotationAxis(Rotate.Y_AXIS)
    
                        .rotate(90)
    
                        .build(),
    
                    RectangleBuilder.create() // left face
    
                        .width(size).height(size)
    
                        .fill(color.deriveColor(0.0, 1.0, (1 - 0.2*shade), 1.0))
    
                        .translateX(0)
    
                        .translateY(-0.5*size)
    
                        .rotationAxis(Rotate.Y_AXIS)
    
                        .rotate(90)
    
                        .build(),
    
                    RectangleBuilder.create() // top face
    
                        .width(size).height(size)
    
                        .fill(color.deriveColor(0.0, 1.0, (1 - 0.1*shade), 1.0))
    
                        .translateX(-0.5*size)
    
                        .translateY(-1*size)
    
                        .rotationAxis(Rotate.X_AXIS)
    
                        .rotate(90)
    
                        .build(),
    
                    RectangleBuilder.create() // top face
    
                        .width(size).height(size)
    
                        .fill(color)
    
                        .translateX(-0.5*size)
    
                        .translateY(-0.5*size)
    
                        .translateZ(-0.5*size)
    
                        .build()
    
                );
    
            }
    
        }
    
     
    
     
    
        public double getSampleWidth() { return 400; }
    
     
    
        public double getSampleHeight() { return 150; }
    
     
    
        @Override public void start(Stage primaryStage) throws Exception {
    
            init(primaryStage);
    
            primaryStage.show();
    
            play();
    
        }
    
        public static void main(String[] args) { launch(args); }
    
    }
    Edited by: KonradZuse on Jan 1, 2013 2:42 PM

    now I realize that they use the retangle builder, and create their own class of rectangles... Hmph... I thought cubes were part of it.... Makes sense now... I guess I will make a cube group and work that... Thanks!

    Edited by: KonradZuse on Jan 1, 2013 3:03 PM
  • 4. Re: Scene Builder questions
    jsmith Guru
    Currently Being Moderated
    now I realize that they use the retangle builder, and create their own class of rectangles... Hmph... I thought cubes were part of it.... Makes sense now... I guess I will make a cube group and work that...
    Konrad, the primitive you are requesting is proposed to be added to JavaFX 8:
    See: https://wikis.oracle.com/display/OpenJDK/3D+Features
    javafx.scene.shape3d.Box

    For your purposes in JavaFX 2.2, you will need to stick to rectangles in a group to build your cube.
  • 5. Re: Scene Builder questions
    EricLePonner Explorer
    Currently Being Moderated
    KonradZuse wrote:
    Hello all!

    I am curious about a few things with Scene builder 1.0 and 1.1.

    1. How come there is 3D rotations and such, but there are only 2D shapes? No cubes or anything....

    2. Why is there touch, and swipe settings if JavaFX isn't on mobile right now(Which is what I read, but I heard that at the last JavaOne there was Android with JavaFX)??
    Scene Builder is aligned on JFX 2.2.x capabilities.
    3D shapes will be part of JFX 8.
    Concerning touch and swipe, I've not tested them but I guess they are
    effective on a laptop with a trackpad.

    >
    3. Why isnt there more versatility within the inners of charts and such. We have to do all of that manually, which I can understand, but it would be nice to set up everything via scene builder...
    Straight answer is "because we don't have enough time to do everything" :)
    Shapes have been put at the end of the priority list for now.
    But we may reconsider that someday.

    >
    >
    >
    I have seen you can make custom controls, what about shapes?
    Scene Builder should be able to load FXML containing shape subclasses as well.
    I still need to read more of the docs. I think it's ridiculous there aren't 3D shapes, I really need cubes for a project.... Pictures on each side would be nice too :)
  • 6. Re: Scene Builder questions
    KonradZuse Explorer
    Currently Being Moderated
    user13344276 wrote:
    KonradZuse wrote:
    Hello all!

    I am curious about a few things with Scene builder 1.0 and 1.1.

    1. How come there is 3D rotations and such, but there are only 2D shapes? No cubes or anything....

    2. Why is there touch, and swipe settings if JavaFX isn't on mobile right now(Which is what I read, but I heard that at the last JavaOne there was Android with JavaFX)??
    Scene Builder is aligned on JFX 2.2.x capabilities.
    3D shapes will be part of JFX 8.
    Concerning touch and swipe, I've not tested them but I guess they are
    effective on a laptop with a trackpad.
    3. Why isnt there more versatility within the inners of charts and such. We have to do all of that manually, which I can understand, but it would be nice to set up everything via scene builder...
    Straight answer is "because we don't have enough time to do everything" :)
    Shapes have been put at the end of the priority list for now.
    But we may reconsider that someday.
    I have seen you can make custom controls, what about shapes?
    Scene Builder should be able to load FXML containing shape subclasses as well.
    I still need to read more of the docs. I think it's ridiculous there aren't 3D shapes, I really need cubes for a project.... Pictures on each side would be nice too :)
    Thanks gents! I will wait for JDK 8 to come out (Cannot wait for that and FX 8) and hopefully things are upgraded nicely....

    You also posted about the priority list, but I wasn't talking about shapes, I was talking about creating series and datapoints for charts and graphs within scene builder...

    I also figured out how to create images. For anyone who is interested you do in your rectangle builder .fill(new ImagePattern(d1)); d1 is an image that is set to a certain URL, or within the class.
  • 7. Re: Scene Builder questions
    KonradZuse Explorer
    Currently Being Moderated
    Had another question, realized it is probably best in this same thread.
  • 8. Re: Scene Builder questions
    EricLePonner Explorer
    Currently Being Moderated
    You also posted about the priority list, but I wasn't talking about shapes, I was talking about creating series and datapoints for charts and graphs within scene builder...
    I made a typo : I also meant "charts".

    Eric
  • 9. Re: Scene Builder questions
    KonradZuse Explorer
    Currently Being Moderated
    I also am having another issue now.... I am able to make my dice rotate and have images perfectly if I make a normal FX class, but when I use the FXML, Controller Class, and Main class I get some funky cubes.....
    /*
     * To change this template, choose Tools | Templates
     * and open the template in the editor.
     */
    
    import java.net.URL;
    import java.util.ResourceBundle;
    import javafx.animation.Animation;
    import javafx.animation.KeyFrame;
    import javafx.animation.KeyValue;
    import javafx.animation.Timeline;
    import javafx.application.Application;
    import javafx.event.ActionEvent;
    import javafx.fxml.FXML;
    import javafx.fxml.Initializable;
    import javafx.scene.Group;
    import javafx.scene.Node;
    import javafx.scene.control.Label;
    import javafx.scene.image.Image;
    import javafx.scene.layout.Pane;
    import javafx.scene.paint.ImagePattern;
    import javafx.scene.shape.RectangleBuilder;
    import javafx.scene.transform.Rotate;
    import javafx.stage.Stage;
    import javafx.util.Duration;
    
    /**
     *
     * @author Konrad
     */
    public class ZonkController
    {
                
        Image d1 = new Image(getClass().getResourceAsStream("Dice1.gif"));
        Image d2 = new Image(getClass().getResourceAsStream("Dice2.gif"));
        Image d3 = new Image(getClass().getResourceAsStream("Dice3.gif"));
        Image d4 = new Image(getClass().getResourceAsStream("Dice4.gif"));
        Image d5 = new Image(getClass().getResourceAsStream("Dice5.gif"));
        Image d6 = new Image(getClass().getResourceAsStream("Dice6.gif"));
    
        private Timeline animation;
        @FXML
        private Pane pane;
        
        @FXML
        private Label label;
        
        @FXML
        private void handleButtonAction(ActionEvent event) {
            System.out.println("You clicked me!");
            label.setText("Hello World!");
            pane.getChildren().add(content());
            
            animation.play();
        }
        
      
        
                
        public Node content()
        {
            Cube c = new Cube(105);
            c.rx.setAngle(45);
           c.ry.setAngle(45);
            Cube c2 = new Cube(100);
            c2.setTranslateX(200);
            c2.rx.setAngle(45);
            c2.ry.setAngle(45);
            Cube c3 = new Cube(105);
            c3.setTranslateX(-200);
            c3.rx.setAngle(45);
            c3.ry.setAngle(45);
             Cube c4 = new Cube(105);
            c4.setTranslateX(-400);
                    Cube c5 = new Cube(105);
            c5.setTranslateX(400);
    
            animation = new Timeline();
            animation.getKeyFrames().addAll(
                   new KeyFrame(Duration.ZERO,
                            new KeyValue(c.ry.angleProperty(), 0d),
                            new KeyValue(c2.rx.angleProperty(), 0d),
                            new KeyValue(c3.rx.angleProperty(), 0d),
                            new KeyValue(c4.ry.angleProperty(), 0d),
                            new KeyValue(c5.rx.angleProperty(), 0d)
                    ),
                    new KeyFrame(Duration.seconds(1),
                            new KeyValue(c.ry.angleProperty(), 360d),
                            new KeyValue(c2.rx.angleProperty(), 360d),
                            new KeyValue(c3.rz.angleProperty(), 360d),
                            new KeyValue(c4.rx.angleProperty(), 360d),
                            new KeyValue(c5.ry.angleProperty(), 360d)
                    ));
            animation.setCycleCount(Animation.INDEFINITE);
    
            return new Group(c,c2,c3,c4,c5);
        }
        
        
        public class Cube extends Group
        {
            final Rotate rx = new Rotate(0,Rotate.X_AXIS);
            final Rotate ry = new Rotate(0,Rotate.Y_AXIS);
            final Rotate rz = new Rotate(10,20,30);
            public Cube(double size) {
                getTransforms().addAll(rz, ry, rx);
                getChildren().addAll(
                    RectangleBuilder.create() // back face
                        .width(size).height(size)
                        .fill(new ImagePattern(d1))
                        .translateX(-0.5*size)
                        .translateY(-0.5*size)
                        .translateZ(0.5*size)
                        .build(),
                    RectangleBuilder.create() // bottom face
                        .width(size).height(size)
                        .fill(new ImagePattern(d2))
                        .translateX(-0.5*size)
                        .translateY(0)
                        .rotationAxis(Rotate.X_AXIS)
                        .rotate(90)
                        .build(),
                    RectangleBuilder.create() // right face
                        .width(size).height(size)
                        .fill(new ImagePattern(d3))
                        .translateX(-1*size)
                        .translateY(-0.5*size)
                        .rotationAxis(Rotate.Y_AXIS)
                        .rotate(90)
                        .build(),
                    RectangleBuilder.create() // left face
                        .width(size).height(size)
                        .fill(new ImagePattern(d4))
                        .translateX(0)
                        .translateY(-0.5*size)
                        .rotationAxis(Rotate.Y_AXIS)
                        .rotate(90)
                        .build(),
                    RectangleBuilder.create() // top face
                        .width(size).height(size)
                        .fill(new ImagePattern(d5))
                        .translateX(-0.5*size)
                        .translateY(-1*size)
                        .rotationAxis(Rotate.X_AXIS)
                        .rotate(90)
                        .build(),
                    RectangleBuilder.create() // top face
                        .width(size).height(size)
                        .fill(new ImagePattern(d6))
                        .translateX(-0.5*size)
                        .translateY(-0.5*size)
                        .translateZ(-0.5*size)
                        .build()
                );
            }
        }
    }
    Main
    /*
     * To change this template, choose Tools | Templates
     * and open the template in the editor.
     */
    
    import javafx.application.Application;
    import javafx.fxml.FXMLLoader;
    import javafx.scene.DepthTest;
    import javafx.scene.Parent;
    import javafx.scene.Scene;
    import javafx.scene.transform.Translate;
    import javafx.stage.Stage;
    
    /**
     *
     * @author Konrad
     */
    public class Zonk extends Application {
        
        @Override
        public void start(Stage stage) throws Exception {
            Parent root = FXMLLoader.load(getClass().getResource("Zonk.fxml"));
            ZonkController z = new ZonkController();
            Scene scene = new Scene(root, 2000,2000,true);
            
            
            stage.setScene(scene);
            stage.show();
            root.setDepthTest(DepthTest.ENABLE);
            root.getTransforms().addAll(new Translate(2000 / 2, 750 / 2));
      
            
        }
    
        /**
         * The main() method is ignored in correctly deployed JavaFX application.
         * main() serves only as fallback in case the application can not be
         * launched through deployment artifacts, e.g., in IDEs with limited FX
         * support. NetBeans ignores main().
         *
         * @param args the command line arguments
         */
        public static void main(String[] args) {
            launch(args);
        }
    }
    <?xml version="1.0" encoding="UTF-8"?>

    <?import java.lang.*?>
    <?import java.util.*?>
    <?import javafx.scene.*?>
    <?import javafx.scene.control.*?>
    <?import javafx.scene.layout.*?>
    <AnchorPane id="AnchorPane" prefHeight="363.0" prefWidth="320.0" xmlns:fx="http://javafx.com/fxml" fx:controller="ZonkController">
      <children>
        <Button fx:id="button" layoutX="126.0" layoutY="90.0" onAction="#handleButtonAction" text="Click Me!" />
        <Label fx:id="label" layoutX="126.0" layoutY="120.0" minHeight="16.0" minWidth="69.0" />
        <Pane fx:id="pane" layoutX="60.0" layoutY="136.0" prefHeight="200.0" prefWidth="200.0" />
      </children>
    </AnchorPane>
  • 10. Re: Scene Builder questions
    EricLePonner Explorer
    Currently Being Moderated
    public class Zonk extends Application {

    @Override
    public void start(Stage stage) throws Exception {
    Parent root = FXMLLoader.load(getClass().getResource("Zonk.fxml"));
    ZonkController z = new ZonkController();
    Scene scene = new Scene(root, 2000,2000,true);
    Note that FXMLLoader.load() will create and use its own instance of ZonkController.
    Value of 'z' won't be used.
    But I am not sure it's explain your 3D issue.

    Eric
  • 11. Re: Scene Builder questions
    KonradZuse Explorer
    Currently Being Moderated
    Eric Le Ponner wrote:
    public class Zonk extends Application {

    @Override
    public void start(Stage stage) throws Exception {
    Parent root = FXMLLoader.load(getClass().getResource("Zonk.fxml"));
    ZonkController z = new ZonkController();
    Scene scene = new Scene(root, 2000,2000,true);
    Note that FXMLLoader.load() will create and use its own instance of ZonkController.
    Value of 'z' won't be used.
    But I am not sure it's explain your 3D issue.

    Eric
    Thanks! I had that posted because I was going to do z.play(); to play the animation, but it didn't work, and I realized I could just set it in the Controller.... root.play(); wasn't listed I believe.


    and no that didn't fix it, because it existed before the animation. The dice were funky looking stopped as well... this is really annoying, I don't understand why the SAME EXACT code(except for the classes being laid out differently) is giving me issues :'(.

    Edited by: KonradZuse on Jan 4, 2013 12:37 PM
  • 12. Re: Scene Builder questions
    James_D Guru
    Currently Being Moderated
    I had a quick play with this; I couldn't actually get the rotating cubes looking right either using FXML or using plain Java code using the Rectangle and setFill(new ImagePattern(...)). I just had lots of flickering in both cases. I did, however, get it (sort of, I would need to work on the layout) working using ImageViews instead of rectangles for the faces.

    Something like this might help:
        public class Cube extends Group
        {
            final Rotate rx = new Rotate(0,Rotate.X_AXIS);
            final Rotate ry = new Rotate(0,Rotate.Y_AXIS);
            final Rotate rz = new Rotate(10,20,30);
            public Cube(double size) {
                getTransforms().addAll(rz, ry, rx);
                getChildren().addAll(
                    ImageViewBuilder.create() // back face
                      .image(d1)
                      .fitWidth(size).fitHeight(size)
                      .preserveRatio(true)
                      .translateX(-0.5*size)
                      .translateY(-0.5*size)
                      .translateZ(0.5*size)
                      .build(),
                    ImageViewBuilder.create() // bottom face
                      .image(d2)
                      .fitWidth(size).fitHeight(size)
                      .preserveRatio(true)
                      .translateX(-0.5*size)
                      .rotationAxis(Rotate.X_AXIS)
                      .rotate(90)
                      .build(),
                    ImageViewBuilder.create() // right face
                      .image(d3)
                      .fitWidth(size).fitHeight(size)
                      .preserveRatio(true)
                      .translateX(-size)
                      .translateY(-0.5*size)
                      .rotationAxis(Rotate.Y_AXIS)
                      .rotate(90)
                      .build(),
                    ImageViewBuilder.create() // left face
                      .image(d4)
                      .fitWidth(size).fitHeight(size)
                      .preserveRatio(true)
                      .translateY(-0.5*size)
                      .rotationAxis(Rotate.Y_AXIS)
                      .rotate(90)
                      .build(),
                    ImageViewBuilder.create() // top face
                      .image(d5)
                      .fitWidth(size).fitHeight(size)
                      .preserveRatio(true)
                      .translateX(-0.5*size)
                      .translateY(-size)
                      .rotationAxis(Rotate.X_AXIS)
                      .rotate(90)
                      .build(),
                    ImageViewBuilder.create() // front face
                      .image(d6)
                      .fitWidth(size).fitHeight(size)
                      .preserveRatio(true)
                      .translateX(-0.5*size)
                      .translateY(-0.5*size)
                      .translateZ(-0.5*size)
                      .build()
                );
            }
        }
    
    I think the ImageView behaves differently under layout than the Rectangle (Control vs Shape); so you may find you have to mess with the layout of the cube a bit.
  • 13. Re: Scene Builder questions
    KonradZuse Explorer
    Currently Being Moderated
    That's messed up....

    This is what I had done that worked.
    package cube;
    
    /**
     * Copyright (c) 2008, 2011 Oracle and/or its affiliates.
     * All rights reserved. Use is subject to license terms.
     */
    import javafx.scene.transform.Rotate;
    import javafx.scene.PerspectiveCamera;
    import javafx.scene.transform.Translate;
    import javafx.application.Application;
    import javafx.scene.Group;
    import javafx.scene.Scene;
    import javafx.stage.Stage;
    import javafx.animation.Animation;
    import javafx.animation.KeyFrame;
    import javafx.animation.KeyValue;
    import javafx.animation.Timeline;
    import javafx.scene.DepthTest;
    import javafx.scene.Group;
    import javafx.scene.Node;
    import javafx.scene.image.Image;
    import javafx.scene.paint.Color;
    import javafx.scene.paint.ImagePattern;
    import javafx.scene.shape.RectangleBuilder;
    import javafx.scene.transform.Rotate;
    import javafx.util.Duration;
    
    /**
     * A sample that demonstrates an animated rotation of 3D cubes. When the
     * application runs in standalone mode, the scene must be constructed with
     * the depthBuffer argument set to true, and the root node must have depthTest
     * set to true.
     *
     * @see javafx.scene.transform.Rotate
     * @see javafx.scene.paint.Color
     * @see javafx.scene.shape.RectangleBuilder
     */
    public class CubeSample extends Application {
    
        Image d1 = new Image(getClass().getResourceAsStream("/cube/Dice1.gif"));
        Image d2 = new Image(getClass().getResourceAsStream("/cube/Dice2.gif"));
        Image d3 = new Image(getClass().getResourceAsStream("/cube/Dice3.gif"));
        Image d4 = new Image(getClass().getResourceAsStream("/cube/Dice4.gif"));
        Image d5 = new Image(getClass().getResourceAsStream("/cube/Dice5.gif"));
        Image d6 = new Image(getClass().getResourceAsStream("/cube/Dice6.gif"));
    
        private Timeline animation;
        
        
        
        private void init(Stage primaryStage)
        {
            Group root = new Group();
            root.setDepthTest(DepthTest.ENABLE);
            primaryStage.setScene(new Scene(root, 2000,2000,true));
            primaryStage.getScene().setCamera(new PerspectiveCamera());
            root.getTransforms().addAll(
                new Translate(2000 / 2, 750 / 2)
               // new Rotate(180, Rotate.X_AXIS)
            );
            root.getChildren().add(create3dContent());
        }
    
        public Node create3dContent()
        {
            Cube c = new Cube(105);
            c.rx.setAngle(45);
           c.ry.setAngle(45);
            Cube c2 = new Cube(100);
            c2.setTranslateX(200);
            c2.rx.setAngle(45);
            c2.ry.setAngle(45);
            Cube c3 = new Cube(105);
            c3.setTranslateX(-200);
            c3.rx.setAngle(45);
            c3.ry.setAngle(45);
             Cube c4 = new Cube(105);
            c4.setTranslateX(-400);
                    Cube c5 = new Cube(105);
            c5.setTranslateX(400);
    
            animation = new Timeline();
            animation.getKeyFrames().addAll(
                   new KeyFrame(Duration.ZERO,
                            new KeyValue(c.ry.angleProperty(), 0d),
                            new KeyValue(c2.rx.angleProperty(), 0d),
                            new KeyValue(c3.rx.angleProperty(), 0d),
                            new KeyValue(c4.ry.angleProperty(), 0d),
                            new KeyValue(c5.rx.angleProperty(), 0d)
                    ),
                    new KeyFrame(Duration.seconds(1),
                            new KeyValue(c.ry.angleProperty(), 360d),
                            new KeyValue(c2.rx.angleProperty(), 360d),
                            new KeyValue(c3.rz.angleProperty(), 360d),
                            new KeyValue(c4.rx.angleProperty(), 360d),
                            new KeyValue(c5.ry.angleProperty(), 360d)
                    ));
            animation.setCycleCount(Animation.INDEFINITE);
    
            return new Group(c,c2,c3,c4,c5);
        }
    
        public void play() {
            animation.play();
        }
    
        @Override public void stop() {
            animation.pause();
        }
    
        public class Cube extends Group {
            final Rotate rx = new Rotate(0,Rotate.X_AXIS);
            final Rotate ry = new Rotate(0,Rotate.Y_AXIS);
            final Rotate rz = new Rotate(10,20,30);
            public Cube(double size) {
                getTransforms().addAll(rz, ry, rx);
                getChildren().addAll(
                    RectangleBuilder.create() // back face
                        .width(size).height(size)
                        .fill(new ImagePattern(d1))
                        .translateX(-0.5*size)
                        .translateY(-0.5*size)
                        .translateZ(0.5*size)
                        .build(),
                    RectangleBuilder.create() // bottom face
                        .width(size).height(size)
                        .fill(new ImagePattern(d2))
                        .translateX(-0.5*size)
                        .translateY(0)
                        .rotationAxis(Rotate.X_AXIS)
                        .rotate(90)
                        .build(),
                    RectangleBuilder.create() // right face
                        .width(size).height(size)
                        .fill(new ImagePattern(d3))
                        .translateX(-1*size)
                        .translateY(-0.5*size)
                        .rotationAxis(Rotate.Y_AXIS)
                        .rotate(90)
                        .build(),
                    RectangleBuilder.create() // left face
                        .width(size).height(size)
                        .fill(new ImagePattern(d4))
                        .translateX(0)
                        .translateY(-0.5*size)
                        .rotationAxis(Rotate.Y_AXIS)
                        .rotate(90)
                        .build(),
                    RectangleBuilder.create() // top face
                        .width(size).height(size)
                        .fill(new ImagePattern(d5))
                        .translateX(-0.5*size)
                        .translateY(-1*size)
                        .rotationAxis(Rotate.X_AXIS)
                        .rotate(90)
                        .build(),
                    RectangleBuilder.create() // top face
                        .width(size).height(size)
                        .fill(new ImagePattern(d6))
                        .translateX(-0.5*size)
                        .translateY(-0.5*size)
                        .translateZ(-0.5*size)
                        .build()
                );
            }
        }
    
    
        public double getSampleWidth() { return 400; }
    
        public double getSampleHeight() { return 150; }
    
        @Override public void start(Stage primaryStage) throws Exception {
            init(primaryStage);
            primaryStage.show();
            play();
        }
        public static void main(String[] args) { launch(args); }
    }
    You will need images as well...





    Thanks for all the help all, much appreciated!
  • 14. Re: Scene Builder questions
    KonradZuse Explorer
    Currently Being Moderated
    fixed it... I forgot that I didn't add the camera to the stage.

    stage.getScene().setCamera(new PerspectiveCamera());

    now it works, and makes sense why your coding also didn't work. I knew I was missing something.... Crazy it had to do with the camera perspective... CRAZY :)

    Edited by: KonradZuse on Jan 4, 2013 8:35 PM
1 2 Previous Next

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points