Three.js Rotate Texture

use 2D canvas as a texture demo: 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

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. 🙂 Update with only two render passes (credit to WestLangley): The pieces missing were these: composer.renderTarget1.stencilBuffer = true composer.renderTarget2.stencilBuffer = true outline.clear = false

three.js – Adjusting opacity of individual particles

EDIT – This answer shows how to set per-point opacity using a custom ShaderMaterial. See for an approach using PointsMaterial. ParticleSystem has been renamed to PointCloud and then to Points. Yes, you can create a Point Cloud and vary the alpha value of each particle’s color dynamically. In three.js, you can do this by … Read more

artifacts when rendering both sides of a transparent object with three.js

Self-transparency is particularly difficult in WebGL and three.js. You just have to really understand the issues, and then adapt your code to achieve the effect you want. You can achieve the look of a double-sided, transparent sphere in three.js, with a trick: You need to render two transparent spheres — one with material.side = THREE.BackSide, … Read more

Display wireframe and solid color

To render both a model and its wireframe, you can use a pattern like this one: // mesh var material = new THREE.MeshPhongMaterial( { color: 0xff0000, polygonOffset: true, polygonOffsetFactor: 1, // positive value pushes polygon further away polygonOffsetUnits: 1 } ); var mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ) // wireframe var … Read more