Skip to content

Commit

Permalink
Merge pull request #20503 from Mugen87/dev51
Browse files Browse the repository at this point in the history 
Examples: More clean up.
  • Loading branch information
@Mugen87
Mugen87 committed Oct 13, 2020
2 parents be673e6 + 75427aa commit 2cb4109
Show file tree
Hide file tree
Showing 76 changed files with 2,022 additions and 2,010 deletions.
186 changes: 91 additions & 95 deletions examples/webgl_animation_cloth.html
View file

Large diffs are not rendered by default.

33 changes: 16 additions & 17 deletions examples/webgl_animation_keyframes.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,56 +37,55 @@
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';

var scene, camera, dirLight, stats;
var renderer, mixer, controls;
let mixer;

var clock = new THREE.Clock();
var container = document.getElementById( 'container' );
const clock = new THREE.Clock();
const container = document.getElementById( 'container' );

stats = new Stats();
const stats = new Stats();
container.appendChild( stats.dom );

renderer = new THREE.WebGLRenderer( { antialias: true } );
const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );

scene = new THREE.Scene();
const scene = new THREE.Scene();
scene.background = new THREE.Color( 0xbfe3dd );

camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
const camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
camera.position.set( 5, 2, 8 );

controls = new OrbitControls( camera, renderer.domElement );
const controls = new OrbitControls( camera, renderer.domElement );
controls.target.set( 0, 0.5, 0 );
controls.update();
controls.enablePan = false;
controls.enableDamping = true;

scene.add( new THREE.HemisphereLight( 0xffffff, 0x000000, 0.4 ) );

dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
const dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
dirLight.position.set( 5, 2, 8 );
scene.add( dirLight );

