JSFiddle - React, Tailwind, and code Playground
by Plippie Plop
HTML
<div id="container"></div>
JavaScript
(function () {
var camera, createBuilding, draw, light, object, renderer, scene;
renderer = new THREE.WebGLRenderer();
renderer.setClearColorHex(0x000000);
camera = new THREE.PerspectiveCamera(45, 800 / 640, 0.1, 10000);
camera.position.z = 300;
camera.position.y = 70;
camera.lookAt(new THREE.Vector3(0, 30, 0));
scene = new THREE.Scene();
renderer.setSize(800, 640);
document.getElementById("container").appendChild(renderer.domElement);
createBuilding = function () {
var story1Geom = new THREE.CubeGeometry(100, 50, 100);
var material = new THREE.MeshPhongMaterial({
shininess: 50,
specular: 0x0a0a0a,
ambient: 0xffffff,
emissive: 0x000000,
color: 0x333333,
shading: THREE.SmoothShading
});
var building = new THREE.Mesh(story1Geom, material);
var story2Geom = new THREE.CubeGeometry(50, 50, 50);
var story2 = new THREE.Mesh(story2Geom, material.clone());
story2.position.set(0, 50, 0);
building.add(story2);
// railing
var railingGeo = new THREE.Geometry();
railingGeo.vertices.push(new THREE.Vector3(50, 25, 50));
railingGeo.vertices.push(new THREE.Vector3(50, 35, 50));
railingGeo.vertices.push(new THREE.Vector3(-50, 35, 50));
railingGeo.vertices.push(new THREE.Vector3(-50, 25, 50));
railingGeo.vertices.push(new THREE.Vector3(-50, 35, 50));
railingGeo.vertices.push(new THREE.Vector3(-50, 35, -50));
railingGeo.vertices.push(new THREE.Vector3(-50, 25, -50));
railingGeo.vertices.push(new THREE.Vector3(-50, 35, -50));
railingGeo.vertices.push(new THREE.Vector3(50, 35, -50));
railingGeo.vertices.push(new THREE.Vector3(50, 25, -50));
railingGeo.vertices.push(new THREE.Vector3(50, 35, -50));
railingGeo.vertices.push(new THREE.Vector3(50, 35, 50));
var...