three.js - w3toppers.com

Apply color gradient to material on mesh – three.js

Simple gradient shader, based on uvs: var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(60, 1, 1, 1000); camera.position.set(13, 25, 38); camera.lookAt(scene.position); var renderer = new THREE.WebGLRenderer({ antialias: true }); var canvas = renderer.domElement document.body.appendChild(canvas); var controls = new THREE.OrbitControls(camera, renderer.domElement); var geometry = new THREE.CylinderBufferGeometry(2, 5, 20, 32, 1, true); var material = … Read more

How to toggle preserveDrawingBuffer in three.js?

You don’t need preserveDrawingBuffer: true to take a screenshot. What you need is to take the screenshot immediately after rendering. A screenshot is guaranteed to work as long as you take it after rendering but before exiting the current event. So for example this will always work renderer.render( scene, camera ); var screenshot = renderer.domElement.toDataURL(); … Read more

Why do shaders have to be in html file for webgl program?

You don’t have to use <script> tags at all to load a shader program. Most tutorials and examples just use them as a container to store a string in the DOM of the webpage. The script type “x-shader/x-fragment” is meaningless for web browsers, so they don’t execute the script. They do, however, store the content … Read more

How to implement a ShaderToy shader in three.js?

I am not sure if you have answered your question, but it might be good for others to know the integration steps for shadertoys to THREEJS. First, you need to know that shadertoys is a fragment shaders. That being said, you have to set a “general purpose” vertex shader that should work with all shadertoys … Read more

Switch threejs controls ( from TrackBall to FlyControls and vice versa)

What about something like this? function onClick() { var prevCamera = camera; camera = new THREE.PerspectiveCamera(…); camera.position.copy( prevCamera.position ); camera.rotation.copy( prevCamera.rotation ); var MODE = { TRACKBALL: 0, FLY: 1 }; switch( mode ) { case MODE.FLY: controls = new THREE.TrackballControls( camera ); mode = MODE.TRACKBALL; break; case MODE.TRACKBALL: controls = new THREE.FlyControls( camera ); … Read more

Three.js multiple materials on object loaded via OBJMTLLoader

You have a couple of choices: You can mix the images on the javascript side using canvas tools, and create a single material with a single texture map. You can achieve a multi-texture effect with a custom ShaderMaterial. Have two texture inputs, and implement color mixing in the shader. Here an example of just about … Read more

Three.js Rotate Texture

use 2D canvas as a texture demo: https://dl.dropboxusercontent.com/u/1236764/temp/stackoverflow_20130525/index.html example code var camera, scene, renderer, mesh; var width = window.innerWidth; var height = window.innerHeight; scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera( 30, width / height, 1, 1000 ); camera.position.z = 100; renderer = new THREE.WebGLRenderer(); renderer.setSize( width, height ); document.body.appendChild( renderer.domElement ); var img = … Read more

Texture splatting with Three.js

Challenge accepted! First, you can write a vertex shader that takes a grayscale image and uses it as a heightmap, and includes a varying float (called vAmount below) to pass to the fragment shader to determine the texture(s) to display(blend) at that point. uniform sampler2D bumpTexture; uniform float bumpScale; varying float vAmount; varying vec2 vUV; … Read more

How to use multiple materials in a Three.js cube?

You need to use THREE.MeshFaceMaterial for the mesh. Here’s example code: var materials = []; for (var i=0; i<6; i++) { var img = new Image(); img.src = i + ‘.png’; var tex = new THREE.Texture(img); img.tex = tex; img.onload = function() { this.tex.needsUpdate = true; }; var mat = new THREE.MeshBasicMaterial({color: 0xffffff, map: tex}); … Read more

Outline object (normal scale + stencil mask) three.js

Here’s a js fiddle with working solution. You’re welcome. 🙂 http://jsfiddle.net/Eskel/g593q/6/ Update with only two render passes (credit to WestLangley): http://jsfiddle.net/Eskel/g593q/9/ The pieces missing were these: composer.renderTarget1.stencilBuffer = true composer.renderTarget2.stencilBuffer = true outline.clear = false