We Keep Coding

boundingSphere is null - TextGeometry, ThreeJS

I'm new at ThreeJS and trying to learn so I have basically create a text which is rendered 3D and I'm using TextGeometry and I need that object's size like width/height to always center the object.
I'm trying like this;
var objToCenter = scene.getObjectById(textGeoID);
var hey = objToCenter.geometry.boundingSphere.center.x;
console.log(hey);
First, I find the object and then assign boundingSphere.center.x value to new variable.
But I get "boundingSphere is null" error.
When I try to console.log objectToCenter, object is there and also boundingSphere is NOT null but when I try objectToCenter.boundingSphere it says null.
And interestingly when I go console and write these lines it works perfectly.
My full Code: (somehow fontloader not load the font from source url but it works in localhost,so pls try code in localhost or you can't see the text here)
// Scene, Camera, Renderer, GUI
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 } );
var gui = new dat.GUI({name: 'Control Panel'});
// Renderer and Camera Settings
renderer.setSize( window.innerWidth, window.innerHeight-4 );
renderer.shadowMap.enabled = false;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild( renderer.domElement );
camera.position.set( 10, 10, 500 );
// Axiss Helper and Orbit Controls
var axesHelper = new THREE.AxesHelper( 500 );
scene.add( axesHelper );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
// Variables for TextGeometry
var textData = {
text: "Yunus Emre Uzun",
size: 40,
height: 5,
curveSegments: 12,
font: "helvetiker",
weight: "regular",
bevelEnabled: false,
bevelThickness: 1,
bevelSize: 0.5,
bevelOffset: 0.0,
bevelSegments: 3
};
var textGeoID = null;
function generateTextGeometry() {
if (textGeoID!=null) {
console.log('ID: ' + textGeoID);
var object = scene.getObjectById(textGeoID);
//console.log('Object:');
//console.log(object);
object.geometry.dispose();
scene.remove(object);
}
var loader = new THREE.FontLoader();
loader.load( 'https://clofro.com/cdn/fonts/helvetiker_regular.typeface.json', function ( font ) {
var textGeometry = new THREE.TextGeometry( textData.text, {
font: font,
size: textData.size,
height: textData.height,
curveSegments: textData.curveSegments,
bevelEnabled: textData.bevelEnabled,
bevelThickness: textData.bevelThickness,
bevelSize: textData.bevelSize,
bevelOffset: textData.bevelOffset,
bevelSegments: textData.bevelSegments
} );
var textMaterial = new THREE.MeshBasicMaterial( { color: 0x444444, wireframe: true } );
var meshedObject = new THREE.Mesh( textGeometry, textMaterial );
meshedObject.position.set(-212, -15, 20 /* 15 */);
scene.add(meshedObject);
textGeoID = meshedObject.id;
centerTheText();
} );
}
function centerTheText() {
var objToCenter = scene.getObjectById(textGeoID);
console.log('Object bellow is objToCenter and its id is: ' + objToCenter.id);
console.log(objToCenter);
console.log('Error bellow is for: objToCenter.geometry.boundingSphere.center.x');
var hey = objToCenter.geometry.boundingSphere.center.x;
console.log(hey);
}
generateTextGeometry();
gui.add(textData, 'text').onChange(generateTextGeometry);
gui.add(textData, 'size', 5, 100).onChange(generateTextGeometry);
// Add Point Light
var pointLight = new THREE.PointLight(0xffffff, 0.3); pointLight.position.set(50, 0, 150);
pointLight.castShadow = true;
pointLight.shadow.mapSize.width = 2048;
pointLight.shadow.mapSize.height = 2048;
scene.add(pointLight);
// Random colors
//pointLight.color.setHSL(Math.random(), 1, 0.5);
// Add Ambiant Light - halogen ambient light
var ambientLight = new THREE.AmbientLight(0xFFF1E0, 0.4);
scene.add(ambientLight);
var width = 450;
var height = 60;
var intensity = 0.8;
var rectLight = new THREE.RectAreaLight( 0xff0000, intensity, width, height );
rectLight.position.set( 0, 0, 14 );
rectLight.rotation.y = 6.28;
rectLight.lookAt( 0,0,0 );
scene.add( rectLight )
gui.add(rectLight, 'intensity', 0,5);
rectLightHelper = new THREE.RectAreaLightHelper( rectLight );
rectLight.add( rectLightHelper );
// Create BackBox Shape
var backBoxGeo = new THREE.BoxGeometry(500, 75, 10);
// Create BackBox Material, color, texture
var backBoxMat = new THREE.MeshStandardMaterial( { color: 0xdaf1f9, wireframe: false, flatShading: false } );
var backBox = new THREE.Mesh( backBoxGeo, backBoxMat );
backBox.receiveShadow = true;
scene.add(backBox);
backBox.position.set(0, 0, 0);
// Resize Renderer Function
window.addEventListener('resize', function() {
renderer.setSize( window.innerWidth, window.innerHeight-4 );
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});
// Update scene
var update = function() {
controls.update();
};
// Draw scene
var render = function() {
renderer.render( scene, camera );
};
// Frame loop (update, render, repeat)
var frameLoop = function() {
requestAnimationFrame( frameLoop );
update();
render();
}
frameLoop();
* {
margin: 0;
padding: 0;
}
body { background-color: #000; }
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>threeJS</title>
</head>
<body>
<script src="https://clofro.com/cdn/three.js"></script>
<script src="https://clofro.com/cdn/dat.gui.min.js"></script>
<script src="https://clofro.com/cdn/OrbitControls.js"></script>
</body>
</html>
My explanations with SS;
Screenshot 1:
Screenshot 2:
Why it could be happening? or can I use something else to center my text.
(set position not a fix because 0,0,0 is different for box objects and texts)

When you create an instance of TextGeometry, the respective bounding sphere is not available yet. However, it is automatically computed by the renderer for view frustum culling.
So if you have to access the bounding sphere of the geometry right after its creation, call objToCenter.geometry.computeBoundingSphere();.
Live Demo: https://jsfiddle.net/zcn2tpqy/
three.js R107

I know this is too old to answer, but I just want to share my solution here.
First, I just added this code:
geometry.computeBoundingSphere()
Then, access the boundingSphere like so:
geometry.boundingSphere
Overall code
geometry.computeBoundingSphere()
console.log(geometry.boundingSphere.radius)

Getting SSAO shader working with SkinnedMesh

I've been attempting to get the SSAO post-processing shader to work with the latest (r77) version of three.js. I've been using the EffectComposer, with the code entirely duplicated from the example page here:
http://threejs.org/examples/webgl_postprocessing_ssao.html
The relevant code being:
var renderPass = new THREE.RenderPass( Engine.scene, Engine.camera );
ssaoPass = new THREE.ShaderPass( THREE.SSAOShader );
ssaoPass.renderToScreen = true;
// ...various ShaderPass setup parameters
Engine.effectComposer = new THREE.EffectComposer( Engine.renderer );
Engine.effectComposer.addPass(renderPass);
Engine.effectComposer.addPass(ssaoPass);
The issue I have been having is that that SSAO doesn't seem to work with SkinnedMeshes. It seems to take into account the position of the meshes before the skinning calculations are performed.
It looks like this:
Problem with SSAO on SkinnedMesh
Does anyone have any experience with this on the latest version? I've looked all over the place, but can't find any documentation about how to start fixing this at all.
I found mention of a fix for this in another SO post (ThreeJS SSAO Shader w/ Skinned/Animated Models), but the solution has been deprecated.
Thanks in advance, and happy to go into more detail if needed.
As requested, here is the complete code for the simple demo page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/libs/jquery.min.js"></script>
<script type="text/javascript" src="js/libs/three.min.js"></script>
<script type="text/javascript" src="js/libs/postprocessing/CopyShader.js"></script>
<script type="text/javascript" src="js/libs/postprocessing/EffectComposer.js"></script>
<script type="text/javascript" src="js/libs/postprocessing/MaskPass.js"></script>
<script type="text/javascript" src="js/libs/postprocessing/RenderPass.js"></script>
<script type="text/javascript" src="js/libs/postprocessing/ShaderPass.js"></script>
<script type="text/javascript" src="js/libs/postprocessing/DotScreenShader.js"></script>
<script type="text/javascript" src="js/libs/postprocessing/SSAOShader.js"></script>
<link rel="stylesheet" type="text/css" href="demo.css" />
</head>
<body>
<div id="demo-container"></div>
</body>
</html>
<script>
$(document).ready(function() {
window.doPostPro = 0;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1000);
camera.position.set(0, 200, 200);
camera.lookAt(new THREE.Vector3(0, 0, 0));
clock = new THREE.Clock();
// Setup the renderer.
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xFFFFFF );
function setupPostProcessing() {
// Setup render pass
var renderPass = new THREE.RenderPass( scene, camera );
// Setup depth pass
depthMaterial = new THREE.MeshDepthMaterial();
depthMaterial.depthPacking = THREE.RGBADepthPacking;
depthMaterial.blending = THREE.NoBlending;
depthRenderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, {
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
stencilBuffer: true
});
// Setup SSAO pass
ssaoPass = new THREE.ShaderPass( THREE.SSAOShader );
ssaoPass.renderToScreen = true;
//ssaoPass.uniforms[ "tDiffuse" ].value will be set by ShaderPass
ssaoPass.uniforms[ "tDepth" ].value = depthRenderTarget.texture;
ssaoPass.uniforms[ 'size' ].value.set( window.innerWidth, window.innerHeight );
ssaoPass.uniforms[ 'cameraNear' ].value = camera.near;
ssaoPass.uniforms[ 'cameraFar' ].value = camera.far;
//ssaoPass.uniforms[ 'onlyAO' ].value = ( postprocessing.renderMode == 1 );
ssaoPass.uniforms[ 'aoClamp' ].value = 0.3;
ssaoPass.uniforms[ 'lumInfluence' ].value = 0.5;
// Add pass to effect composer
effectComposer = new THREE.EffectComposer( renderer );
effectComposer.addPass( renderPass );
effectComposer.addPass( ssaoPass );
};
setupPostProcessing();
// Load the mesh.
var loader = new THREE.JSONLoader();
loader.load( "js/zombie.js", function( geometry, materials ) {
var originalMaterial = materials[ 0 ];
originalMaterial.skinning = true;
geometry.computeVertexNormals();
var mesh = new THREE.SkinnedMesh(geometry, originalMaterial);
window.animMixer = new THREE.AnimationMixer(mesh);
var animAction = animMixer.clipAction(geometry.animations[0]);
animAction.play();
scene.add(mesh);
});
var ambientLight = new THREE.AmbientLight( 0xCCCCCC );
scene.add( ambientLight );
$("#demo-container").append( renderer.domElement );
function render() {
if ( doPostPro ) {
// Render depth into depthRenderTarget
scene.overrideMaterial = depthMaterial;
renderer.render( scene, camera, depthRenderTarget, true );
// Render renderPass and SSAO shaderPass
scene.overrideMaterial = null;
effectComposer.render();
}
else {
renderer.render( scene, camera );
}
}
function animate() {
requestAnimationFrame( animate );
if ( window.animMixer != undefined ) {
var deltaTime = clock.getDelta();
animMixer.update(deltaTime);
}
render();
}
animate();
$(document).keyup(function(e) {
// P is pressed.
if ( e.which == 80 ) {
window.doPostPro = !window.doPostPro;
}
});
});
</script>

