Skip to content

Commit

Permalink
Examples: More module examples.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mugen87
Mugen87 committed Jun 17, 2019
1 parent 06b3205 commit fad9a7f
Show file tree
Hide file tree
Showing 25 changed files with 1,037 additions and 730 deletions.
59 changes: 38 additions & 21 deletions examples/misc_animation_authoring.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,29 @@
Press "Q" to toggle world/local space, hold down "Ctrl" to snap to grid
</div>

<script src="../build/three.js"></script>
<script src="js/controls/TransformControls.js"></script>
<script src="js/libs/timeliner_gui.min.js"></script>
<script src="js/animation/TimelinerController.js"></script>

<script>
<script type="module">
import {
BoxBufferGeometry,
DirectionalLight,
GridHelper,
InterpolateLinear,
InterpolateSmooth,
Math as _Math,
MeshLambertMaterial,
Mesh,
PerspectiveCamera,
QuaternionKeyframeTrack,
Scene,
TextureLoader,
UVMapping,
VectorKeyframeTrack,
WebGLRenderer
} from "../build/three.module.js";

import { TransformControls } from './jsm/controls/TransformControls.js';
import { TimelinerController } from './jsm/animation/TimelinerController.js';

var camera, scene, renderer, control;

Expand All @@ -27,36 +44,36 @@

function init() {

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

//

camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 3000 );
camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 3000 );
camera.position.set( 1000, 500, 1000 );
camera.lookAt( 0, 200, 0 );

scene = new THREE.Scene();
scene.add( new THREE.GridHelper( 1000, 10 ) );
scene = new Scene();
scene.add( new GridHelper( 1000, 10 ) );

var light = new THREE.DirectionalLight( 0xffffff, 2 );
var light = new DirectionalLight( 0xffffff, 2 );
light.position.set( 1, 1, 1 );
scene.add( light );


var texture = new THREE.TextureLoader().load( 'textures/crate.gif', render );
texture.mapping = THREE.UVMapping;
var texture = new TextureLoader().load( 'textures/crate.gif', render );
texture.mapping = UVMapping;
texture.anisotropy = renderer.capabilities.getMaxAnisotropy();

var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
var material = new THREE.MeshLambertMaterial( { map: texture } );
var geometry = new BoxBufferGeometry( 200, 200, 200 );
var material = new MeshLambertMaterial( { map: texture } );

control = new THREE.TransformControls( camera, renderer.domElement );
control = new TransformControls( camera, renderer.domElement );
control.addEventListener( 'change', render );

var mesh = new THREE.Mesh( geometry, material );
var mesh = new Mesh( geometry, material );
mesh.name = "MyBox";
scene.add( mesh );

Expand All @@ -75,7 +92,7 @@

case 17: // Ctrl
control.setTranslationSnap( 100 );
control.setRotationSnap( THREE.Math.degToRad( 15 ) );
control.setRotationSnap( _Math.degToRad( 15 ) );
break;

case 87: // W
Expand Down Expand Up @@ -120,23 +137,23 @@
var trackInfo = [

{
type: THREE.VectorKeyframeTrack,
type: VectorKeyframeTrack,
propertyPath: 'MyBox.position',
initialValue: [ 0, 0, 0 ],
interpolation: THREE.InterpolateSmooth
interpolation: InterpolateSmooth
},

{
type: THREE.QuaternionKeyframeTrack,
type: QuaternionKeyframeTrack,
propertyPath: 'MyBox.quaternion',
initialValue: [ 0, 0, 0, 1 ],
interpolation: THREE.InterpolateLinear
interpolation: InterpolateLinear

}

];

new Timeliner( new THREE.TimelinerController( scene, trackInfo, render ) );
new Timeliner( new TimelinerController( scene, trackInfo, render ) );

}

Expand Down
64 changes: 37 additions & 27 deletions examples/misc_animation_groups.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,27 @@
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - animation - groups
</div>

<script src="../build/three.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/stats.min.js"></script>

<script>

