THREE.Cache.enabled = true;
// Id generator
const guid = () => {
const s4 = () => {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
}
// The Scene class.
class Scene {
constructor() {
// Window sizes
this.width = window.innerWidth;
this.height = window.innerHeight;
// Lights
this.lights = [];
this.lightMass = 0.1;
// Text
this.text = {
string: "HappyNewYear",
params: {
height: 15,
size: 30,
hover: 0,
curveSegments: 1,
bevelThickness: 0.4,
bevelSize: 0.25,
bevelEnabled: true,
font: undefined
}
};
// Clock
this.timeStep = 1 / 60;
this.startDate = new Date().getTime();
this.now = this.startDate;
// Click things
this.mouse = new THREE.Vector2();
this.clickWall = undefined;
this.clickables = [];
this.raycaster = new THREE.Raycaster();
this.init();
}
init() {
this.createScene();
this.createCamera();
this.addFloor();
this.addClickWall();
this.addBox();
this.animate();
window.addEventListener('resize', this.onResize.bind(this));
window.addEventListener('mouseup', this.onMouseUp.bind(this), false);
this.onMouseUp({ clientX: 0, clientY: 0 });
}
// Create the scene, his world and renderer
createScene() {
// Scene
this.scene = new THREE.Scene();
this.scene.background = new THREE.Color(0x000000);
// World
this.world = new CANNON.World();
this.world.gravity.set(0, 9.82, 0);
this.world.broadphase = new CANNON.NaiveBroadphase();
// Renderer
this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.shadowMap.enabled = true;
this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(this.renderer.domElement);
}
// Create the camera
createCamera() {
this.camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1);
this.camera.position.set(0, 0, 75);
this.camera.rotation.z = Math.PI;
this.scene.add(this.camera);
}
// Add the floor plane
addFloor() {
const shape = new CANNON.Plane();
let body = new CANNON.Body({ mass: 0, shape: shape });
body.position = new CANNON.Vec3(0, 25, 0);
body.quaternion.setFromEuler(Math.PI / 2, 0, 0);
this.world.add(body);
const geometry = new THREE.PlaneGeometry(200, 200, 1);
const material = new THREE.MeshPhongMaterial({
color: 0x38342c,
specular: 0x111111,
shininess: 30,
flatShading: true
});
this.floor = new THREE.Mesh(geometry, material);
this.floor.position.y = 25;
this.floor.receiveShadow = true;
this.floor.rotation.x = Math.PI * .5
this.scene.add(this.floor);
}
// Add another plane to control clicks
addClickWall() {
const geometry = new THREE.PlaneGeometry(200, 100, 1);
const material = new THREE.MeshBasicMaterial({
color: 0x666666,
visible: false,
alphaTest: false
});
this.clickWall = new THREE.Mesh(geometry, material);
this.clickWall.position.z = 5;
this.clickables.push(this.clickWall);
this.scene.add(this.clickWall);
}
addBox() {
const shape = new CANNON.Box(new CANNON.Vec3(50, 10, 7.5));
const body = new CANNON.Body({ mass: 0, shape: shape });
this.world.add(body);
const geometry = new THREE.BoxGeometry(100, 20, 15);
const material = new THREE.MeshPhongMaterial({ color: 0x38342c, flatShading: true });
this.box = new THREE.Mesh(geometry, material);
this.scene.add(this.box);
}
onMouseUp({ clientX, clientY }) {
// Get current mouse position
this.mouse.x = (clientX / window.innerWidth) * 2 - 1;
this.mouse.y = -(clientY / window.innerHeight) * 2 + 1;
this.raycaster.setFromCamera(this.mouse, this.camera);
const intersects = this.raycaster.intersectObjects(this.clickables);
const p = intersects.length > 0 ? intersects[0].point : new THREE.Vector3(0, 0, 0);
// Create lights from current mouse position
new Light({
lights: this.lights,
scene: this.scene,
world: this.world,
now: this.now,
startPosition: { x: p.x, y: p.y, z: 7.5 + Math.random() },
frozen: false
})
new Light({
lights: this.lights,
scene: this.scene,
world: this.world,
now: this.now,
startPosition: { x: p.x - 2, y: p.y - 4, z: Math.random() },
frozen: false
})
new Light({
lights: this.lights,
scene: this.scene,
world: this.world,
now: this.now,
startPosition: { x: p.x - 10, y: p.y + 5, z: Math.random() },
frozen: false
})
new Light({
lights: this.lights,
scene: this.scene,
world: this.world,
now: this.now,
startPosition: { x: p.x + 7, y: p.y - 5, z: Math.random() },
frozen: false
})
}
onResize() {
this.width = window.innerWidth;
this.height = window.innerHeight;
this.camera.aspect = this.width / this.height;
this.camera.updateProjectionMatrix();
this.renderer.setSize(this.width, this.height);
}
animate() {
this.now = new Date().getTime();
this.world.step(this.timeStep);
this.lights.map(light => {
if (light) light.update()
});
this.renderer.render(this.scene, this.camera);
requestAnimationFrame(this.animate.bind(this));
}
}
// The Light class.
class Light {
constructor({ lights, scene, world, now, startPosition, frozen }) {
this.scene = scene;
this.world = world;
this.createdDate = now;
this.flickerDate = now + 8 * 1000;
this.expireDate = this.flickerDate + 1 * 1000;
this.frozen = frozen ? frozen : false;
this.startPosition = startPosition ? startPosition : { x: 0, y: 0, z: 0 };
this.mesh = undefined;
this.mass = 10;
this.radius = 1.5;
this.lights = lights;
this.constructPhysics();
this.constructBulb();
this.lights.push(this);
}
constructPhysics() {
let { world, mass, radius, startPosition } = this, { x, y, z } = startPosition,
sphereShape = new CANNON.Sphere(radius),
sphereBody = new CANNON.Body({ mass: mass, shape: sphereShape })
sphereBody.addShape(sphereShape);
sphereBody.position = new CANNON.Vec3(x, y, z)
this.physicsBody = sphereBody
world.add(sphereBody)
// const position = this.startPosition;
// const shape = new CANNON.Sphere(this.radius);
// const body = new CANNON.Body({ mass: this.mass, shape: shape });
// body.position = new CANNON.Vec3(position.x, position.y, position.z);
// this.world.add(this.body);
}
constructBulb() {
let bulb = new THREE.Object3D();
let { scene, radius, startPosition } = this, { x, y, z } = startPosition;
// Create spheric bulb
let bulbGeometry = new THREE.SphereBufferGeometry(radius, 30, 30);
// let bulbBasicMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
let bulbPhongMaterial = new THREE.MeshPhongMaterial({
color: 0xfffe5b,
emissive: 0xffffe7,
specular: 0x111111,
shininess: 30,
});
let bulbMesh = new THREE.Mesh(bulbGeometry, bulbPhongMaterial);
// Glow
let bulbMap = new THREE.TextureLoader().load('https://crossorigin.me/https://www.alexandrebuffet.fr/codepen/images/textures/glow.png');
let bulbSpriteMat = new THREE.SpriteMaterial({
map: bulbMap,
color: 0x9e721a,
transparent: true,
blending: THREE.AdditiveBlending
});
let bulbSprite = new THREE.Sprite(bulbSpriteMat);
bulbSprite.scale.set(6, 6, 1.0);
bulbMesh.add(bulbSprite);
let light1 = new THREE.PointLight(0xfec87c, 1, 50, 2)
let light2 = new THREE.PointLight(0xfec87c, 7, 25, 2)
this.light1 = light1;
this.light2 = light2;
this.sphere = bulbMesh;
light1.position.set(0, 0, 0)
light2.position.set(0, 0, 0)
bulbMesh.position.set(0, 0, 0)
bulb.add(bulbMesh)
bulb.add(light1)
bulb.add(light2)
bulb.position.x = x
bulb.position.y = y
bulb.position.z = z
this.mesh = bulb
light1.name = guid();
light2.name = guid();
bulbMesh.name = guid();
scene.add(bulb)
}
update() {
let { mesh, physicsBody, frozen } = this
if (!frozen) {
mesh.position.copy(physicsBody.position);
mesh.quaternion.copy(physicsBody.quaternion);
}
}
}
new Scene();
!
