JSFiddle - React, Tailwind, and code Playground
JavaScript
import * as THREE from 'https://cdn.skypack.dev/[email protected]/build/three.module.js';
import { OrbitControls } from 'https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'https://cdn.skypack.dev/[email protected]/examples/jsm/loaders/GLTFLoader.js';
import { RoomEnvironment } from 'https://cdn.skypack.dev/[email protected]/examples/jsm/environments/RoomEnvironment.js';
import {
GUI
} from 'https://cdn.skypack.dev/[email protected]/examples/jsm/libs/dat.gui.module.js';
let camera, scene, renderer, controls;
init();
animate();
function init() {
const container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 20);
camera.position.set(0, 1, 2);
scene = new THREE.Scene();
const light = new THREE.DirectionalLight( 0xffffff, 0.6 );
light.position.set( 0, 10, 0 );
scene.add(light);
// model
new GLTFLoader()
.setPath('https://threejs.org/examples/models/gltf/')
.load('SheenChair.glb', function(gltf) {
scene.add(gltf.scene);
const object = gltf.scene.getObjectByName('SheenChair_fabric');
const gui = new GUI();
gui.add(object.material, 'sheen', 0, 1);
gui.open();
});
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild(renderer.domElement);
const environment = new RoomEnvironment();
const pmremGenerator = new THREE.PMREMGenerator(renderer);
scene.background = new THREE.Color(0xbbbbbb);
scene.environment = pmremGenerator.fromScene(environment).texture;
controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
...