264 lines
11 KiB
HTML
264 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!-- This code builds on the template available on Canvas: 'Threejs-20-controllable-desk-lamp.html' -->
|
|
<script src="./three.js"></script>
|
|
<script src="./OrbitControls.js"></script>
|
|
<script>
|
|
'use strict'
|
|
|
|
// global variables
|
|
var renderer, scene, camera, orbitControls;
|
|
var lightbulb, lampshade, table, movingCube;
|
|
var cubeSpeed = 0.5;
|
|
var cubeDirection = new THREE.Vector3(1, 0, 0);
|
|
|
|
var selectedObject = null;
|
|
var selectableObjects = [];
|
|
var lastMousePos = {x: 0, y: 0};
|
|
|
|
function draw() {
|
|
setUpScene();
|
|
|
|
addDeskLamp();
|
|
addTable();
|
|
|
|
addBook();
|
|
addGlass();
|
|
addGoldBar();
|
|
|
|
addMovingCube();
|
|
|
|
animate();
|
|
}
|
|
|
|
function animate() {
|
|
setTimeout(animate, 1000 / 60);
|
|
orbitControls.update();
|
|
moveCube();
|
|
renderer.render(scene, camera);
|
|
}
|
|
|
|
function setUpScene() {
|
|
// set up scene
|
|
const canvas = document.getElementById("canvas");
|
|
renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
|
|
renderer.shadowMap.enabled = true;
|
|
scene = new THREE.Scene();
|
|
|
|
// add mouse event handlers
|
|
canvas.onmousedown = handleMouseDown;
|
|
canvas.onmousemove = handleMouseMove;
|
|
canvas.onmouseup = handleMouseUp;
|
|
|
|
// add camera
|
|
camera = new THREE.PerspectiveCamera(75, 600 / 600, 0.1, 1000);
|
|
camera.position.set(-10, 5, -2);
|
|
|
|
// add orbit controls
|
|
orbitControls = new THREE.OrbitControls(camera, canvas);
|
|
orbitControls.enableDamping = true;
|
|
orbitControls.dampingFactor = 0.25;
|
|
orbitControls.enableZoom = true;
|
|
orbitControls.autoRotate = false;
|
|
|
|
// add ambient light
|
|
const light = new THREE.AmbientLight(0xFFFFFF);
|
|
scene.add(light);
|
|
}
|
|
|
|
// function to add the lamp to the scene
|
|
function addDeskLamp() {
|
|
// desk lamp base
|
|
const base = new THREE.Mesh(new THREE.CylinderBufferGeometry(1, 1, 0.1, 12), new THREE.MeshLambertMaterial({color: 0xff84a3}));
|
|
scene.add(base);
|
|
base.position.set(-5, 0.05, 0);
|
|
base.canTranslate = false; // make base unmovable
|
|
|
|
// desk lamp first arm piece
|
|
const arm = new THREE.Mesh( new THREE.CylinderBufferGeometry(0.1, 0.1, 3, 12), new THREE.MeshLambertMaterial({color: 0x84ffa3}));
|
|
|
|
// since we want to rotate around a point other than the arm's centre, we can create a pivot point as the parent of the arm, position the arm relative to that pivot point, and apply rotation on the pivot point
|
|
const pivot = new THREE.Object3D();
|
|
pivot.position.set(0, 0, 0);
|
|
pivot.add(arm);
|
|
base.add(pivot);
|
|
arm.canRotate = false;
|
|
arm.position.set(0, 1.5, 0);
|
|
pivot.rotateOnAxis(new THREE.Vector3(0, 0, 1), -Math.PI / 6);
|
|
|
|
// second arm piece (consisting of a pivot with a cylinder as its child)
|
|
const pivot2 = pivot.clone();
|
|
pivot.add(pivot2);
|
|
pivot2.rotation.z = Math.PI / 3;
|
|
pivot2.position.set(0, 3, 0);
|
|
const arm2 = pivot2.children[0];
|
|
arm2.canRotate = false;
|
|
|
|
lampshade = new THREE.Mesh( new THREE.ConeBufferGeometry(1, 0.7, 24), new THREE.MeshLambertMaterial({color: 0xff84a3}) );
|
|
const shadePivot = new THREE.Object3D();
|
|
pivot2.add(shadePivot); // lampshade pivot is a child of the 2nd arm pivot
|
|
shadePivot.add(lampshade);
|
|
shadePivot.position.set(0, 3, 0);
|
|
shadePivot.rotation.x = Math.PI;
|
|
selectableObjects.push(lampshade);
|
|
lampshade.canRotate = true;
|
|
|
|
// add lightbulb
|
|
lightbulb = new THREE.PointLight(0xffffff, 1, 70); // point light is the light source type most like a lightbulb: single point, emits light in all directions
|
|
lightbulb.position.set(0, -0.7, 0);
|
|
lightbulb.castShadow = true;
|
|
shadePivot.add(lightbulb);
|
|
}
|
|
|
|
// function to add a table to the scene
|
|
function addTable() {
|
|
table = new THREE.Mesh(new THREE.BoxGeometry(60, 5, 60), new THREE.MeshLambertMaterial({color: 0x644117}));
|
|
scene.add(table);
|
|
table.position.set(0, -2.5, 0);
|
|
}
|
|
|
|
// function to add a book to the scene
|
|
function addBook() {
|
|
const coverGeometry = new THREE.BoxGeometry(6, 1.5, 8);
|
|
const coverTexture = new THREE.TextureLoader().load('./images/hobbit.jpg');
|
|
const coverMaterial = new THREE.MeshStandardMaterial({ map: coverTexture });
|
|
const book = new THREE.Mesh(coverGeometry, coverMaterial);
|
|
book.position.set(0, 0.75, 5);
|
|
scene.add(book);
|
|
}
|
|
|
|
// function to add a tapered, transparent glass to the scene
|
|
function addGlass() {
|
|
const glassMaterial = new THREE.MeshPhysicalMaterial({
|
|
color: 0xffffff,
|
|
opacity: 0.3,
|
|
transparent: true,
|
|
reflectivity: 0.8,
|
|
clearcoat: 1.0,
|
|
clearcoatRoughness: 0.1
|
|
});
|
|
|
|
const glass = new THREE.Mesh(new THREE.CylinderGeometry(1, 0.7, 3, 32), glassMaterial);
|
|
glass.position.set(-8, 1.5, 5);
|
|
scene.add(glass);
|
|
}
|
|
|
|
// function to add a gold bar to the scene
|
|
function addGoldBar() {
|
|
const goldMaterial = new THREE.MeshPhongMaterial({
|
|
color: 0xffd700,
|
|
specular: 0xaaaaaa,
|
|
shininess: 30
|
|
});
|
|
|
|
const goldBar = new THREE.Mesh(new THREE.BoxGeometry(2, 1, 1), goldMaterial);
|
|
goldBar.position.set(-15, 0.5, 3);
|
|
scene.add(goldBar);
|
|
}
|
|
|
|
// function to add the cube that will be animated moving across the table
|
|
function addMovingCube() {
|
|
movingCube = new THREE.Mesh(new THREE.BoxGeometry(4, 4, 4), new THREE.MeshLambertMaterial({color: 0x00ff00}));
|
|
scene.add(movingCube);
|
|
movingCube.position.set(0, 2, -5);
|
|
}
|
|
|
|
// function to handle the animation and movement of the cube
|
|
function moveCube() {
|
|
movingCube.position.add(cubeDirection.clone().multiplyScalar(cubeSpeed));
|
|
|
|
if (movingCube.position.x > 28 || movingCube.position.x < -28) {
|
|
cubeDirection.x *= -1;
|
|
}
|
|
}
|
|
|
|
// handle mouse up events
|
|
function handleMouseUp(e) {
|
|
// reset selected object and orbit controls
|
|
selectedObject = null;
|
|
orbitControls.enabled = true;
|
|
|
|
// find the position of the click
|
|
const mouseUpX = 2 * (e.clientX - 300) / 600;
|
|
const mouseUpY = -2 * ((e.clientY - 300) / 600);
|
|
|
|
// send a raycast from the clicked position and check if it intersects with the lampshade
|
|
// while it is technically more memory-efficient to re-use raycasters rather than create new ones, i have chosen to prioritise simplicity as this program is small enough that efficiency does not really matter
|
|
const lightswitchRaycaster = new THREE.Raycaster();
|
|
lightswitchRaycaster.setFromCamera({x: mouseUpX, y: mouseUpY}, camera);
|
|
const intersects = lightswitchRaycaster.intersectObject(lampshade);
|
|
|
|
// if the lampshade was clicked, toggle the lightbulb
|
|
if (intersects.length > 0) {
|
|
lightbulb.visible = !lightbulb.visible;
|
|
}
|
|
}
|
|
|
|
function handleMouseDown(e) {
|
|
// get coordinates of click
|
|
const x = 2 * (e.clientX - 300) / 600;
|
|
const y = -2 * ((e.clientY - 300) / 600);
|
|
|
|
lastMousePos.x = x;
|
|
lastMousePos.y = y;
|
|
|
|
// find what objects were clicked using a raycaster
|
|
const mouseDownRaycaster = new THREE.Raycaster();
|
|
mouseDownRaycaster.setFromCamera({x: x, y: y}, camera);
|
|
const intersects = mouseDownRaycaster.intersectObjects(selectableObjects);
|
|
|
|
// if the raycast intersected with any selectable objects, select the one nearest to the camera (the one visible)
|
|
if (intersects.length > 0) {
|
|
// disable orbit controls if an object is clicked (so it can be manipulated)
|
|
orbitControls.enabled = false;
|
|
|
|
// loop through each intersect to find the closest object (the selected one)
|
|
let closestObj, closestDist;
|
|
for (let i = 0; i < intersects.length; i++) {
|
|
if (i == 0 || intersects[i].distance < closestDist) {
|
|
closestObj = intersects[i].object;
|
|
closestDist = intersects[i].distance;
|
|
}
|
|
}
|
|
selectedObject = closestObj;
|
|
}
|
|
else {
|
|
selectedObject = null;
|
|
}
|
|
}
|
|
|
|
function handleMouseMove(e) {
|
|
// if an object is selected
|
|
if (selectedObject != null) {
|
|
const x = 2 * (e.clientX - 300) / 600;
|
|
const y = -2 * ((e.clientY - 300) / 600);
|
|
|
|
// dx,dy is the amount the mouse just moved by in pixels
|
|
const dx = x - lastMousePos.x;
|
|
const dy = y - lastMousePos.y;
|
|
|
|
// if the selected object can rotate, rotate it
|
|
if (selectedObject.canRotate) {
|
|
// rotate the parent ('pivot') that the object is a child of
|
|
selectedObject.parent.rotation.x += dx;
|
|
selectedObject.parent.rotation.z += dy;
|
|
}
|
|
// otherwise, if the object can be translated, translate the object
|
|
else if (selectedObject.canTranslate) {
|
|
selectedObject.position.x += dx * 4;
|
|
selectedObject.position.z -= dy * 4;
|
|
}
|
|
|
|
lastMousePos.x = x;
|
|
lastMousePos.y = y;
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="draw();">
|
|
<!-- Note that the canvas has been positioned precisely at 0,0 so that mouse positions on the browser are the same as mouse positions on the canvas -->
|
|
<canvas id="canvas" width="600" height="600" style="position:absolute; left:0px; top:0px"></canvas>
|
|
</body>
|
|
</html>
|