If you are skinning, and using this pattern in your render loop
// Render depth into depthRenderTarget
scene.overrideMaterial = depthMaterial;
renderer.render( scene, camera, depthRenderTarget, true );
you have to make sure to set
depthMaterial.skinning = true;
Thing is, if there are other elements in the scene that are not skinned, doing so will throw errors. In which case, this may be a three.js design issue that will have to be addressed.
three.js r.77

Copy/pasted JsonLoader from Threejs.org not working

So I am trying to get a JSONLoader to work from threejs.org
Three.js is working for sure because I have no problem creating a cube. But when I try to load a js file throuh JSONLoader then nothing happens.
<html>
<head>
<title>My first Three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer( { alpha: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// instantiate a loader
var loader = new THREE.JSONLoader();
// load a resource
loader.load(
// resource URL
'logo.js',
// Function when resource is loaded
function ( geometry, materials ) {
var material = new THREE.MultiMaterial( materials );
var object = new THREE.Mesh( geometry, material );
scene.add( object );
}
);
camera.position.z = 5;
var render = function () {
renderer.setClearColor( 0x000000, 0 );
requestAnimationFrame( render );
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>
As mentioned in the title then the code is copy pasted from threejs own website and should be working.
Can someone help me figure what is going wrong?
here is a fiddle with the script of logo.js https://jsfiddle.net/380z6096/
the object has been exported from 3ds max with the 3ds Max JSExporter
I am using xampp and chrome.

Your camera is inside your geometry.
You can determine the dimensions of your geometry like so
geometry.computeBoundingSphere();
console.log( geometry.boundingSphere );
or
geometry.computeBoundingBox();
console.log( geometry.boundingBox );
Scale your geometry
object.scale.multiplyScalar( 0.01 );
Or move your camera back.
three.js r.75

Cannot initialize dat.GUI in Three.js

When i run my code, i get the following error in this line:
var gui = new dat.GUI();
error: Unable to get the 'getItem' property null reference or undefined.
I imported the library, i don't know what is wrong, here is my code:
<html>
<head>
<title>Stack Overflow</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<div id="container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/three.min.js"></script>
<script src="js/optimer_regular.typeface.js"></script>
<script src="js/TrackballControls.js"></script>
<script src="js/stats.min.js"></script>
<script src="js/threex.dynamictexture.js"></script>
<script src="js/dat.gui.min.js"></script>
<script>
//Basic Three components
var scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000 );
//position camera
camera.position.z = 700;
//Set camera controls
var 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 ];
//Set the renderer
var renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//Set the lights
var light;
scene.add( new THREE.AmbientLight( 0x404040 ) );
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 1 );
scene.add( light );
//Let's add a cute cube
var object;
var map = THREE.ImageUtils.loadTexture( 'images/UV_Grid_Sm.jpg' );
map.wrapS = map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 16;
var material = new THREE.MeshLambertMaterial( { ambient: 0xbbbbbb, map: map, side: THREE.DoubleSide } );
object = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 ), material );
object.position.set( 400, 20, 50 );
scene.add( object );
//Let's add a GUI
var API = {
'show model' : true,
'show skeleton' : false
};
var gui = new dat.GUI();
function animate() {
requestAnimationFrame( animate );
render();
}
//Render scene
function render() {
controls.update();
renderer.render( scene, camera );
}
animate();
</script>
</body>
</html>

