Hello all,
I'm really enjoying this library so far, and I think it's the perfect one for my project, and I'm surprised it's not as big as it should be.
I was trying the traffic light example where hover would light up the light and clicking would throw an alert event.
It took me awhile to get rid of the divs, and display the objects normally(couldn't get the sphere to, but could get a cube to).
When looking at the cube, the color itself is red, and when hovering, it turns black, when in reality hover is set to red, so it's the opposite.
When I take my mouse off it still is black, and just sits there. Clicking does work, but that's it.
Here's my code.
<title>Voodoo Sample - Mouse Events</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.js"></script>
<script src="js/voodoo.min.debug.js"></script>
<style type="text/css">
#content {
position:absolute;
left:0px;
top:300px;
width:100%;
}
#redLight {
width:150px;
height:150px;
}
#yellowLight {
width:150px;
height:150px;
}
#greenLight {
width:150px;
height:150px;
}
</style>
Mouse Events
Description
This sample demonstrates how to respond to create triggers that
respond to mouse events. Move your mouse and click the objects below.
<script>
// ----------------------------------------------------------------------------
// HoverBallView
// ----------------------------------------------------------------------------
var TrafficLightView = voodoo.View.extend({
load: function() {
// Create a sphere
var geometry = new THREE.BoxGeometry(100,100,100);
var material = new THREE.MeshPhongMaterial();
var torus = new THREE.Mesh(geometry, material);
torus.position.set(500, 500, 0);
torus.rotation.y = Math.PI / 2;
// Add the torus to the scene. this.scene is a property provided by View.
this.scene.add(torus);
this.material = material;
this.torus = torus;
// The torus will move at 200px per second.
this.speed = 200;
this.triggers.add(torus);
// Show a pointer cursor whenever the mouse is over our mesh.
this.triggers.cursor('pointer');
},
unload: function() {
// TODO: Remove all objects you added earlier to the THREE.js scene.
this.scene.remove(this.torus);
this.triggers.remove(this.mesh);
},
setColor: function(color, ambient,hover) {
this.material.color.copy(
voodoo.utility.convertCssColorToThreeJsColor(color));
this.material.ambient.copy(
voodoo.utility.convertCssColorToThreeJsColor(ambient));
this.material.hover.copy(
voodoo.utility.convertCssColorToThreeJsColor(hover));
},
// We call this from the model whenever the user hovers over this object.
mouseover: function() {
this.material.color.copy(this.model.hover);
this.dirty();
},
// We call this from the model whenever the user's mouse leaves the object.
mouseout: function() {
this.material.color.copy(this.model.color);
this.dirty();
}
});
// ----------------------------------------------------------------------------
// HoverBall
// ----------------------------------------------------------------------------
var TrafficLight = voodoo.Model.extend({
name: 'TrafficLight',
viewType: TrafficLightView,
initialize: function(options) {
this.element = options.element;
this.ambient = options.ambient;
this.color = options.color;
this.hover = options.hover;
// Add event handlers for hovers. The 'view' is normally not accessable in
// initialize, but we are just defining callbacks, so it is OK to
// reference them.
this.on('mouseover', function(event) { this.view.mouseover(); });
this.on('mouseout', function(event) { this.view.mouseout(); });
},
setUpViews: function() {
// TODO: Perform any initialization of the views.
this.view.setColor(this.color, this.ambient, this.hover);
}
});
// ----------------------------------------------------------------------------
// Setup
// ----------------------------------------------------------------------------
var redLight = new TrafficLight({
ambient: 'rgb(100, 30, 30)',
color: 'black',
hover: 'darkred'
});
// We can also call our event handlers from outside our models.
redLight.on('click', function() { alert('Stop!'); });
yellowLight.on('click', function() { alert('Caution...'); });
greenLight.on('click', function() { alert('Go!'); });
</script>
It also seems that the lights with the div are dark red, yellow and green, and the hover makes it regular, while for some reason my cube is black (which is correct according to the value above), but doesn't seem to be utilizing the ambient color, which I noticed is an issue in my other example (still need to work on that one so I think that will one), but this one seems to just be broken, but it might be my fault too.
Thanks :).
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent