Three.js Procedural Texture Disappears After Inital Rendering Frame - javascript

I'm working with three.js and attempting to create procedural texture which can be stored and then applied to objects later in a session.
Ideally, I would like to create these textures only once each.
I would like to be able to sample from existing assets to create new textures.
Within the three.js example, a version of this is shown where the texture is re-rendered every frame. http://threejs.org/examples/webgl_rtt.html
I have created an example of what I hope to achieve here: http://www.forsako.com/ThreeJS/RenderTest.html
Unfortunately, to make this work, I had to re-render the texture each frame.
Is there a way to perform this rendering so that the texture persists over multiple frames until I tell it to be released? Source from my main program follows.
<html>
<head>
<title>Render Test</title>
</head>
<style>
#mycontainer {
background: #000;
width: 800px;
height: 600px;
}
</style>
<body>
<div id="mycontainer"></div>
</body>
<script src="js/three.min.js"></script>
<script src="js/TrackballControls.js"></script>
<script src="js/stats.min.js"></script>
<script src="js/PlaneGeomUV.js"></script>
<script type="text/javascript">
var Renderer, Container, Scene, Camera, Quad1, Quad2, Plane, MaterialRTT, TextureRTT, LightAmb;
var SceneRTT, CameraRTT, Q1RTT, Q2RTT, Q3RTT, Q4RTT, MaterialFromFile, TextureFromFile;
var isRenderingTex = true;
var WidthWin = 800;
var HeightWin = 640;
var WidthTile = 428;
var HeightTile = 683;
Init();
Animate();
function Init(){
var CAngle = 45;
var CAspect = WidthWin / HeightWin;
var CNearCut = 0.1;
var CFarCut = 10000;
// Set up the main rendering object and attach it to an element on the page
Renderer = new THREE.WebGLRenderer();
Renderer.setSize( WidthWin, HeightWin );
Container = document.getElementById( "mycontainer" );
Container.appendChild( Renderer.domElement );
// Set up the textures and materials for rendering
TextureFromFile = THREE.ImageUtils.loadTexture( "Assets/Map_Tiles.png" );
TextureRTT = MakeTex( Renderer, TextureFromFile, WidthTile, HeightTile );
MaterialFromFile = new THREE.MeshBasicMaterial( { color: 0xffffff, map: TextureFromFile } );
MaterialRTT = new THREE.MeshBasicMaterial( { color: 0xffffff, map: TextureRTT } );
MaterialFromFile.side = THREE.DoubleSide;
MaterialRTT.side = THREE.DoubleSide;
// Set up the main renderable scene
Scene = new THREE.Scene();
Plane = new THREE.PlaneGeometry( WidthTile, HeightTile );
Quad1 = new THREE.Mesh( Plane, MaterialFromFile );
Quad1.position.x = WidthTile*0.5;
Scene.add( Quad1 );
Quad2 = new THREE.Mesh( Plane, MaterialRTT );
Quad2.position.x = -WidthTile*0.5;
Scene.add( Quad2 );
LightAmb = new THREE.AmbientLight( 0xffffff );
Scene.add( LightAmb );
Camera = new THREE.PerspectiveCamera( CAngle, CAspect, CNearCut, CFarCut );
Camera.position.z = 1200;
Scene.add( Camera );
// Create controls using the TrackballControls library to easily manipulate our camera
Controls = new THREE.TrackballControls( Camera );
Controls.target = new THREE.Vector3( 0, 0, 0 );
Controls.rotateSpeed = 4.0;
Controls.zoomSpeed = 6.0;
Controls.panSpeed = 1.0;
Controls.noZoom = false;
Controls.noPan = false;
Controls.staticMoving = true;
Controls.dynamicDampingFactor = 0.3;
Controls.keys = [ 65, 83, 68 ];
// Add the Three.js stats object so we can track fps
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
Container.appendChild( stats.domElement );
}
function MakeTex( Renderer_in, Texture_in, Width_in, Height_in ){
var ParamsTex = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
var Tex_out = new THREE.WebGLRenderTarget( WidthWin, HeightWin, ParamsTex );
var tMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff, map: Texture_in } );
// Set up the scene for rendering to texture
SceneRTT = new THREE.Scene();
var tPlane = new THREE.PlaneGeometry( WidthTile*0.5, HeightTile*0.5 );
Q1RTT = new THREE.Mesh( tPlane, tMaterial );
Q1RTT.position.x = WidthTile*0.25;
Q1RTT.position.y = HeightTile*0.25;
SceneRTT.add( Q1RTT );
Q2RTT = new THREE.Mesh( tPlane, tMaterial );
Q2RTT.position.x = -WidthTile*0.25;
Q2RTT.position.y = HeightTile*0.25;
SceneRTT.add( Q2RTT );
Q3RTT = new THREE.Mesh( tPlane, tMaterial );
Q3RTT.position.x = -WidthTile*0.25;
Q3RTT.position.y = -HeightTile*0.25;
SceneRTT.add( Q3RTT );
Q4RTT = new THREE.Mesh( tPlane, tMaterial );
Q4RTT.position.x = WidthTile*0.25;
Q4RTT.position.y = -HeightTile*0.25;
SceneRTT.add( Q4RTT );
tLightAmb = new THREE.AmbientLight( 0xffffff );
SceneRTT.add( tLightAmb );
CameraRTT = new THREE.OrthographicCamera( -Width_in / 2, Width_in / 2, Height_in / 2, -Height_in / 2, 0.1, 10000 );
CameraRTT.position.z = 600;
SceneRTT.add( CameraRTT );
//Renderer.clear();
//Renderer.render( SceneRTT, CameraRTT, Tex_out, true );
return Tex_out;
}
function Animate(){
requestAnimationFrame( Animate );
Controls.update();
stats.update();
Render();
}
function Render(){
Renderer.clear();
if( isRenderingTex ){
Renderer.render( SceneRTT, CameraRTT, TextureRTT, true );
//isRenderingTex = false;
}
Renderer.render( Scene, Camera );
}
</script>
</html>

Related

Create a plane mesh with pointcloud in three.js

I've created pointcloud with all points in an exact plane. I want the pointcloud to be highlighted and shown as a rectangle shape when the mouse is rolled over. For that, I think the pointcloud has to be converted in to a mesh, first.
I've googled for hours and tried to read thee.js documentation too. But couldn't find any solution. Could you please help me convert this pointcloud to a mesh. Thank you very much
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
var camera, scene, renderer, controls;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 45.0, window.innerWidth / window.innerHeight, 5, 3500 );
camera.position.z = 2500;
controls = new THREE.TrackballControls( camera, renderer.domElement );
createScene();
}
function createScene() {
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x000000 );
var geometry = new THREE.BufferGeometry();
var positions = [];
for ( var i = 0; i < 500; i ++ ) {
for ( var j = 0; j < 300; j ++ ) {
var y = j;
var x = i;
var z = 0;
positions.push( x, y, z );
}
}
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
var material = new THREE.PointsMaterial( {color: 0xFFFFFF} );
points = new THREE.Points( geometry, material );
scene.add( points );
}
function animate( time ) {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
}
</script>
Here is a quick and dirty modification of your sample, basically it creates a thin box with the same dimensions than your pointcloud and toggle its visibility when the mouse is getting over (using a raycaster). As far as I know there is no direct/built-in way to turn a pointcloud into a plane/mesh.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Three.js - wall construction</title>
<meta charset="utf-8">
<script src="js/three.js"></script>
<script src="js/TrackballControls.js"></script>
</head>
<body style="margin:0;">
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
var camera, scene, renderer, controls, box, boxMaterial;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 45.0, window.innerWidth / window.innerHeight, 5, 3500 );
camera.position.z = 2500;
controls = new THREE.TrackballControls( camera, renderer.domElement );
createScene();
renderer.domElement.addEventListener('mousemove', onMouseMove, false);
}
function createScene() {
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x000000 );
var geometry = new THREE.BufferGeometry();
var positions = [];
for ( var i = -250; i < 250; ++i) {
for ( var j = -150; j < 150; ++j) {
positions.push(i, j, 0);
}
}
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
var material = new THREE.PointsMaterial({color: 0xFFFFFF});
points = new THREE.Points(geometry, material);
scene.add(points);
//create box based on pointcloud extends
var geometry = new THREE.BoxGeometry(500, 300, 1 );
boxMaterial = new THREE.MeshBasicMaterial({color: 0x0000FF});
boxMaterial.visible = false //set invisible by default
box = new THREE.Mesh(geometry, boxMaterial);
scene.add(box);
}
function onMouseMove (e) {
var pointer = {
x: (e.clientX / window.innerWidth ) * 2 - 1,
y: - ( e.clientY / window.innerHeight ) * 2 + 1
}
var raycaster = new THREE.Raycaster()
raycaster.setFromCamera(pointer, camera)
var intersects = raycaster.intersectObjects([box])
boxMaterial.visible = !!intersects.length
}
function animate(time) {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
</script>
</body>
</html>

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.

TypeError: array[i].call is not a function Error

My code is :
$(function() {
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setClearColor(0xdddddd);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMapSoft = true;
var axis = new THREE.AxisHelper(10);
scene.add(axis);
var grid = new THREE.GridHelper(50, 5);
var color = new THREE.Color("rgb(255,0,0)");
grid.setColors(color, 0x000000);
scene.add(grid);
var Ground_geometry = new THREE.BoxGeometry( 20, 0.1, 20 );
var Ground_material = new THREE.MeshPhongMaterial( {
color: 0xa0adaf,
shininess: 150,
specular: 0xffffff,
shading: THREE.SmoothShading
} );
var ground = new THREE.Mesh( Ground_geometry, Ground_material );
ground.scale.multiplyScalar( 3 );
ground.castShadow = false;
ground.receiveShadow = true;
scene.add( ground );
var ambient = new THREE.AmbientLight( 0x404040 );
scene.add( ambient );
spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 10, 10, 15 );
spotLight.castShadow = true;
spotLight.shadowCameraNear = 8;
spotLight.shadowCameraFar = 30;
spotLight.shadowDarkness = 0.5;
spotLight.shadowCameraVisible = false;
spotLight.shadowMapWidth = 1024;
spotLight.shadowMapHeight = 1024;
spotLight.name = 'Spot Light';
scene.add( spotLight );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', renderer );
var cubeGeometry = new THREE.BoxGeometry(5, 5, 5);
var cubeMaterial = new THREE.MeshPhongMaterial({
color: 0x456574 ,
shininess: 150,
specular: 0x222222,
shading: THREE.SmoothShading,
});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = 0;
cube.position.y = 0;
cube.position.z = 0;
scene.add(cube);
camera.position.x = 40;
camera.position.y = 40;
camera.position.z = 40;
camera.lookAt(scene.position);
renderer.render(scene, camera);
$("#webGL-container").append(renderer.domElement);
$(window).resize(function(){
SCREEN_WIDTH = window.innerWidth;
SCREEN_HEIGHT = window.innerHeight;
camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
camera.updateProjectionMatrix();
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
});
});
I am getting an error that says : TypeError: array[i].call is not a function
and is pointing to line 7484 of three.js library.
I have included the three.js library using:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.js"></script>
So as you can see, its the v73 and I haven't touched the code. What could be the problem?
The error only comes after screen is clicked and then mouse pointer is dragged, so it must have got to do with that piece of code.
Assuming that you want the scene to render when OrbitControls sends a change event, you'll have to change the code to:
controls.addEventListener( 'change', render );
.
.
.
function render() {
renderer.render( scene, camera );
}
renderer.render( scene, camera );

How can I load multiple textures/materials to a model using Three.js?

I'm using some sample code and I just added my model using the JSONLoader. I can load objects with just one texture and they paint just right. But after I import an object, in this case a house with different textures/materials (grass, roof, windows, etc), but my model just appears in plain gray.
This is my example up and running:
http://trakalas.com/test/sandbox.php
This is the model (.3ds) in Blender before exporting it as .js:
Image of model in Blender with textures
And here's the main code I'm using:
<script>
// MAIN
// standard global variables
var container, scene, camera, renderer, controls, stats;
var keyboard = new THREEx.KeyboardState();
var clock = new THREE.Clock();
// custom global variables
var cube;
init();
animate();
// FUNCTIONS
function init()
{
// SCENE
scene = new THREE.Scene();
// CAMERA
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
scene.add(camera);
camera.position.set(0,550,50);
camera.lookAt(scene.position);
// RENDERER
if ( Detector.webgl )
renderer = new THREE.WebGLRenderer( {antialias:true} );
else
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container = document.getElementById( 'ThreeJS' );
container.appendChild( renderer.domElement );
// EVENTS
THREEx.WindowResize(renderer, camera);
THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) });
// CONTROLS
controls = new THREE.OrbitControls( camera, renderer.domElement );
// STATS
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.bottom = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
// LIGHT
var light = new THREE.PointLight(0xffffff);
light.position.set(0,250,50);
scene.add(light);
// FLOOR
var floorTexture = new THREE.ImageUtils.loadTexture( 'images/checkerboard.jpg' );
floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat.set( 10, 10 );
var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side: THREE.DoubleSide } );
var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
var floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.position.y = -0.5;
floor.rotation.x = Math.PI / 2;
scene.add(floor);
// SKYBOX/FOG
var skyBoxGeometry = new THREE.CubeGeometry( 10000, 10000, 10000 );
var skyBoxMaterial = new THREE.MeshBasicMaterial( { color: 0x9999ff, side: THREE.BackSide } );
var skyBox = new THREE.Mesh( skyBoxGeometry, skyBoxMaterial );
// scene.add(skyBox);
scene.fog = new THREE.FogExp2( 0x9999ff, 0.00025 );
//////////////
// THE REST //
//////////////
addSomething(-120,100,1);
}
function addSomething(posx,posy,posz) {
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load("models/residential_001.js",
function (geometry) {
addObject(geometry,posx,posy,posz)
});
}
function addObject(geometry,posx,posy,posz) {
var materialArray = [];
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'models/Asphalt .bmp' ) }));
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'models/Brick Ru.bmp' ) }));
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'models/Brick Wh.bmp' ) }));
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'models/Grass Gr.bmp' ) }));
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'models/Lead.bmp' ) }));
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'models/Poured c.bmp' ) }));
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'models/Roof 4.bmp' ) }));
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'models/Wood Gra.bmp' ) }));
var houseMaterials = new THREE.MeshLambertMaterial(materialArray);
house = new THREE.Mesh(geometry, houseMaterials);
house.position.set(posx, posy, posz);
house.scale.set(100, 100, 100);
scene.add(house);
}
function animate()
{
requestAnimationFrame( animate );
render();
update();
}
function update()
{
if ( keyboard.pressed("z") )
{
// do something
}
controls.update();
stats.update();
}
function render()
{
renderer.render( scene, camera );
}
</script>
What's the right way to load mats/textures to an object like mine?
Thanks so much.
You are importing only the geometry from the JSON model file, why not importing both geometry and materials?
loader = new THREE.JSONLoader();
loader.load( "models/residential_001.js", function( geometry, materials ) {
house = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
house.position.set( -120, 100, 1 );
house.scale.set( 1, 1, 1 );
scene.add( house );
} );

TrackballControls wrong object rotation on left side

I use three.js TrackballControls for rotating object.
Here is simple application - http://zheden.elitno.net/
I cannot rotate object horizontally when mouse position is on left side of scene. Vertical rotation is ok.
Could you please tell me what is wrong?
Here is my code:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
var controls;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(500, 500);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshLambertMaterial(
{
overdraw: true,
color: 0x00aa80,
shading: THREE.FlatShading
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
var directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.x = 1;
directionalLight.position.y = 1;
directionalLight.position.z = 1;
directionalLight.position.normalize();
scene.add( directionalLight );
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( -1, -1, -1 );
scene.add( light );
var light1 = new THREE.AmbientLight( 0x222222 );
scene.add( light1 );
camera.position.z = 3;
controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
controls.keys = [ 65, 83, 68 ];
controls.addEventListener( 'change', render );
function render() {
renderer.render(scene, camera);
}
function animate() {
requestAnimationFrame(animate);
controls.update();
render();
};
animate();
Thanks!

Categories