I am trying to add a similar menu of material style changed to my own gltf file to make a similar experience to this example provided on the website but it seems the github code was deleted.
I understand that the menu is using Dat-Gui
If any one could help me with the process of going about adding a similar lay out. That would be really helpful. I can post my current code if needed.
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import * as Tone from "tone";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import "./styles.css";
//Trying to implment dampening for orbit controls to give nice spin
//import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
// this code from http://github.com/pauls-stuff/blah/
////import { OrbitControls } fromPaulsedOrbitControltrol.js";
let scene, camera, renderer;
let geometry, material, cube;
let colour, intensity, light;
let ambientLight;
let orbit;
let sceneHeight, sceneWidth;
let clock, delta, interval;
let player, meter;
let modelLoaded;
let logo;
let loader;
let mixers;
let startButton = document.getElementById("startButton");
startButton.addEventListener("click", init);
function init() {
// remove overlay
let overlay = document.getElementById("overlay");
overlay.remove();
Tone.start();
modelLoaded = false;
//create clock and set interval at 30 fpx
clock = new THREE.Clock();
delta = 0;
interval = 1 / 25;
//create scene
sceneWidth = window.innerWidth;
sceneHeight = window.innerHeight;
scene = new THREE.Scene();
scene.background = new THREE.Color(0xdfffff);
//create camera
camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 12;
//specify renderer and add it to document
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//create the orbit controls instance so we can use the mouse move around scene
orbit = new OrbitControls(camera, renderer.domElement);
orbit.enableZoom = true;
// lighting
colour = 0xffffff; // white
intensity = 0.8; // 80% intensity
light = new THREE.DirectionalLight(colour, intensity); // create new directional light
light.position.set(-20, 50, -5); //setting initial lights position
light.castShadow = true; // ensures shadows will be left behind objects from the light
light.shadow.camera.near = 0.5;
light.shadow.camera.far = 5000;
light.shadow.camera.left = -500;
light.shadow.camera.bottom = -500;
light.shadow.camera.right = 500;
light.shadow.camera.top = 500;
light.shadow.mapSize.width = 2048;
light.shadow.mapSize.height = 2048;
scene.add(light);
ambientLight = new THREE.AmbientLight(0xffffff, 0.25);
scene.add(ambientLight);
// This was a test to see if my plane was creating shadows
//geometry = new THREE.BoxGeometry();
//material = new THREE.MeshNormalMaterial();
//cube = new THREE.Mesh(geometry, material);
//cube.position.set(10, -7, 0);
//scene.add(cube);
//Create a plane that receives shadows (but does not cast them)
const planeGeometry = new THREE.PlaneBufferGeometry(100, 100, 32);
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0xdfffff });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotateX(-Math.PI / 2);
plane.position.set(0, -10, 0);
scene.add(plane);
mixers = [];
loadModels();
window.addEventListener("resize", onWindowResize, false); //resize callback
play();
}
// stop animating (not currently used)
function stop() {
renderer.setAnimationLoop(null);
}
// simple render function
function render() {
renderer.render(scene, camera);
}
// start animating
function play() {
//using the new setAnimationLoop method which means we are WebXR ready if need be
renderer.setAnimationLoop(() => {
update();
render();
});
}
//update function
function update() {
orbit.update();
//rotating 3D logo
//update stuff in here
}
function onWindowResize() {
//resize & align
sceneHeight = window.innerHeight;
sceneWidth = window.innerWidth;
renderer.setSize(sceneWidth, sceneHeight);
camera.aspect = sceneWidth / sceneHeight;
camera.updateProjectionMatrix();
}
function loadModels() {
loader = new GLTFLoader();
// A reusable function to set up the models. We're passing in a position parameter
// so that they can be individually placed around the scene
const onLoadStatic = function (gltf, position) {
logo = gltf.scene.children[0]; // assign the first child of the scene contained in the gltf file to a varible called robot
logo.scale.multiplyScalar(1);
logo.position.copy(position); //copy the position passed from the laod function call
modelLoaded = true; // once model has loaded, set out modelLoaded boolean flag to true
scene.add(logo); // add out model to the scene
};
//the loader will report the laoding process to this function
const onProgress = function () {
console.log("progress");
};
//the loader will send any error messages to this function and we'll log to the console
const onError = function (errorMessage) {
console.log("Load Error", errorMessage);
};
const Logo = new THREE.Vector3(0, -5, 0);
loader.load(
// call the loader's load function
"models/Logo.glb", //specify file path
function (gltf) {
// specify the callback function to call once the model has loaded
onLoadStatic(gltf, Logo);
},
onProgress, // specify progres callback
onError // specify error callback
);
}