COS3712 2023 ASSIGNMENT 2
(with the source code you need & link to the zipped folder)
Crystal Indigo!
Crystal Indigo!
Providing all solutions you need anytime
+27 76 626 8187
***Copy and run the code, open with the web browser and see the results***
*** There is a link to the source code at the end of this discussion***
if there is a program that is not running, please contact
Note: do not submit as pdf and change the code where necessary
,//Output when run
,<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Village</title>
<style>
body { margin: 0; }
canvas { display: block; }
#controls {
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
}
</style>
</head>
<body>
<div id="controls">
<button id="toggleRotation">Toggle Rotation</button>
<button id="toggleDirection">Toggle Rotation Direction</button>
<input type="range" id="rotationSpeed" min="0.1" max="2" step="0.1"
value="1">
<button id="zoomIn">Zoom In</button>
<button id="zoomOut">Zoom Out</button>
</div>
<!-- the JavaScripts -->
<script type="text/javascript" src="./scripts/three.min.js"></script>
<script type="text/javascript" src="./scripts/three.js"></script>
<script type="text/javascript" src="./scripts/texture.data.js"></script>
<script type="text/javascript" src="./scripts/script.js"></script>
</body>
</html>
/* style.css */
body {
margin: 0;
overflow: hidden;
}
canvas {
display: block;
}
, // script.js
window.addEventListener('DOMContentLoaded', init);
let scene, camera, renderer;
let rotationToggle = false;
let rotationDirection = 1;
let rotationSpeed = 1;
let zoomLevel = 1;
const gardenLightColor = 0xffffee; // Color for garden lights (adjust as
needed)
const gardenLightIntensity = 15; // Intensity of the garden lights (adjust
as needed)
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth /
window.innerHeight, 0.1, 1000);
// Set the initial position of the camera.
camera.position.set(0, 0, 400);
camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x87ceeb);
document.body.appendChild(renderer.domElement);
// Enable shadows.
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
createVillage();
animate();
}
function createVillage() {
var sun = new THREE.DirectionalLight(0xffffff, 1);
sun.position.set(50, -50, 50);
sun.castShadow = true;
sun.shadow.mapSize.width = 1024;
sun.shadow.mapSize.height = 1024;
sun.shadow.radius = 20;
scene.add(sun);
// Define three garden lights as positional lights for the night scene
// var gardenLight1 = new THREE.PointLight(0xffb400, 15);
// gardenLight1.position.set(0, -0.5, 0);
// gardenLight1.castShadow = true;
(with the source code you need & link to the zipped folder)
Crystal Indigo!
Crystal Indigo!
Providing all solutions you need anytime
+27 76 626 8187
***Copy and run the code, open with the web browser and see the results***
*** There is a link to the source code at the end of this discussion***
if there is a program that is not running, please contact
Note: do not submit as pdf and change the code where necessary
,//Output when run
,<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Village</title>
<style>
body { margin: 0; }
canvas { display: block; }
#controls {
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
}
</style>
</head>
<body>
<div id="controls">
<button id="toggleRotation">Toggle Rotation</button>
<button id="toggleDirection">Toggle Rotation Direction</button>
<input type="range" id="rotationSpeed" min="0.1" max="2" step="0.1"
value="1">
<button id="zoomIn">Zoom In</button>
<button id="zoomOut">Zoom Out</button>
</div>
<!-- the JavaScripts -->
<script type="text/javascript" src="./scripts/three.min.js"></script>
<script type="text/javascript" src="./scripts/three.js"></script>
<script type="text/javascript" src="./scripts/texture.data.js"></script>
<script type="text/javascript" src="./scripts/script.js"></script>
</body>
</html>
/* style.css */
body {
margin: 0;
overflow: hidden;
}
canvas {
display: block;
}
, // script.js
window.addEventListener('DOMContentLoaded', init);
let scene, camera, renderer;
let rotationToggle = false;
let rotationDirection = 1;
let rotationSpeed = 1;
let zoomLevel = 1;
const gardenLightColor = 0xffffee; // Color for garden lights (adjust as
needed)
const gardenLightIntensity = 15; // Intensity of the garden lights (adjust
as needed)
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth /
window.innerHeight, 0.1, 1000);
// Set the initial position of the camera.
camera.position.set(0, 0, 400);
camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x87ceeb);
document.body.appendChild(renderer.domElement);
// Enable shadows.
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
createVillage();
animate();
}
function createVillage() {
var sun = new THREE.DirectionalLight(0xffffff, 1);
sun.position.set(50, -50, 50);
sun.castShadow = true;
sun.shadow.mapSize.width = 1024;
sun.shadow.mapSize.height = 1024;
sun.shadow.radius = 20;
scene.add(sun);
// Define three garden lights as positional lights for the night scene
// var gardenLight1 = new THREE.PointLight(0xffb400, 15);
// gardenLight1.position.set(0, -0.5, 0);
// gardenLight1.castShadow = true;