if ( WEBGL.isWebGLAvailable() === false ) {

document.body.appendChild( WEBGL.getWebGLErrorMessage() );

}
<script type="module">
import {
AnimationClip,
AnimationMixer,
AnimationObjectGroup,
BoxBufferGeometry,
Clock,
ColorKeyframeTrack,
InterpolateDiscrete,
Mesh,
MeshBasicMaterial,
NumberKeyframeTrack,
PerspectiveCamera,
Quaternion,
QuaternionKeyframeTrack,
Scene,
Vector3,
WebGLRenderer
} from "../build/three.module.js";

import Stats from './jsm/libs/stats.module.js';

var stats, clock;
var scene, camera, renderer, mixer;
Expand All @@ -32,30 +42,30 @@

function init() {

scene = new THREE.Scene();
scene = new Scene();

//

camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 50, 50, 100 );
camera.lookAt( scene.position );

// all objects of this animation group share a common animation state

var animationGroup = new THREE.AnimationObjectGroup();
var animationGroup = new AnimationObjectGroup();

//

var geometry = new THREE.BoxBufferGeometry( 5, 5, 5 );
var material = new THREE.MeshBasicMaterial( { transparent: true } );
var geometry = new BoxBufferGeometry( 5, 5, 5 );
var material = new MeshBasicMaterial( { transparent: true } );

//

for ( var i = 0; i < 5; i ++ ) {

for ( var j = 0; j < 5; j ++ ) {

var mesh = new THREE.Mesh( geometry, material );
var mesh = new Mesh( geometry, material );

mesh.position.x = 32 - ( 16 * i );
mesh.position.y = 0;
Expand All @@ -70,28 +80,28 @@

// create some keyframe tracks

var xAxis = new THREE.Vector3( 1, 0, 0 );
var qInitial = new THREE.Quaternion().setFromAxisAngle( xAxis, 0 );
var qFinal = new THREE.Quaternion().setFromAxisAngle( xAxis, Math.PI );
var quaternionKF = new THREE.QuaternionKeyframeTrack( '.quaternion', [ 0, 1, 2 ], [ qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w ] );
var xAxis = new Vector3( 1, 0, 0 );
var qInitial = new Quaternion().setFromAxisAngle( xAxis, 0 );
var qFinal = new Quaternion().setFromAxisAngle( xAxis, Math.PI );
var quaternionKF = new QuaternionKeyframeTrack( '.quaternion', [ 0, 1, 2 ], [ qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w ] );

var colorKF = new THREE.ColorKeyframeTrack( '.material.color', [ 0, 1, 2 ], [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], THREE.InterpolateDiscrete );
var opacityKF = new THREE.NumberKeyframeTrack( '.material.opacity', [ 0, 1, 2 ], [ 1, 0, 1 ] );
var colorKF = new ColorKeyframeTrack( '.material.color', [ 0, 1, 2 ], [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], InterpolateDiscrete );
var opacityKF = new NumberKeyframeTrack( '.material.opacity', [ 0, 1, 2 ], [ 1, 0, 1 ] );

// create clip

var clip = new THREE.AnimationClip( 'default', 3, [ quaternionKF, colorKF, opacityKF ] );
var clip = new AnimationClip( 'default', 3, [ quaternionKF, colorKF, opacityKF ] );

// apply the animation group to the mixer as the root object

mixer = new THREE.AnimationMixer( animationGroup );
mixer = new AnimationMixer( animationGroup );

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

//

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
Expand All @@ -103,7 +113,7 @@

//

clock = new THREE.Clock();
clock = new Clock();

//

Expand Down
69 changes: 40 additions & 29 deletions examples/misc_animation_keys.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,28 @@
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - animation - basic use
</div>

<script src="../build/three.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/stats.min.js"></script>

<script>

if ( WEBGL.isWebGLAvailable() === false ) {

document.body.appendChild( WEBGL.getWebGLErrorMessage() );

}
<script type="module">
import {
AnimationClip,
AnimationMixer,
AxesHelper,
BoxBufferGeometry,
Clock,
ColorKeyframeTrack,
InterpolateDiscrete,
Mesh,
MeshBasicMaterial,
NumberKeyframeTrack,
PerspectiveCamera,
Quaternion,
QuaternionKeyframeTrack,
Scene,
Vector3,
VectorKeyframeTrack,
WebGLRenderer
} from "../build/three.module.js";

import Stats from './jsm/libs/stats.module.js';

var stats, clock;
var scene, camera, renderer, mixer;
Expand All @@ -32,66 +43,66 @@

function init() {

scene = new THREE.Scene();
scene = new Scene();

//

camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 50, 50, 100 );
camera.lookAt( scene.position );

//

var axesHelper = new THREE.AxesHelper( 10 );
var axesHelper = new AxesHelper( 10 );
scene.add( axesHelper );

//

var geometry = new THREE.BoxBufferGeometry( 5, 5, 5 );
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, transparent: true } );
var mesh = new THREE.Mesh( geometry, material );
var geometry = new BoxBufferGeometry( 5, 5, 5 );
var material = new MeshBasicMaterial( { color: 0xffffff, transparent: true } );
var mesh = new Mesh( geometry, material );
scene.add( mesh );

