JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.min.js"></script>
<html>
<head>
</head>
<body onLoad="init()">
<div id="center"></div>
</body>
</html>
JavaScript
var scene;
var camera;
var renderer;
var controls;
var controls;
var object;
var geometry;
var material;
var comp;
var canvasElm;
var light1, light2;
function init() {
//scene
scene = new THREE.Scene();
//camera
camera = new THREE.PerspectiveCamera(16,(window.innerWidth)/window.innerHeight, 0.1, 5000);
camera.position.set(0,100,100);
camera.lookAt(new THREE.Vector3(0,0,0));
//renderer
renderer = new THREE.WebGLRenderer({antialias: true, preserveDrawingBuffer: false, alpha: true}); //preserveDrawingBuffer: false means WebGL can swap buffers instead of copy buffers.
renderer.setClearColor(0x000000 , 0);
renderer.setSize(window.innerWidth, window.innerHeight);
// renderer.gammaInput = true;
// renderer.gammaOutput = true;
renderer.toneMapping = THREE.Uncharted2ToneMapping;
renderer.toneMappingExposure = 0.75;
canvasElm = document.getElementById("center");
canvasElm.appendChild( renderer.domElement );
canvas = renderer.domElement;
// document.body.appendChild(renderer.domElement);
ambientLight = new THREE.AmbientLight(0x404040);
// scene.add(ambientLight);
var light = new THREE.HemisphereLight( 0xffffff, 0x080820, 1 );
scene.add( light );
light1 = new THREE.PointLight( 0xffffff, 0.75, 0, 1 );
light1.position.set( 75, 95, 0 );
scene.add( light1 );
light2 = new THREE.PointLight( 0xffffff, 0.75, 0, 1 );
light2.position.set( -75, -75, 0 );
scene.add( light2 );
var textureCube = new THREE.CubeTextureLoader()
.setPath( 'https://s20.postimg.cc/64myz0vr1/' )
.load( [ 'image.jpg', 'image.jpg', 'image.jpg', 'image.jpg', 'image.jpg', 'image.jpg' ] );
var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
var material = new THREE.MeshPhysicalMaterial( { color: 0xffd700, emissive: 0x000000, metalness: 0.7, flatShading: false , roughness: 0.5, envMap: textureCube, reflectivity: 1} );
var torus = new THREE.Mesh( geometry, material );
scene.add( torus );
animate();
}
function animate()...