three.js

Three.js png texture – alpha renders as white instead as transparent

by

the opacity attribute of material does the trick for you. Follows, example code snippet: var materialArray = []; materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( ‘images/xpos.png’ ), transparent: true, opacity: 0.5, color: 0xFF0000 })); materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( ‘images/xneg.png’ ), transparent: true, opacity: 0.5, color: 0xFF0000 })); materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( ‘images/ypos.png’ ), transparent: true, … Read more

Three.js and loading a cross-domain image

by

Update In newer versions of THREE.js cross origin images are handled by default. THREE.ImageUtils.loadTexture is deprecated. It’s common to use TextureLoader const loader = new THREE.TextureLoader(); const mapOverlay = loader.load(‘http://i.imgur.com/3tU4Vig.jpg’); Original Answer This works THREE.ImageUtils.crossOrigin = ”; var mapOverlay = THREE.ImageUtils.loadTexture(‘http://i.imgur.com/3tU4Vig.jpg’); Here’s a sample var canvas = document.getElementById(“c”); var renderer = new THREE.WebGLRenderer({canvas: canvas}); var … Read more

Why does the spotlight in my three.js scene remain centered in the camera perspective, but only on Chrome for Android?

by

I see the problem on my Moto G 1st gen (Qualcomm Snapdragon 400) but not on my Project Tango tablet (nVidia Tegra K1), so it is likely that this is either a GPU driver bug or an unsupported feature on certain hardware. I was able to write a simple repeatable test case and use it … Read more

How to connect Threejs to React?

by

Here is an example of how to set this up (see demo): import React, { Component } from ‘react’ import * as THREE from ‘three’ class Scene extends Component { constructor(props) { super(props) this.start = this.start.bind(this) this.stop = this.stop.bind(this) this.animate = this.animate.bind(this) } componentDidMount() { const width = this.mount.clientWidth const height = this.mount.clientHeight const scene … Read more

Three.js detect webgl support and fallback to regular canvas

by

Yes, it’s possible. You can use CanvasRenderer instead of WebGLRenderer. About WebGL detection: 1) Read this WebGL wiki article: http://www.khronos.org/webgl/wiki/FAQ if (!window.WebGLRenderingContext) { // the browser doesn’t even know what WebGL is window.location = “http://get.webgl.org”; } else { var canvas = document.getElementById(“myCanvas”); var context = canvas.getContext(“webgl”); if (!context) { // browser supports WebGL but initialization … Read more

Three.js: How can I make a 2D SnapShot of a Scene as a JPG Image?

by

There are a couple of things you will have to do to save the frame as a jpg image. Firstly initialize the WebGL context like this renderer = new THREE.WebGLRenderer({ preserveDrawingBuffer: true }); preserveDrawingBuffer flag will help you to get the base64 encoding of the current frame The code for that will be something like … Read more

techhipbettruvabetnorabahisbahis forumu