JSFiddle - React, Tailwind, and code Playground

by arpo

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/geometries/ConvexGeometry.js"></script>
<div id="myCanvas"></div>

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.z = 5;
camera.lookAt(new THREE.Vector3(0, 0, 0));

var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("myCanvas").appendChild(renderer.domElement);

var x, y, z, max = 1.0,min = 0.1,points = [];
for (var i = 0; i <= 10; i++) {
    x = Math.floor(Math.random() * (max - min + 1)) + min;
    y = Math.floor(Math.random() * (max - min + 1)) + min;
    z = Math.floor(Math.random() * (max - min + 1)) + min;
    points.push(new THREE.Vector3(x, y, z));
}
var material = new THREE.MeshPhongMaterial({
    color: 0x00ff00
});
var geometry = new THREE.ConvexGeometry(points);
var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = -0.17;
mesh.position.y = -0.50;
mesh.position.z = -0.05;
scene.add(mesh);

var planeMaterial = new THREE.MeshPhongMaterial({
    color: 0x001F7D
});
var plane = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), planeMaterial);
plane.rotation.x = -Math.PI / 2;
plane.position.y = -1.25;
scene.add(plane);

var ambientLight = new THREE.AmbientLight(0x111111);
scene.add(ambientLight);

var light = new THREE.DirectionalLight(0x999999, 1.0);
light.position.set(-10, 10, 10);
light.target.position.set(0, 0, 0);
light.castShadow = true;
light.shadowDarkness = 0.2;
scene.add(light);

var render = function () {
    requestAnimationFrame(render);

    mesh.rotation.x += 0.02;
    mesh.rotation.y += 0.01;
    mesh.rotation.z += 0.02;

    renderer.render(scene, camera);
};

render();