In your case, you add the following to your callback function: objects.traverse( function( node ) { if( node.material ) { node.material.side = THREE.DoubleSide; } }); The doubleSided property of Mesh is deprecated. It was replaced with the side property of Material Also, it is best to learn from three.js examples that work with the current … Read more
You’re using Link from react-router-dom, which is calling useContext. The context it is looking for is provided by BrowserRouter, but your app is not wrapped by a BrowserRouter. Your index.js: import { BrowserRouter } from ‘react-router-dom’ render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById(‘root’) )
There are several ways of doing what you want, but I think the easiest is like so: // parent parent = new THREE.Group(); scene.add( parent ); // pivots var pivot1 = new THREE.Object3D(); var pivot2 = new THREE.Object3D(); var pivot3 = new THREE.Object3D(); pivot1.rotation.z = 0; pivot2.rotation.z = 2 * Math.PI / 3; pivot3.rotation.z = … Read more
You need to recompute the projectionMatrix: camera.fov = 20; camera.updateProjectionMatrix(); This may be prettified in the future though…
pixi.js was released just recently – it’s a 2D engine backed by WebGL for performance, but with a 2D canvas fallback for compatibility. I haven’t used it myself but it’s worth checking out.
I’ve worked a bit on separating out the part of the WebGL Globe code (linked to above) that produces the atmospheric effect. A preliminary working version is here: http://stemkoski.github.io/Three.js/Atmosphere.html To the best of my understanding, there are a few interesting things going on in the original code to create the atmospheric effect. First, the glowing … Read more
Use ShaderMaterial and set both textures as uniforms, and then blend them within shader. I made this example: http://abstract-algorithm.com/three_sh/ and that really should be enough. So, you make ShaderMaterial: var vertShader = document.getElementById(‘vertex_shh’).innerHTML; var fragShader = document.getElementById(‘fragment_shh’).innerHTML; var attributes = {}; // custom attributes var uniforms = { // custom uniforms (your textures) tOne: { … Read more
If you want some objects to render “on top”, or “in front”, one trick is to create two scenes — the first scene is your regular scene, and the second scene contains the objects that you want to have on top. First, set renderer.autoClear = false; Then create two scenes var scene = new THREE.Scene(); … Read more
You are still using the old syntax for uniforms var uniforms = { texture1: { type: “t”, value: 0, texture: THREE.ImageUtils.loadTexture(“texture.jpg”) } }; This is the new syntax var uniforms = { texture1: { type: “t”, value: THREE.ImageUtils.loadTexture( “texture.jpg” ) } };
Note that this has changed slightly in Three.js revision r50. Rendering both sides of a plane can be achieved through the side property on the Material, i.e. plane.material.side = THREE.DoubleSide; Look here for more details.