215 lines
8.8 KiB
HTML
215 lines
8.8 KiB
HTML
<html>
|
|
<head>
|
|
<script src="./three.js"></script>
|
|
<script src="./OrbitControls.js"></script>
|
|
<script>
|
|
'use strict'
|
|
|
|
var raycaster, renderer, scene, camera, orbitControls, lightbulb, lampshade;
|
|
var selectedObject = null;
|
|
var selectableObjects = [];
|
|
var lastMousePos = {x: 0, y: 0};
|
|
|
|
function draw() {
|
|
// create renderer attached to HTML Canvas object
|
|
const canvas = document.getElementById("canvas");
|
|
renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
|
|
|
|
// create the scenegraph
|
|
scene = new THREE.Scene();
|
|
|
|
// create a camera
|
|
var fov = 75;
|
|
var aspect = 600 / 600;
|
|
var near = 0.1;
|
|
var far = 1000;
|
|
camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
|
|
camera.position.set(-10, 5, -2);
|
|
|
|
orbitControls = new THREE.OrbitControls(camera, canvas);
|
|
orbitControls.enableDamping = true;
|
|
orbitControls.dampingFactor = 0.25;
|
|
orbitControls.enableZoom = true;
|
|
orbitControls.autoRotate = false;
|
|
|
|
const light = new THREE.AmbientLight(0xFFFFFF);
|
|
scene.add(light);
|
|
|
|
// desk lamp base
|
|
// args: radiusTop, radiusBottom, height, radialSegments
|
|
var base = new THREE.Mesh(
|
|
new THREE.CylinderBufferGeometry(1, 1, 0.1, 12),
|
|
new THREE.MeshLambertMaterial({color: 0xff84a3}));
|
|
scene.add(base);
|
|
base.position.set(-5, -2, 0);
|
|
base.canTranslate = false; // make base unmovable
|
|
|
|
// desk lamp first arm piece
|
|
var 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
|
|
var pivot = new THREE.Object3D();
|
|
pivot.position.set(0, 0, 0); // centre of rotation we want
|
|
pivot.add(arm); // pivot is parent of arm
|
|
base.add(pivot); // base is parent of pivot
|
|
arm.canRotate = false;
|
|
|
|
// translate arm relative to pivot point
|
|
arm.position.set(0, 1.5, 0);
|
|
// rotate pivot point relative to the world
|
|
pivot.rotateOnAxis(new THREE.Vector3(0, 0, 1), -Math.PI / 6);
|
|
|
|
// second arm piece (consisting of a pivot with a cylinder as its child)
|
|
var pivot2 = pivot.clone();
|
|
pivot.add(pivot2);
|
|
// rotate the 2nd pivot relative to the 1st pivot (since it's nested)
|
|
pivot2.rotation.z = Math.PI / 3;
|
|
// translate the 2nd pivot relative to the 1st pivot
|
|
pivot2.position.set(0, 3, 0);
|
|
var arm2 = pivot2.children[0];
|
|
arm2.canRotate = false;
|
|
|
|
// args: radius, height, segments
|
|
lampshade = new THREE.Mesh(
|
|
new THREE.ConeBufferGeometry(1, 0.7, 24),
|
|
new THREE.MeshLambertMaterial({color: 0xff84a3})
|
|
);
|
|
var 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;
|
|
|
|
lightbulb = new THREE.PointLight(0xffffff, 1, 70);
|
|
lightbulb.position.set(0, -0.7, 0);
|
|
shadePivot.add(lightbulb);
|
|
|
|
raycaster = new THREE.Raycaster();
|
|
|
|
canvas.onmousedown = handleMouseDown;
|
|
canvas.onmousemove = handleMouseMove;
|
|
canvas.onmouseup = handleMouseUp;
|
|
|
|
var box = new THREE.Mesh(new THREE.BoxGeometry(60, 5, 60), new THREE.MeshLambertMaterial({color: 0x644117}));
|
|
scene.add(box);
|
|
box.position.set(0, -5, 0);
|
|
|
|
animate();
|
|
}
|
|
|
|
function animate() {
|
|
setTimeout(animate, 1000 / 60);
|
|
|
|
orbitControls.update();
|
|
|
|
// render the scene as seen by the camera
|
|
renderer.render(scene, camera);
|
|
}
|
|
|
|
// handle mouse up events
|
|
function handleMouseUp(e) {
|
|
// reset selected object and orbit controls
|
|
selectedObject = null;
|
|
orbitControls.enabled = true;
|
|
|
|
// find the position of the click
|
|
let mouseUpX = 2 * (e.clientX - 300) / 600;
|
|
let mouseUpY = -2 * ((e.clientY - 300) / 600);
|
|
|
|
// send a raycast from the clicked position and check if it intersects with the lampshade
|
|
let lightswitchRaycaster = new THREE.Raycaster();
|
|
lightswitchRaycaster.setFromCamera({x: mouseUpX, y: mouseUpY}, camera);
|
|
let intersects = lightswitchRaycaster.intersectObject(lampshade);
|
|
|
|
// if the lampshade was clicked, toggle the lightbulb
|
|
if (intersects.length > 0) {
|
|
lightbulb.visible = !lightbulb.visible;
|
|
}
|
|
}
|
|
|
|
function handleMouseDown(e) {
|
|
// handle mouse-clicks on the canvas
|
|
// did the user click a mesh?
|
|
/* note that 0,0 is the centre of the canvas according to WebGL,
|
|
and the canvas extends from (-1,-1) to (1,1)
|
|
but 0,0 is the top-left of the canvas according to e.clientX,e.clientY,
|
|
and the canvas extends from (0,0) to (599,599)
|
|
*/
|
|
|
|
var x = 2 * (e.clientX - 300) / 600;
|
|
var y = -2 * ((e.clientY - 300) / 600);
|
|
|
|
lastMousePos.x = x;
|
|
lastMousePos.y = y;
|
|
|
|
// set up and apply the raycaster (we are returned an array of intersection objects)
|
|
raycaster.setFromCamera({x: x, y: y}, camera);
|
|
var intersects = raycaster.intersectObjects(selectableObjects);
|
|
if (intersects.length > 0) {
|
|
// disable orbit controls if an object is clicked (so it can be manipulated)
|
|
orbitControls.enabled = false;
|
|
|
|
|
|
var closestObj, closestDist;
|
|
|
|
for (var i = 0; i < intersects.length; i++) {
|
|
/*
|
|
An intersection has the following properties :
|
|
- object : intersected object (THREE.Mesh)
|
|
- distance : distance from ray start to intersection (number)
|
|
- face : intersected face (THREE.Face3)
|
|
- faceIndex : intersected face index (number)
|
|
- point : intersection point (THREE.Vector3)
|
|
- uv : intersection point in the object's UV coordinates (THREE.Vector2)
|
|
*/
|
|
|
|
if (i == 0 || intersects[i].distance < closestDist) {
|
|
closestObj = intersects[i].object;
|
|
closestDist = intersects[i].distance;
|
|
}
|
|
}
|
|
|
|
selectedObject = closestObj;
|
|
}
|
|
else
|
|
selectedObject = null;
|
|
}
|
|
|
|
function handleMouseMove(e) {
|
|
if (selectedObject != null) {
|
|
var x = 2 * (e.clientX - 300) / 600;
|
|
var y = -2 * ((e.clientY - 300) / 600);
|
|
// dx,dy is the amount the mouse just moved by in pixels
|
|
var dx = x - lastMousePos.x;
|
|
var dy = y - lastMousePos.y;
|
|
|
|
if (selectedObject.canRotate) {
|
|
// rotate the parent ('pivot') that the object is a child of
|
|
selectedObject.parent.rotation.x += dx;
|
|
selectedObject.parent.rotation.z += dy;
|
|
}
|
|
else if (selectedObject.canTranslate) {
|
|
// translate the object
|
|
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>
|