We Keep Coding

How to update DeltaY clock in three.js on scroll (top/bottom)

I have an animation prototype - which plays on scroll - is there a way to reset animation on scroll to top/bottom? Basically from the top it plays and stops when it reaches the bottom? Right now the animation loops and ignores top/bottom (start/end).
When scrolled from the top it plays forward and when reached the bottom it plays in reverse is the desired bahaviour.
var container, stats, controls;
var camera, scene, renderer, light;
var clock = new THREE.Clock();
var mixer = [];
var mixers = [];
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set( 0, 100, 100 );
scene = new THREE.Scene();
light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
light.position.set( 0, 200, 0 );
scene.add( light );
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 200, 100 );
light.castShadow = true;
light.shadow.camera.top = 180;
light.shadow.camera.bottom = -100;
light.shadow.camera.left = -120;
light.shadow.camera.right = 120;
scene.add( light );
// scene.add( new THREE.CameraHelper( light.shadow.camera ) );
var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
grid.material.opacity = 0.2;
grid.material.transparent = true;
scene.add( grid );
// model
var loader = new THREE.FBXLoader();
loader.load( 'https://threejs.org/examples/models/fbx/Samba Dancing.fbx', function ( object ) {
object.mixer = new THREE.AnimationMixer( object );
mixers.push( object.mixer );
var action = object.mixer.clipAction( object.animations[ 0 ] );
action.play();
object.traverse( function ( child ) {
if ( child.isMesh ) {
child.castShadow = true;
child.receiveShadow = true;
}
} );
object.position.y = 85;
scene.add( object );
} );
renderer = new THREE.WebGLRenderer( { alpha: true, antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
container.appendChild( renderer.domElement );
window.addEventListener( 'mousewheel', onMouseWheel, false );
window.addEventListener( 'touchstart', onTouchStart, false );
window.addEventListener( 'touchmove', onTouchMove, false );
window.addEventListener('resize', onResize, false);
// stats
stats = new Stats();
container.appendChild( stats.dom );
}
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function onMouseWheel( event ) {
if(event.deltaY > 0){
for ( var i = 0; i < mixers.length; i ++ ) {
mixers[ i ].update( clock.getDelta() * 5 );
}
} else {
for ( var i = 0; i < mixers.length; i ++ ) {
mixers[ i ].update( clock.getDelta() * -5 );
}
}
}
function onTouchStart(event) {
startY = event.touches[ 0 ].pageY;
}
function onTouchMove( event ) {
var delta = event.deltaY;
if(event.deltaY > 0){
for ( var i = 0; i < mixers.length; i ++ ) {
mixers[ i ].update( clock.getDelta() * 5 );
}
} else {
for ( var i = 0; i < mixers.length; i ++ ) {
mixers[ i ].update( clock.getDelta() * -5 );
}
}
}
function animate() {
delta = clock.getDelta();
requestAnimationFrame( animate );
renderer.render( scene, camera );
stats.update();
}
body {
margin: 0px;
overflow: hidden;
}
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/libs/inflate.min.js"></script>
<script src="https://threejs.org/examples/js/loaders/FBXLoader.js"></script>
<script src="https://threejs.org/examples/js/WebGL.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>

First off you should never link directly to threejs.org. Your example will break when the three.js devs update the version which will make your question example useless to others. Use a specific version from a CDN!
Otherwise if you save off the clips
object.mixer = new THREE.AnimationMixer( object );
mixers.push( object.mixer );
const clip = object.animations[0];
clips.push(clip);
var action = object.mixer.clipAction(clip);
action.play();
Then maybe you could use code like this
function updateAnimation(direction) {
const delta = direction * 5 * clock.getDelta();
for (let i = 0; i < mixers.length; ++i) {
const mixer = mixers[i];
const clip = clips[i];
const duration = clip.duration;
const newTime = THREE.MathUtils.clamp(mixer.time + delta, 0, duration);
mixer.setTime(newTime);
}
}
function onMouseWheel( event ) {
updateAnimation(Math.sign(event.deltaY));
}
...
var container, stats, controls;
var camera, scene, renderer, light;
var duration;
var clock = new THREE.Clock();
var mixer = [];
var mixers = [];
var clips = [];
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set( 0, 100, 100 );
scene = new THREE.Scene();
light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
light.position.set( 0, 200, 0 );
scene.add( light );
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 200, 100 );
light.castShadow = true;
light.shadow.camera.top = 180;
light.shadow.camera.bottom = -100;
light.shadow.camera.left = -120;
light.shadow.camera.right = 120;
scene.add( light );
// scene.add( new THREE.CameraHelper( light.shadow.camera ) );
var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
grid.material.opacity = 0.2;
grid.material.transparent = true;
scene.add( grid );
// model
var loader = new THREE.FBXLoader();
loader.load( 'https://threejs.org/examples/models/fbx/Samba Dancing.fbx', function ( object ) {
object.mixer = new THREE.AnimationMixer( object );
mixers.push( object.mixer );
const clip = object.animations[0];
clips.push(clip);
var action = object.mixer.clipAction(clip);
action.play();
object.traverse( function ( child ) {
if ( child.isMesh ) {
child.castShadow = true;
child.receiveShadow = true;
}
} );
object.position.y = 85;
scene.add( object );
} );
renderer = new THREE.WebGLRenderer( { alpha: true, antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
container.appendChild( renderer.domElement );
window.addEventListener( 'mousewheel', onMouseWheel, false );
window.addEventListener('resize', onResize, false);
// stats
stats = new Stats();
container.appendChild( stats.dom );
}
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function updateAnimation(direction) {
const delta = direction * 5 * clock.getDelta();
for (let i = 0; i < mixers.length; ++i) {
const mixer = mixers[i];
const clip = clips[i];
const duration = clip.duration;
const newTime = THREE.MathUtils.clamp(mixer.time + delta, 0, duration);
mixer.setTime(newTime);
}
}
function onMouseWheel( event ) {
updateAnimation(Math.sign(event.deltaY));
}
function animate() {
delta = clock.getDelta();
requestAnimationFrame( animate );
renderer.render( scene, camera );
stats.update();
}
body {
margin: 0px;
overflow: hidden;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.113.2/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.113.2/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.113.2/examples/js/libs/inflate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.113.2/examples/js/loaders/FBXLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.113.2/examples/js/WebGL.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.113.2/examples/js/libs/stats.min.js"></script>

Why is my PlaneGeometry not receiving a shadow?

I am using three.js to create a scene that has a model on it. I have a plane on which the model sits, and a spotlight shining on the model.
The model is made up of a number of different objects. All of the objects are set to receive and cast shadows. Shadows are being cast on the model itself from other areas of the model.
The plane, however, won't receive shadows. I'm unsure why.
I have adjusted the spotLight.shadowCameraNear and spotLight.shadowCameraFar properties to ensure both the model and plane are within the shadow area. Still nothing.
Below is a screenshot of the model with the spotlight visible.
I have the shadowmap enabled and set to the soft maps:
renderer.shadowMap.enabled = true; // Shadow map enabled
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
My code is as follows:
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats, controls;
var camera, scene, renderer, sceneAnimationClip ;
var clock = new THREE.Clock();
var mixers = [];
var globalObjects = [];
init();
function init() {
var loader = new THREE.TextureLoader();
container = document.createElement( 'div' );
document.body.appendChild( container );
// Scene
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0xffffff, 50, 100 );
// Camera
camera = new THREE.PerspectiveCamera( 30, (window.innerWidth / window.innerHeight), 1, 10000 );
camera.position.x = 1000;
camera.position.y = 50;
camera.position.z = 1500;
scene.add( camera );
// LIGHTS
var spotLight = new THREE.SpotLight( 0xffffff,1 );
spotLight.position.set( 5, 5, 6 );
spotLight.castShadow = true;
spotLight.target.position.set(-1, 0, 2 );
spotLight.shadowDarkness = 0.5;
spotLight.shadowCameraNear = 4;
spotLight.shadowCameraFar = 25;
scene.add( spotLight );
// Camera helper for spotlight
var helper = new THREE.CameraHelper( spotLight.shadow.camera );
scene.add( helper );
// ground
var geometry = new THREE.PlaneGeometry( 30, 30 );
geometry.receiveShadow = true;
var material = new THREE.MeshBasicMaterial( {color: 0xcccccc, side: THREE.DoubleSide} );
material.receiveShadow = true;
var floor = new THREE.Mesh( geometry, material );
floor.receiveShadow = true;
floor.position.y = -1;
floor.rotation.x = Math.PI / 2;
scene.add( floor );
// stats
stats = new Stats();
container.appendChild( stats.dom );
// model
var manager = new THREE.LoadingManager();
manager.onProgress = function( item, loaded, total ) {
console.log( item, loaded, total );
};
// BEGIN Clara.io JSON loader code
var i = 0;
var objectLoader = new THREE.ObjectLoader();
objectLoader.load("final-master-20170426.json", function ( object ) {
var textureLoader = new THREE.TextureLoader();
object.traverse( function ( child )
{
if ( child instanceof THREE.Mesh ) {
var material = child.material.clone();
material.shininess = 0;
material.wireframe = false;
material.normalScale = new THREE.Vector2( 1, 1 );
/* Roof Glass */
if(child.name == 'Roof_Glass') {
material.shininess = 100;
material.alphaMap = grayscale;
material.transparent = true;
}
// Beading
if(child.name.endsWith('_Beading')) {
material.color.setHex( 0x1e1e1e );
material.shininess = 100;
}
/* Pillars */
if(
child.name.indexOf('Pillar') == 0 ||
child.name == 'Main_Frame' ||
child.name == 'Main_Cross_Supports' ||
child.name == 'roof_batons' ||
child.name == 'Roof_Flashings'
) {
material.color.setHex( 0x1e1e1e );
material.shininess = 100;
}
/* Lamps */
if(child.name.indexOf('Lamp') == 0) {
material.color.setHex( 0x1e1e1e );
material.shininess = 100;
}
// Set shadows for everything
material.castShadow = true;
material.receiveShadow = true;
child.material = material;
material = undefined;
globalObjects[child.name] = child;
console.log(child);
}
});
object.position.y = -1;
object.position.x = 0;
scene.add( object );
scene.fog = new THREE.Fog( 0xffffff, 50, 100 );
i++;
} );
// END Clara.io JSON loader code
renderer = new THREE.WebGLRenderer({
'antialias': true
});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( scene.fog.color );
container.appendChild( renderer.domElement );
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.shadowMap.enabled = true; // Shadow map enabled
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
// controls, camera
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.target.set( 0, 0, 0 );
controls.maxPolarAngle = Math.PI * 0.5;
camera.position.set( 8, 3, 10 );
controls.update();
window.addEventListener( 'resize', onWindowResize, false );
animate();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
stats.update();
render();
}
function render() {
var delta = 0.75 * clock.getDelta();
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
</script>

This was fixed by using a THREE.MeshPhongMaterial instead of a THREE.MeshBasicMaterial.

Rotate object with rotated parent in world space?

I'm using this function to rotate object Y axis in world space:
function rotateWorldYAxis( obj, angle ) {
quat.setFromAxisAngle( new THREE.Vector3(0,1,0), angle );
obj.quaternion.multiplyQuaternions(quat,obj.quaternion);
obj.updateMatrixWorld();
}
But it doesn't work with the object has rotated parent.
Here is example Fiddle:
Correct behavior when parent not rotated:
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container, stats;
var camera, scene, controls;
var renderer;
var quat = new THREE.Quaternion();
var axis = new THREE.Vector3();
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
// CAMERA
camera = new THREE.PerspectiveCamera( 30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.set( 0, 0, 500 );
scene = new THREE.Scene();
scene.add( new THREE.AmbientLight( 0xaaaaaa ) );
var light = new THREE.PointLight( 0xffffff );
light.position.set(100,100,100);
scene.add( light );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.domElement.style.position = "relative";
container.appendChild( renderer.domElement );
//____________________________//
cube = new THREE.Mesh(
new THREE.CubeGeometry(50,100,50),
new THREE.MeshPhongMaterial()
);
cube.rotation.set(Math.PI/3, 0, 0);
cubeParent = new THREE.Object3D();
cubeParent.rotation.set(0,0,0) //Not rotated parent
cubeParent.add(cube)
scene.add(cubeParent)
//____________________________//
var grid = new THREE.Mesh(
new THREE.PlaneGeometry(200, 200, 10, 10),
new THREE.MeshBasicMaterial({wireframe: true})
)
grid.position.y = -100
grid.rotation.x = Math.PI/2
scene.add(grid);
window.addEventListener( 'resize', onWindowResize, false );
}
function rotateWorldYAxis( obj, angle ) {
quat.setFromAxisAngle( new THREE.Vector3(0,1,0), angle );
obj.quaternion.multiplyQuaternions(quat,obj.quaternion);
obj.updateMatrixWorld();
}
function animate() {
requestAnimationFrame( animate );
render();
rotateWorldYAxis(cube, 0.01)
}
function render() {
renderer.render( scene, camera );
}
function onWindowResize( event ) {
SCREEN_WIDTH = window.innerWidth;
SCREEN_HEIGHT = window.innerHeight;
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
camera.updateProjectionMatrix();
}
<script src="https://threejs.org/build/three.js"></script>
<p style="position: fixed;z-index:1;top:0;text-align:center;color: #fff">This is correct behavior</p>
Wrong behavior when parent is rotated:
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container, stats;
var camera, scene, controls;
var renderer;
var quat = new THREE.Quaternion();
var axis = new THREE.Vector3();
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
// CAMERA
camera = new THREE.PerspectiveCamera( 30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.set( 0, 0, 500 );
scene = new THREE.Scene();
scene.add( new THREE.AmbientLight( 0xaaaaaa ) );
var light = new THREE.PointLight( 0xffffff );
light.position.set(100,100,100);
scene.add( light );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.domElement.style.position = "relative";
container.appendChild( renderer.domElement );
//____________________________//
cube = new THREE.Mesh(
new THREE.CubeGeometry(50,100,50),
new THREE.MeshPhongMaterial()
);
cube.rotation.set(Math.PI/3, 0, 0);
cubeParent = new THREE.Object3D();
cubeParent.rotation.set(1,0,0) //Rotated parent
cubeParent.add(cube)
scene.add(cubeParent)
//____________________________//
var grid = new THREE.Mesh(
new THREE.PlaneGeometry(200, 200, 10, 10),
new THREE.MeshBasicMaterial({wireframe: true})
)
grid.position.y = -100
grid.rotation.x = Math.PI/2
scene.add(grid);
window.addEventListener( 'resize', onWindowResize, false );
}
function rotateWorldYAxis( obj, angle ) {
quat.setFromAxisAngle( new THREE.Vector3(0,1,0), angle );
obj.quaternion.multiplyQuaternions(quat,obj.quaternion);
obj.updateMatrixWorld();
}
function animate() {
requestAnimationFrame( animate );
render();
rotateWorldYAxis(cube, 0.01)
}
function render() {
renderer.render( scene, camera );
}
function onWindowResize( event ) {
SCREEN_WIDTH = window.innerWidth;
SCREEN_HEIGHT = window.innerHeight;
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
camera.updateProjectionMatrix();
}
<script src="https://threejs.org/build/three.js"></script>
<p style="position: fixed;z-index:1;top:0;text-align:center;color: #fff">Parent rotate cause this wrong behavior, this cube need to rotates on Y world axis</p>
Any help is appreciated! Thank you!

How to use EdgesHelper on imported Collada model in three.js

I'm trying to use EdgesHelper on loaded Collada model in three.js and having problems with:
applying edges to the whole model geometry,
misalignment and scale differences between the Collada model
and generated edges.
http://codepen.io/znak/pen/raqBLM?editors=001
var controls, scene, camera, renderer;
var light;
var dae, daeGeometry, daeMaterial, daeMesh, daeEdges;
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load( 'http://www.lenart.pl/assets/codepen/FestoolClamp2.dae', function ( collada ) {
dae = collada.scene;
daeMaterial = new THREE.MeshBasicMaterial( { color: 0xaaaaaa } );
collada.scene.traverse( function ( child ) {
if ( child.material ) child.material = daeMaterial;
if ( child.geometry ) {
daeMesh = new THREE.Mesh( child.geometry, daeMaterial );
daeEdges = new THREE.EdgesHelper( daeMesh, 0x444444 );
}
} );
dae.updateMatrix();
init();
render();
} );
function init() {
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 0, 150, -350 );
controls = new THREE.OrbitControls( camera );
controls.addEventListener( 'change', render );
light = new THREE.DirectionalLight( 0xffffff, .75 );
light.position.set( 0, 1, -2 );
scene.add( light );
dae.add( daeEdges );
scene.add( dae );
dae.scale.x = dae.scale.y = dae.scale.z = 10;
renderer = new THREE.WebGLRenderer( { alpha: true, antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
animate();
}
function animate() {
requestAnimationFrame( animate );
dae.rotation.y += 0.002;
controls.update();
render();
}
function render() {
renderer.render( scene, camera );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
Any help would be appreciated.

Traverse the scene objects and add edges using EdgesHelper in the loader callback:
object3D.traverse(function(o){ if (o.type === "Mesh") {
var m = new THREE.EdgesHelper(o, 0x0);
m.matrixAutoUpdate = true;
m.matrix = o.matrix;
o.add(m);
} });
You should see outline on your imported dae models. I'm using this in one of my projects.

Three.js - VRML Loader

I'm trying to use the Three.js with VRML (WRL) models. What I am wondering is that the model is loaded with variations of colors (colored). How can I load the model in solid color as the original file?
My example is: http://dev.logicarts.com.br/semapro/projeto-3d/teste-1.html
The code:
<div id="info">
three.js -
vrml format loader test -
<!--model from VRML 2.0 Tutorial,-->
</div>
<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/VRMLLoader.js"></script>
<script src="js/Detector.js"></script>
<script src="js/stats.min.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, controls, scene, renderer;
var cross;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10 );
camera.position.z = 6;
controls = new THREE.OrbitControls( camera );
controls.rotateSpeed = 5.0;
controls.zoomSpeed = 5;
controls.noZoom = false;
controls.noPan = false;
scene = new THREE.Scene();
scene.add( camera );
// light
var dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( 200, 200, 1000 ).normalize();
camera.add( dirLight );
camera.add( dirLight.target );
var loader = new THREE.VRMLLoader();
loader.addEventListener( 'load', function ( event ) {
scene.add(event.content);
} );
loader.load( "3d/conjunto-carcaca.wrl" );
// renderer
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setSize( window.innerWidth, window.innerHeight );
container = document.createElement( 'div' );
document.body.appendChild( container );
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
controls.handleResize();
}
function animate() {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
stats.update();
}
</script>

If you add this code under the scene.add(event.content); statement, all the objects in your scene will turn red.
scene.traverse (function (object)
{
if (object instanceof THREE.Mesh) {
object.material.color.setHex( 0xff0000 );
}
});