JSFiddle - React, Tailwind, and code Playground
by realhunts
HTML
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
JavaScript
// a basic three.js scene
var container, renderer, scene, camera, controls;
init();
animate();
function init() {
// renderer
renderer = new THREE.WebGLRenderer({
antialias: false
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xccccff);
renderer.gammaFactor = 5.2;
renderer.physicallyCorrectLights = true;
renderer.gammaInput = true;
renderer.gammaOutput = true;
container = document.createElement('div');
document.body.appendChild(container);
container.appendChild(renderer.domElement);
// scene
scene = new THREE.Scene();
scene.scale.set(4, 4, 4)
//skybox
var rx = "https://raw.githubusercontent.com/BabylonJS/Babylon.js/master/Playground/textures/TropicalSunnyDay_"
var envMap = new THREE.CubeTextureLoader().load([
rx + 'px.jpg', // right
rx + 'nx.jpg', // left
rx + 'py.jpg', // top
rx + 'ny.jpg', // bottom
rx + 'pz.jpg', // back
rx + 'nz.jpg' // front
]);
envMap.format = THREE.RGBFormat;
scene.background = envMap;
// camera
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 200, 800);
camera.lookAt(scene.position);
// (camera) controls
// mouse controls: left button to rotate,
// mouse wheel to zoom, right button to pan
controls = new THREE.OrbitControls(camera, renderer.domElement);
// light
var lt = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( lt );
var light = new THREE.DirectionalLight(0xffffff, 4);
light.position.set(100, 150, 250);
scene.add(light);
// mesh
//create rocks
THREE.ImageUtils.crossOrigin = '';
var createRock = function(platform){
var rockGeometry = new THREE.IcosahedronGeometry(100, 1)
var vert = rockGeometry.vertices;
var midway = 0
for(var i = 0; i<vert.length; i++){
vert[i].z +=...