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
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
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.
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
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
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
OrbitControls source Zoom in / zoom out this.minDistance = 0; this.maxDistance = Infinity; Where to stop rotation : this.minPolarAngle = 0; // radians this.maxPolarAngle = Math.PI; // radians Don’t let to go below the ground controls.maxPolarAngle = Math.PI/2;
To fix the problem you can specify the up vector for the camera before executing the lookAt() command. // Place camera on x axis camera.position.set(30,0,0); camera.up = new THREE.Vector3(0,0,1); camera.lookAt(new THREE.Vector3(0,0,0)); Change the vector to your needs. You can even turn it upside down by specifying a negative value: (0,0,-1). It is important to set … Read more
Based on my very limited understanding of what you’re trying to implement, it seems you would need to take the location of the intersection between the eye vector and the interior plane it hits, then trace it back to the light. To trace back to the light, you would first have to check if the … Read more
Both your spheres are transparent, and are remaining so. What is happening is that the smaller sphere is not being rendered at all. Transparency in WebGL is tricky. You can google the issue to find out more about it. But you have stumbled upon an issue related to how three.js in particular handles transparency. The … Read more