This is a demo of THREE.AugmentedConsole.js, a small library to help work with three.js.
It augments console.log: if what you log is of a known type, its contents are also shown as a table, a color as a swatch, a texture as its picture, and a material as a picture of a sphere that has it.
How to use: open the console and type, or click, any of these. What the library adds to the console is copied at the bottom right, to see it without opening it.
console.log( camera.position )
console.log( cube.matrixWorld )
console.log( cube.rotation )
console.log( cube.quaternion )
console.log( cube.material.color )
console.log( 'box', new THREE.Box3().setFromObject( cube ) )
console.log( raycaster.ray )
console.log( new THREE.Spherical().setFromVector3( camera.position ) )
console.log( new THREE.Frustum().setFromProjectionMatrix( camera.projectionMatrix ) )
console.log( raycaster )
console.log( new THREE.CatmullRomCurve3( [ new THREE.Vector3( - 1, 0, 0 ), new THREE.Vector3( 0, 1, 0 ), new THREE.Vector3( 1, 0, 0 ) ] ) )
console.log( raycaster.intersectObjects( scene.children ) )
console.log( [ camera.position, cube.position, light.position ] )
console.log( [ new THREE.Color( 0xed6a5a ), new THREE.Color( 0xf4f1bb ), new THREE.Color( 0x9bc1bc ), new THREE.Color( 0x5ca4a9 ) ] )
console.log( cube )
console.log( camera )
console.log( light )
console.log( scene )
console.log( scene.fog )
console.log( cube.geometry )
console.log( cube.geometry.attributes.position )
console.log( cube.material.map )
console.log( renderer )
console.log( target )
console.log( clip )
console.log( cube.material )
cube.material.shininess = 10 + Math.random() * 100; console.log( cube.material )
cube.material.color.setRGB( .5 + .5 * Math.random(), .5 + .5 * Math.random(), .5 + .5 * Math.random() ); console.log( cube.material )
var s = Math.random(); cube.material.normalScale.set( s, s ); console.log( cube.material )
console.log( new THREE.MeshNormalMaterial() )
console.log( new THREE.MeshStandardMaterial( { color: 0xffb400, metalness: 1, roughness: .25 } ) )
console.log( { time: { value: 1.5 }, tint: { value: new THREE.Color( 0xfe5f55 ) }, offset: { value: new THREE.Vector2( .5, .25 ) }, map: { value: cube.material.map } } )
THREE, scene, camera, cube, light, raycaster, renderer, target and clip are there for you in the console.