COS3712 ASSIGNMENT 1 SOLUTIONS 2021
<!DOCTYPE html>
<html>
<head>
<title>COS3712 Assignment</title>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dat-
gui/0.7.2/dat.gui.min.js"></script>
<style>
body {
/* set margin to 0 and overflow to hidden, to go fullscreen */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!-- Div which will hold the Output -->
<div id="WebGL-output"></div>
<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
// create a scene, that will hold all our elements such as objects, cameras and lights.
, var scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1,
1000);
camera.position.z = 500;
// create a render and set the size
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0x00c9d0));
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.shadowMapEnabled = true;
// create group
var group = new THREE.Object3D();
var truck_group = new THREE.Object3D();
THREE.crossOrigin = "";
//-----------------------------------create the ground-----------------------------------------------
var planeGeometry = new THREE.PlaneGeometry(350, 300);
var planeMaterial = new THREE.MeshLambertMaterial({ color:'green'});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
// rotate and position the plane
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 8.5;
plane.position.y = -12;
<!DOCTYPE html>
<html>
<head>
<title>COS3712 Assignment</title>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dat-
gui/0.7.2/dat.gui.min.js"></script>
<style>
body {
/* set margin to 0 and overflow to hidden, to go fullscreen */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!-- Div which will hold the Output -->
<div id="WebGL-output"></div>
<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
// create a scene, that will hold all our elements such as objects, cameras and lights.
, var scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1,
1000);
camera.position.z = 500;
// create a render and set the size
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0x00c9d0));
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.shadowMapEnabled = true;
// create group
var group = new THREE.Object3D();
var truck_group = new THREE.Object3D();
THREE.crossOrigin = "";
//-----------------------------------create the ground-----------------------------------------------
var planeGeometry = new THREE.PlaneGeometry(350, 300);
var planeMaterial = new THREE.MeshLambertMaterial({ color:'green'});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
// rotate and position the plane
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 8.5;
plane.position.y = -12;
