JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
JavaScript
var stats;
var camera, scene, renderer;
var swooshes = [];
// homepage variables
var world = 'HOME';
var swooshWidth = swooshHeight = 512;
init();
animate();
function init() {
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.sortObjects = false;
document.body.appendChild(renderer.domElement);
var light = new THREE.AmbientLight(0x888888);
light.name = "light";
scene.add(light);
light = new THREE.DirectionalLight(0xDDDDDD, 1);
light.position.set(10000, 3000, 4000);
light.name = "light";
scene.add(light);
light = new THREE.SpotLight(0x555555, 1);
light.position.set(-3000, -1000, 0);
light.name = "light";
scene.add(light); /**/
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(500, -500, 250);
camera.up.set(0, 0, 1);
camera.lookAt(new THREE.Vector3(0, 0, 0));
// controls
controls = new THREE.OrbitControls(camera);
// Sphere
var sphereDiameter = 100;
var geometry = new THREE.SphereGeometry(sphereDiameter / 2, 32, 32);
var material = new THREE.MeshNormalMaterial();
var sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
// Swooshes
var swooshMaterial = generateMaterial();
var swooshGeometry = new THREE.PlaneGeometry(swooshWidth, swooshHeight);
var swoosh = new THREE.Mesh(
swooshGeometry,
swooshMaterial
);
swoosh.name = "swoosh";
var clone, axis = ['x', 'y', 'z'];
for (var i = 0; i < 3; i++) {
clone = swoosh.clone();
clone.rotation[axis[i]] = Math.PI / 2;
swooshes.push(clone);
scene.add(clone);
}
}
function generateMaterial() {
// load an image
var imageObj = new Image();
imageObj.src =...