Solution: Don't use Internet Explorer, i run the same code in Firefox and it works.

Follow this steps
First Close your existing project and open a new folder.
then go to this folder location in terminal by {cd [path]}
Run this commands:
1.https://github.com/designcourse/threejs-webpack-starter.git
2.npm install
3.npm run dev
4.npm run build
after no.3 execution you may face some warnings try to ignore or if you see some fatal issues then run
npm audit fix
not solved yet ....run..
npm audit fix --force [couple of time if need]
after running no.3 if you browser opens then all is fine.
you can dat.gui is installed in your folder just use it customize as you want.
you will find all the required files in your newly created folder.

Multi-platform (Chrome, IE, Firefox)

I don't undestand why this script doesn't work in IE, while it works in Firefox and Chrome. When I try to use this script in IE, I get this message "ACTIVEX stop script".
Please help me.
<!DOCTYPE html>
<html>
<head>
<title>Getting Started with Three.js</title>
<script type="text/javascript" src="http://www.html5canvastutorials.com/libraries/Three.js"></script>
<script type="text/javascript">
window.onload = function() {
var renderer = new THREE.WebGLRenderer();
renderer.setSize( 800, 600 );
document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
35, // Field of view
800 / 600, // Aspect ratio
0.1, // Near plane
10000 // Far plane
);
camera.position.set( 15, 10, 10 );
camera.lookAt( scene.position );
scene.add( camera );
var cube = new THREE.Mesh(
new THREE.CubeGeometry( 5, 5, 5 ),
new THREE.MeshLambertMaterial( { color: 0xFF0000 } )
);
scene.add( cube );
var light = new THREE.PointLight( 0xFFFF00 );
light.position.set( 10, 0, 10 );
scene.add( light );
renderer.render( scene, camera );
};
</script>
</head>
<body></body>

The Three.js WebGLRenderer doesn't work in IE (no WebGL support)
try
var renderer = new THREE.CanvasRenderer()
instead

As an alternative to the very simple solution above you can utilize alteredq and mrdoob's great Detector.js script that is included with the examples for three.js. If you use code like below you can use the WebGLRenderer as default and use canvas only if WebGL is not available. You can also use a flag like webglEnabled in order to set other options depending on your renderer later in your code.
var webglEnabled = false;
var webglReq = false;
if (Detector.webgl) {
renderer = new THREE.WebGLRenderer(
{
antialias: true,
preserveDrawingBuffer: true
}); // allow screenshot
webglEnabled = true; // set flag
}
else if (webglReq) { Detector.addGetWebGLMessage(); return false; }
else {
renderer = new THREE.CanvasRenderer();
}
renderer.setClearColorHex(0x000000, 1);
renderer.setSize(window.innerWidth, window.innerHeight);