JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/loaders/GLTFLoader.js"></script>
CSS
body {
background-color: #fff;
margin: 0px;
overflow: hidden;
}
JavaScript
// Simple three.js example
var mesh, renderer, scene, camera, controls;
init();
animate();
function init() {
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
document.body.appendChild( renderer.domElement );
// scene
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xaaaaaa );
// camera
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 0, 0, 11 );
// controls
controls = new THREE.OrbitControls( camera );
// ambient
scene.add( new THREE.AmbientLight( 0x222222 ) );
// light
var light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set( 0, 4, 0 );
light.castShadow = true;
scene.add( light );
light.add(
new THREE.Mesh(
new THREE.SphereBufferGeometry( 1 ),
new THREE.MeshBasicMaterial( { color: 0xffffff } )
)
);
// specular-glossiness model
var model = 'https://plumcantaloupe.github.io/assets/gltf/skull_downloadable/scene.gltf';
var loader = new THREE.GLTFLoader();
loader.load( model, function ( gltf ) {
var object = gltf.scene;
loader.load( model, function ( gltf ) {
var object2 = gltf.scene;
function traverse( obj ) {
if ( obj.material ) {
obj.castShadow = true;
obj.receiveShadow = true;
}
};
object.traverse( traverse );
object2.traverse( traverse );
object.position.y = -2.5;
object2.position.y = 0.5;
// comment out here to remove the top object
//object2.visible = false;
scene.add( object );
scene.add( object2 );
} );
...