I need help doing this project 3 for this class, I understand the basic concept

Question

I need help doing this project 3 for this class, I understand the basic concept and have worked on code but i still dont get it, here is the requirements if you could help me figure out how to best implement this and get it to run with all the requirements that woudl be awesome.

In this project you will create a unique 3D animated scene composed of Three.js graphic components. The scene should include animation, lighting and multiple objects.

Requirements:

Using Three.js create a unique 3D animated scene. The scene has the following specifications: a. Size: minimum of 640x480

b. Includes at least 6 different shapes
c. Uses multiple lighting effects
d. Includes radio buttons, slider bars or other widgets to turn on or off certain components

of the animation.

Thank you in advance and please let me know as soon as possible

Explanation / Answer

Hi

You want to create 3D scene by using three.js.

b. You can create and use different shapes with cube, text , spline, line, cube map, channel by Initialize ShapeGeometry as below.

var geometry = new THREE.ShapeGeometry( shapes );

c. Use light spot with multiple color by chnage in code as following code.

var spotLight = new THREE.SpotLight( 0xffffff, 1 );
spotLight.position.set( 15, 40, 35 );
spotLight.angle = Math.PI / 4;
spotLight.penumbra = 0.05;
spotLight.decay = 2;
spotLight.distance = 200;
spotLight.castShadow = true;
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;
spotLight.shadow.camera.near = 10;
spotLight.shadow.camera.far = 200;
scene.add( spotLight );

d. You can control effect of object/components by buttons or other components.

Example for camara :

Initialize the OrbitControls along with camera (component/object) and renderer domElement :

    var controls = new THREE.OrbitControls(camera, renderer.domElement);

    Create js function for zooming(zoom in and zoom out) :

    function zoomModel(isZoomOut, scale) {
      if(isZoomOut){
          controls.dollyIn(scale);
      }else{
          controls.dollyOut(scale);
      }
    }

    Create a button and add event listener into button to call the zoomModel function :

     $("#clickMe").on("click", function(){
      // call this to make the model larger/ zoom in
      zoomModel(true, 4);

      // call this to make it smaller / zoom out
      //zoomModel(false, 4);
    });

Thank you.

Related Questions

Navigate

• Browse (All)
• Browse I
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.