代做COMP27112、代写Java语言程序

日期：2024-03-07 09:48

Introduction to Visual Computing

Coursework Assignment 2

Sun, Planet and Moon

Tim Morris

Introduction

The aim of this exercise is to render a simple solar system with one moon orbiting one

planet orbiting one sun. As with the previous exercise, you’ll need a web browser to display

the output and a simple text editor1 to create the html file you’ll need.

This piece of work contributes half of the coursework assessment. We suggest that you

should not spend more than 15 hours in total completing Assignments 1 and 2.

Getting Started

Start off with the same code as last time for creating the basic webpage. Under “// Your

Javascript will go here.” you’ll add any global variables and calls to two

functions, init() and animate().

Creating the Scene (init();)

Everything is initialised in this function.

As before, add a scene, camera and renderer and add the renderer to the

document (don’t forget to declare the scene, camera and renderer as global

variables). You won’t need a vertex shader or fragment shader this time.

Put the far plane of the camera at 10000. Locate the camera at (0, 30, 500) and add it to the

scene.

You’ll need to create nine variables for the sun’s, earth’s and moon’s geometries, materials

and meshes. These are global variables.

You can create the sun object using the following code:

1 You should ensure that your text editor saves your html files as plain text. Some editors (e.g. TextEdit on the

Mac add all kinds of stuff to what you think is a plain html file, meaning that you just see the text of your file

when you open it in your browser. Don’t forget to give your files the correct extension.

You could also use a suitable IDE.

sunGeometry = new THREE.SphereGeometry(109, 400, 200);

sunMaterial = new THREE.MeshStandardMaterial(

{

emissive: 0xffd700,

// emissiveMap: texture,

emissiveIntensity: 1,

wireframe: false

}

);

sunMesh = new THREE.Mesh(sunGeometry, sunMaterial);

scene.add(sunMesh);

This creates a spherical object (what do the arguments mean?) of a particular colour. Where

is it located? The emissiveMap is something you may use later.

The sun must be a source of light. The PointLight() constructor can achieve this.

Create a point light source of white light at the origin and add it to the scene. You might also

add a diffuse light to give some background illumination, use AmbientLight().

Obviously this is physically unrealistic but it makes the objects more visible.

You can create the earth and moon using similar code with the following differences:

? The earth sphere geometry arguments are 25, 50, 50

? The moon sphere geometry arguments are 5, 40, 20

? Both the earth and moon materials are MeshPhongMaterial, they don’t have an

emissive argument, but do have a color. You can experiment with color

values.

The texture argument might be used later. So the earthMaterial can be created

using something like:

earthMaterial = new THREE.MeshPhongMaterial(

{

// map: texture,

color: x0000ff

}

The earth and moon will be grouped together into one object before being added to the

scene. To do this we need a global variable to store the earth-moon system, we need to

add the earth to it, by default it will go to the origin of this system. Then we need to add the

moon to the system and set its position relative to the earth.

Three.js provides a group object for storing collections:

earthSystem = new THREE.Group();

Then the earth (and moon) can be added to this in a manner that was similar to the way we

added the sun to the scene:

earthSystem.Add(earthMesh);

Don’t forget to set the position of the moon within the earth-moon system, using a function

something like:

moonMesh.position.set(orbitRadius, 0, 0);

A suitable value for orbitRadius is in the range 40 – 60.

The earth’s orbit could be approximated as a circle, and the location of the earth on it could

be computed as the following pseudocode:

earth.position.x = earthOrbitRadius * sin(2pwt);

earth.position.y = earthOrbitRadius * cos(2pwt);

w is the earth’s angular velocity and t is some measurement of time.

It is slightly more realistic to make the orbit an ellipse. To make this more efficient we precompute the co-ordinates of the earth’s orbit. Create a global variable with a suitable name.

The points can be computed by calling the function EllipseCurve. This has arguments

to define:

? The x co-ordinate of the centre point of the ellipse

? The y co-ordinate of the centre point of the ellipse

? The radius of the ellipse in the x direction

? The radius of the ellipse in the y direction

? The start angle for drawing the ellipse (in this case 0 radians)

? The end angle for drawing the ellipse (in this case 2p radians)

? Plus other arguments that can take default values.

You may choose to draw the orbit, in which case you will have to

? Transfer points from the orbit into a line buffer

? Create a geometry (using BufferGeometry) from these points

? Create a material (using LineBasicMaterial) and setting a suitable colour

? Create a line object using the geometry and material

? Rotate the line so it lies in the XZ plane instead of the default XY plane

? Add it to the scene

Animation (Animate();)

The basic animation function will contain the two lines to render the scene and request an

animation frame, as in the previous exercise. If you’ve followed the instructions so far and

now implement this, you’ll see a static scene with the sun, earth and moon in fixed positions

and the earth orbit (if you chose to draw it). The earth and moon should be solid coloured

spheres. The next step is to add movement to the objects. The following code should be

added to Animate() before the two lines you’ve just written.

The sun’s movement is simple. It doesn’t move. You might want to make it rotate if you add

a texture to it, which will be done later.

The earth-moon system’s position could be driven by using a counter that is incremented

for each frame of the animation. But we’ll use the time instead. A time can be obtained by

calling performance.now(). This gives the time in milliseconds since the browser

window was opened. This can be converted into a value in the range [0, 1) which will be

used as an index into the values of the EllipseCurve you defined earlier. In

pseudocode:

time = 0.00001 * performance.now();

t = (time mod 1)

We can get the earth-moon position by reading a point from the EllipseCurve object

(assume it’s called curve):

point = curve.getPoint(t)

Then the earthSystem’s x and z positions can be set to point.x and point.y

respectively. Changing the value of the multiplier (0.00001) will change the earth’s orbital

speed.

The moon’s position is set according to

moon.x = orbitRadius*cos(time*speed)

moon.z = orbitRadius*sin(time*speed)

Time was derived above. Speed is the orbital speed of the moon – you choose a sensible

value.

Optional Enhancements

Some optional enhancements follow.

Changing the viewpoint

It is possible to change the observer’s viewpoint by adding the following controls.

Insert the following line after the other import statement.

import { OrbitControls } from

"https://web.cs.manchester.ac.uk/three/three.jsmaster/examples/jsm/controls/OrbitControls.js";

Add a global variable with a suitable name, possibly controls.

Add the following two lines to the init() function:

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

controls.autoRotate = true;

These add a controller to the scene and allow you to move the viewpoint by clicking and

dragging.

Texturing

The sun, earth and moon can be textured using textures from

https://www.solarsystemscope.com/textures/download/2k_sun.jpg

https://upload.wikimedia.org/wikipedia/commons/a/ac/Earthmap1000x500.jpg

https://svs.gsfc.nasa.gov/vis/a000000/a004700/a004720/lroc_color_poles_1k.jpg

To read these you’ll have to create one texture loader

const loader = new THREE.TextureLoader();

Textures can be loaded using this

var texture = loader.load(‘filename’); OR

var texture = loader.load(‘URL’);

And added to the material of the object you’re creating, by uncommenting the line in the

example above where you created the sun object.

The earth and moon textures can be added similarly, except you’ll add the line

map: texture,

to the material constructor. You’ll also need to delete the color property.

The problem you may encounter when attempting to run the code is that the resource fails

to load, and you have an error message such as

Access to image at <source> from origin 'null' has been blocked by CORS policy

This is a security feature of most modern browsers. You can set up a server on your host to

overcome this problem. Instructions are widely available on the web, specifically here

https://threejs.org/docs/index.html#manual/en/introduction/How-to-run-things-locally

If you’re using Chrome you can alternatively install an extension that allows CORS cross

origin loading (https://chrome.google.com/webstore/detail/allow-cors-accesscontrol/lhobafahddgcelffkeicbaginigeejlf?hl=en). Or in Safari you can explicitly turn off the

CORS checking.

Rotations

You can make the sun, Earth and Moon rotate on their axes, much like the cube rotated in

the previous exercise. Make sure you choose an appropriate length of the “day”.

Clouds

You could add clouds to the Earth. Find a cloud image (e.g.

https://i.stack.imgur.com/B3c7G.jpg) and add it as a transparent texture to a sphere mesh

that is slightly larger than the Earth. Make it rotate slightly slower than the Earth.

Background

You can also create a starry background for the scene. Make a very large sphere mesh – to

make sure it’s big enough to contain everything. Add a texture image of the Milky Way:

https://cdn.eso.org/images/screen/eso0932a.jpg

Make the sphere visible from inside as well as outside by setting the side member of the

material to THREE.DoubleSide.

Submission

Once you have a working solution, capture a short video of your solution, no more than 15

seconds long. It must demonstrate all the properties of your solar system, and not so

quickly that the marker can’t see them clearly (you’ll be penalised for videos that have so

much zooming or camera movement that it’s impossible to see the earth or moon rotating).

ZIP this and your html and submit the file to the Lab 2 area in Blackboard.

Submissions that are not in the ZIP format will not be marked.

Marking Scheme

We will endeavour to mark your work in face-to-face sessions in the scheduled labs.

You will receive marks for:

? The objects being in appropriate locations and moving appropriately.

? Sensible illumination.

? Enhancements