// envmap
var path = 'textures/cube/Park2/';
var format = '.jpg';
var envMap = new THREE.CubeTextureLoader().load( [
const path = 'textures/cube/Park2/';
const format = '.jpg';
const envMap = new THREE.CubeTextureLoader().load( [
path + 'posx' + format, path + 'negx' + format,
path + 'posy' + format, path + 'negy' + format,
path + 'posz' + format, path + 'negz' + format
] );

var dracoLoader = new DRACOLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( 'js/libs/draco/gltf/' );

var loader = new GLTFLoader();
const loader = new GLTFLoader();
loader.setDRACOLoader( dracoLoader );
loader.load( 'models/gltf/LittlestTokyo.glb', function ( gltf ) {

var model = gltf.scene;
const model = gltf.scene;
model.position.set( 1, 1, 0 );
model.scale.set( 0.01, 0.01, 0.01 );
model.traverse( function ( child ) {
Expand Down Expand Up @@ -123,7 +122,7 @@

requestAnimationFrame( animate );

var delta = clock.getDelta();
const delta = clock.getDelta();

mixer.update( delta );

Expand Down
60 changes: 30 additions & 30 deletions examples/webgl_animation_multiple.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,11 @@
//////////////////////////////
// Global objects
//////////////////////////////
var worldScene = null; // THREE.Scene where it all will be rendered
var renderer = null;
var camera = null;
var clock = null;
var mixers = []; // All the THREE.AnimationMixer objects for all the animations in the scene
let worldScene = null; // THREE.Scene where it all will be rendered
let renderer = null;
let camera = null;
let clock = null;
const mixers = []; // All the THREE.AnimationMixer objects for all the animations in the scene
//////////////////////////////


Expand All @@ -40,15 +40,15 @@
// A model may have multiple SkinnedMesh objects as well as several rigs (armatures). Units will define which
// meshes, armatures and animations to use. We will load the whole scene for each object and clone it for each unit.
// Models are from https://www.mixamo.com/
var MODELS = [
const MODELS = [
{ name: "Soldier" },
{ name: "Parrot" },
// { name: "RiflePunch" },
];

// Here we define instances of the models that we want to place in the scene, their position, scale and the animations
// that must be played.
var UNITS = [
const UNITS = [
{
modelName: "Soldier", // Will use the 3D model from file models/gltf/Soldier.glb
meshName: "vanguard_Mesh", // Name of the main mesh to animate
Expand Down Expand Up @@ -91,7 +91,7 @@
//////////////////////////////
// The main setup happens here
//////////////////////////////
var numLoadedModels = 0;
let numLoadedModels = 0;
initScene();
initRenderer();
loadModels();
Expand All @@ -109,9 +109,9 @@
*/
function loadModels() {

for ( var i = 0; i < MODELS.length; ++ i ) {
for ( let i = 0; i < MODELS.length; ++ i ) {

var m = MODELS[ i ];
const m = MODELS[ i ];

loadGltfModel( m, function () {

Expand All @@ -136,25 +136,25 @@
*/
function instantiateUnits() {

var numSuccess = 0;
let numSuccess = 0;

for ( var i = 0; i < UNITS.length; ++ i ) {
for ( let i = 0; i < UNITS.length; ++ i ) {

var u = UNITS[ i ];
var model = getModelByName( u.modelName );
const u = UNITS[ i ];
const model = getModelByName( u.modelName );

if ( model ) {

var clonedScene = SkeletonUtils.clone( model.scene );
const clonedScene = SkeletonUtils.clone( model.scene );

if ( clonedScene ) {

// THREE.Scene is cloned properly, let's find one mesh and launch animation for it
var clonedMesh = clonedScene.getObjectByName( u.meshName );
const clonedMesh = clonedScene.getObjectByName( u.meshName );

if ( clonedMesh ) {

var mixer = startAnimation( clonedMesh, model.animations, u.animationName );
const mixer = startAnimation( clonedMesh, model.animations, u.animationName );

// Save the animation mixer in the list, will need it in the animation loop
mixers.push( mixer );
Expand Down Expand Up @@ -211,12 +211,12 @@
*/
function startAnimation( skinnedMesh, animations, animationName ) {

var mixer = new THREE.AnimationMixer( skinnedMesh );
var clip = THREE.AnimationClip.findByName( animations, animationName );
const mixer = new THREE.AnimationMixer( skinnedMesh );
const clip = THREE.AnimationClip.findByName( animations, animationName );

if ( clip ) {

var action = mixer.clipAction( clip );
const action = mixer.clipAction( clip );
action.play();

}
Expand All @@ -232,7 +232,7 @@
*/
function getModelByName( name ) {

for ( var i = 0; i < MODELS.length; ++ i ) {
for ( let i = 0; i < MODELS.length; ++ i ) {

if ( MODELS[ i ].name === name ) {

Expand All @@ -253,12 +253,12 @@
*/
function loadGltfModel( model, onLoaded ) {

var loader = new GLTFLoader();
var modelName = "models/gltf/" + model.name + ".glb";
const loader = new GLTFLoader();
const modelName = "models/gltf/" + model.name + ".glb";

loader.load( modelName, function ( gltf ) {

var scene = gltf.scene;
const scene = gltf.scene;

model.animations = gltf.animations;
model.scene = scene;
Expand Down Expand Up @@ -292,11 +292,11 @@

// Get the time elapsed since the last frame

var mixerUpdateDelta = clock.getDelta();
const mixerUpdateDelta = clock.getDelta();

// Update all the animation frames

for ( var i = 0; i < mixers.length; ++ i ) {
for ( let i = 0; i < mixers.length; ++ i ) {

mixers[ i ].update( mixerUpdateDelta );

Expand All @@ -316,7 +316,7 @@
*/
function initRenderer() {

var container = document.getElementById( 'container' );
const container = document.getElementById( 'container' );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
Expand All @@ -342,11 +342,11 @@
worldScene.background = new THREE.Color( 0xa0a0a0 );
worldScene.fog = new THREE.Fog( 0xa0a0a0, 10, 22 );

var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
hemiLight.position.set( 0, 20, 0 );
worldScene.add( hemiLight );

var dirLight = new THREE.DirectionalLight( 0xffffff );
const dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( - 3, 10, - 10 );
dirLight.castShadow = true;
dirLight.shadow.camera.top = 10;
Expand All @@ -358,7 +358,7 @@
worldScene.add( dirLight );

// ground
var groundMesh = new THREE.Mesh(
const groundMesh = new THREE.Mesh(
new THREE.PlaneBufferGeometry( 40, 40 ),
new THREE.MeshPhongMaterial( {
color: 0x999999,
Expand Down
34 changes: 17 additions & 17 deletions examples/webgl_animation_skinning_additive_blending.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,12 @@
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';

var scene, renderer, camera, stats;
var model, skeleton, mixer, clock;
let scene, renderer, camera, stats;
let model, skeleton, mixer, clock;

var crossFadeControls = [];
const crossFadeControls = [];

var currentBaseAction = 'idle';
let currentBaseAction = 'idle';
const allActions = [];
const baseActions = {
idle: { weight: 1 },
Expand All @@ -54,24 +54,24 @@
agree: { weight: 0 },
headShake: { weight: 0 }
};
var panelSettings, numAnimations;
let panelSettings, numAnimations;

init();

function init() {

var container = document.getElementById( 'container' );
const container = document.getElementById( 'container' );
clock = new THREE.Clock();

scene = new THREE.Scene();
scene.background = new THREE.Color( 0xa0a0a0 );
scene.fog = new THREE.Fog( 0xa0a0a0, 10, 50 );

var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
hemiLight.position.set( 0, 20, 0 );
scene.add( hemiLight );

var dirLight = new THREE.DirectionalLight( 0xffffff );
const dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( 3, 10, 10 );
dirLight.castShadow = true;
dirLight.shadow.camera.top = 2;
Expand All @@ -84,12 +84,12 @@

// ground

var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 100, 100 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
const mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 100, 100 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
scene.add( mesh );

var loader = new GLTFLoader();
const loader = new GLTFLoader();
loader.load( 'models/gltf/Xbot.glb', function ( gltf ) {

model = gltf.scene;
Expand All @@ -105,7 +105,7 @@
skeleton.visible = false;
scene.add( skeleton );

var animations = gltf.animations;
const animations = gltf.animations;
mixer = new THREE.AnimationMixer( model );

numAnimations = animations.length;
Expand Down Expand Up @@ -160,7 +160,7 @@
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 100 );
camera.position.set( - 1, 2, 3 );

var controls = new OrbitControls( camera, renderer.domElement );
const controls = new OrbitControls( camera, renderer.domElement );
controls.enablePan = false;
controls.enableZoom = false;
controls.target.set( 0, 1, 0 );
Expand All @@ -175,11 +175,11 @@

function createPanel() {

var panel = new GUI( { width: 310 } );
const panel = new GUI( { width: 310 } );

var folder1 = panel.addFolder( 'Base Actions' );
var folder2 = panel.addFolder( 'Additive Action Weights' );
var folder3 = panel.addFolder( 'General Speed' );
const folder1 = panel.addFolder( 'Base Actions' );
const folder2 = panel.addFolder( 'Additive Action Weights' );
const folder3 = panel.addFolder( 'General Speed' );

panelSettings = {
'modify time scale': 1.0
Expand Down Expand Up @@ -404,7 +404,7 @@

// Get the time elapsed since the last frame, used for mixer update

var mixerUpdateDelta = clock.getDelta();
const mixerUpdateDelta = clock.getDelta();

// Update the animation mixer, the stats panel, and render this frame

Expand Down
Loading

0 comments on commit 2cb4109

Please sign in to comment.