// create a keyframe track (i.e. a timed sequence of keyframes) for each animated property
// Note: the keyframe track type should correspond to the type of the property being animated

// POSITION
var positionKF = new THREE.VectorKeyframeTrack( '.position', [ 0, 1, 2 ], [ 0, 0, 0, 30, 0, 0, 0, 0, 0 ] );
var positionKF = new VectorKeyframeTrack( '.position', [ 0, 1, 2 ], [ 0, 0, 0, 30, 0, 0, 0, 0, 0 ] );

// SCALE
var scaleKF = new THREE.VectorKeyframeTrack( '.scale', [ 0, 1, 2 ], [ 1, 1, 1, 2, 2, 2, 1, 1, 1 ] );
var scaleKF = new VectorKeyframeTrack( '.scale', [ 0, 1, 2 ], [ 1, 1, 1, 2, 2, 2, 1, 1, 1 ] );

// ROTATION
// Rotation should be performed using quaternions, using a QuaternionKeyframeTrack
// Interpolating Euler angles (.rotation property) can be problematic and is currently not supported

// set up rotation about x axis
var xAxis = new THREE.Vector3( 1, 0, 0 );
var xAxis = new Vector3( 1, 0, 0 );

var qInitial = new THREE.Quaternion().setFromAxisAngle( xAxis, 0 );
var qFinal = new THREE.Quaternion().setFromAxisAngle( xAxis, Math.PI );
var quaternionKF = new THREE.QuaternionKeyframeTrack( '.quaternion', [ 0, 1, 2 ], [ qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w ] );
var qInitial = new Quaternion().setFromAxisAngle( xAxis, 0 );
var qFinal = new Quaternion().setFromAxisAngle( xAxis, Math.PI );
var quaternionKF = new QuaternionKeyframeTrack( '.quaternion', [ 0, 1, 2 ], [ qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w ] );

// COLOR
var colorKF = new THREE.ColorKeyframeTrack( '.material.color', [ 0, 1, 2 ], [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], THREE.InterpolateDiscrete );
var colorKF = new ColorKeyframeTrack( '.material.color', [ 0, 1, 2 ], [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], InterpolateDiscrete );

// OPACITY
var opacityKF = new THREE.NumberKeyframeTrack( '.material.opacity', [ 0, 1, 2 ], [ 1, 0, 1 ] );
var opacityKF = new NumberKeyframeTrack( '.material.opacity', [ 0, 1, 2 ], [ 1, 0, 1 ] );

// create an animation sequence with the tracks
// If a negative time value is passed, the duration will be calculated from the times of the passed tracks array
var clip = new THREE.AnimationClip( 'Action', 3, [ scaleKF, positionKF, quaternionKF, colorKF, opacityKF ] );
var clip = new AnimationClip( 'Action', 3, [ scaleKF, positionKF, quaternionKF, colorKF, opacityKF ] );

// setup the AnimationMixer
mixer = new THREE.AnimationMixer( mesh );
mixer = new AnimationMixer( mesh );

// create a ClipAction and set it to play
var clipAction = mixer.clipAction( clip );
clipAction.play();

//

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
Expand All @@ -103,7 +114,7 @@

//

clock = new THREE.Clock();
clock = new Clock();

//

Expand Down
Loading

0 comments on commit fad9a7f

Please sign in to comment.