Skip to Content

Debugging Three.js

|Three.js|Debugging in WordPress for more information. (This message was added in version 3.6.0.) in /var/www/benchung.com/public_html/wp-includes/functions.php on line 4041

Warning: mysqli_real_connect(): (HY000/2002): Connection refused in /var/www/benchung.com/public_html/wp-includes/wp-db.php on line 1534

Warning: mysqli_num_fields() expects parameter 1 to be mysqli_result, boolean given in /var/www/benchung.com/public_html/wp-includes/wp-db.php on line 3083
http://benchung.com/debugging-three-js/#respond" rel="bookmark" title="Comments for Debugging Three.js">0 Comments

If you’re in the stages of creating a webGL game or app using three.js you may find it useful to visualize what your code is doing. That’s where the need for a debugger/inspector comes into…

Continue Reading »

Unity3D vs. Three.js

|Three.js|Debugging in WordPress for more information. (This message was added in version 3.6.0.) in /var/www/benchung.com/public_html/wp-includes/functions.php on line 4041
http://benchung.com/unity3d-vs-three-js/#respond" rel="bookmark" title="Comments for Unity3D vs. Three.js">0 Comments

Why is this important knowledge? You may be looking into both options as whether you’re planning to build online games, a plugin for your website, etc. Unity3D and three.js are certainly both great options that…

Vertex Colors in Three.js

|Shaders|Debugging in WordPress for more information. (This message was added in version 3.6.0.) in /var/www/benchung.com/public_html/wp-includes/functions.php on line 4041
http://benchung.com/vertex-colors-three-js/#respond" rel="bookmark" title="Comments for Vertex Colors in Three.js">0 Comments

Vertex colors in three.js can be easily achieved using the built in geometry.vertices.push function and the THREE.VertexColors attribute when setting up a custom GLSL shader: First, draw the geometry:

Trackball Controls in three.js

|Three.js|Debugging in WordPress for more information. (This message was added in version 3.6.0.) in /var/www/benchung.com/public_html/wp-includes/functions.php on line 4041

Warning: mysqli_real_connect(): (HY000/2002): Connection refused in /var/www/benchung.com/public_html/wp-includes/wp-db.php on line 1534

Warning: mysqli_num_fields() expects parameter 1 to be mysqli_result, boolean given in /var/www/benchung.com/public_html/wp-includes/wp-db.php on line 3083
http://benchung.com/trackball-controls-three-js/#respond" rel="bookmark" title="Comments for Trackball Controls in three.js">0 Comments

This tutorial explains how to rotate the camera with the mouse in three.js. This can be accomplished using the built-in TrackballControls.js. Test it out on the below. Rotating the object around by holding down the…

Loading Screen in Three.js

|Three.js|Debugging in WordPress for more information. (This message was added in version 3.6.0.) in /var/www/benchung.com/public_html/wp-includes/functions.php on line 4041

Warning: mysqli_real_connect(): (HY000/2002): Connection refused in /var/www/benchung.com/public_html/wp-includes/wp-db.php on line 1534

Warning: mysqli_num_fields() expects parameter 1 to be mysqli_result, boolean given in /var/www/benchung.com/public_html/wp-includes/wp-db.php on line 3083
http://benchung.com/loading-animation-three-js/#respond" rel="bookmark" title="Comments for Loading Screen in Three.js">0 Comments

For this tutorial, we’ll be creating a Loading Screen in Three.js using the html5 Heartcode Canvasloader for our loading icon and the three.js LoadingManager to tell it when to appear. If you’re new to Three.js…

Continue Reading »

Basic GLSL Displacement Shader in Three.js

|Shaders|Debugging in WordPress for more information. (This message was added in version 3.6.0.) in /var/www/benchung.com/public_html/wp-includes/functions.php on line 4041
http://benchung.com/basic-glsl-displacement-shader-three-js/#respond" rel="bookmark" title="Comments for Basic GLSL Displacement Shader in Three.js">0 Comments

This tutorial introduces construction a basic GLSL Displacement Shader in Three.js. It can really apply to any GLSL program, but we’ll take advantage of the three.js ability of using custom shaders. If you’re very new…

Using the Three.js Editor

|Three.js|Debugging in WordPress for more information. (This message was added in version 3.6.0.) in /var/www/benchung.com/public_html/wp-includes/functions.php on line 4041

Warning: mysqli_real_connect(): (HY000/2002): Connection refused in /var/www/benchung.com/public_html/wp-includes/wp-db.php on line 1534

Warning: mysqli_num_fields() expects parameter 1 to be mysqli_result, boolean given in /var/www/benchung.com/public_html/wp-includes/wp-db.php on line 3083
http://benchung.com/using-three-js-editor/#respond" rel="bookmark" title="Comments for Using the Three.js Editor">0 Comments

Warning: mysqli_real_connect(): (HY000/2002): Connection refused in /var/www/benchung.com/public_html/wp-includes/wp-db.php on line 1534

Warning: mysqli_num_fields() expects parameter 1 to be mysqli_result, boolean given in /var/www/benchung.com/public_html/wp-includes/wp-db.php on line 3083

Here are some basics about using the the three.js editor. If you haven’t seen it in action, you can do so here. I couldn’t find any real documentation online about it so figured I’d post…

Continue Reading »

Smooth Mouse Rotation in Three.js

|Three.js|Debugging in WordPress for more information. (This message was added in version 3.6.0.) in /var/www/benchung.com/public_html/wp-includes/functions.php on line 4041

Warning: mysqli_real_connect(): (HY000/2002): Connection refused in /var/www/benchung.com/public_html/wp-includes/wp-db.php on line 1534

Warning: mysqli_num_fields() expects parameter 1 to be mysqli_result, boolean given in /var/www/benchung.com/public_html/wp-includes/wp-db.php on line 3083
http://benchung.com/smooth-mouse-rotation-three-js/#respond" rel="bookmark" title="Comments for Smooth Mouse Rotation in Three.js">0 Comments

This example demonstrates Smooth axis rotation via mouse in three.js. Click and drag around in the above. It is based off of this post and this example on the three.js website. Achieving a momentum effect…

Rotate View With the Mouse in Three.js

|Three.js|Debugging in WordPress for more information. (This message was added in version 3.6.0.) in /var/www/benchung.com/public_html/wp-includes/functions.php on line 4041
http://benchung.com/rotate-view-mouse-three-js/#respond" rel="bookmark" title="Comments for Rotate View With the Mouse in Three.js">0 Comments

This example uses “OrbitControls” in three.js to rotate the camera around an object. It’s based off of the example: http://threejs.org/examples/#misc_controls_orbit on the three.js website. We’ve just added a textured cube that’s been imported from Blender….

Antialiasing in Three.js

|Three.js|Debugging in WordPress for more information. (This message was added in version 3.6.0.) in /var/www/benchung.com/public_html/wp-includes/functions.php on line 4041
http://benchung.com/antialiasing-three-js/#respond" rel="bookmark" title="Comments for Antialiasing in Three.js">0 Comments

One of the hurdles of 3D is aliasing (jagged edges when rendering). Depending on your hardware and browser, three.js has a built in function to help with this (top left: without antialiasing, top right: with…