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
The issue is you’re pointing at the edges between texels. These lines geoX.push(tx / imageSize); geoY.push(1.0 – ty / imageSize); // flip y compute the exact edge between texels. What I mean by that is lets say imageSize is 4 texels and lets say tx and ty go from 0 to 3 Your texture coordinates … Read more
I am assuming that what you mean is that you want an object to rotate around a specific point within it’s geometry. For example, the cylinderGeometry rotates around it’s center. Suppose you want it to rotate around its end. What you need to do is translate the cylinder geometry right after it is created so … Read more
You can generate a callback like this. First define your callback function for each object: mesh.callback = function() { console.log( this.name ); } Then follow the standard picking pattern: var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); function onDocumentMouseDown( event ) { event.preventDefault(); mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 – … Read more
You can apply an object’s transform to the object’s geometry directly, and then reset the position, rotation, and scale like so: object.updateMatrix(); object.geometry.applyMatrix4( object.matrix ); object.position.set( 0, 0, 0 ); object.rotation.set( 0, 0, 0 ); object.scale.set( 1, 1, 1 ); object.updateMatrix(); three.js r.150
Update library to r53. Add vertexColors: THREE.FaceColors in material. And finally use face.color.setRGB( Math.random(), Math.random(), Math.random()). Now no need to traverse loop for 4 sides (a,b,c,d) for THREE.Face4 or 3 sides (a,b,c) for THREE.Face3. This works in both WebGL and Canvas rendering. Example three.js r53
EDIT: THREE.MultiMaterial has been deprecated. You can now pass the materials array directly into the constructor. Like so: dice = new THREE.Mesh( new THREE.BoxGeometry( 562, 562, 562, 1, 1, 1 ), materials ); scene.add( dice ); Be careful of copying old examples from the net. Always check the Migration Wiki for help upgrading to the … Read more
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
The short answer, set your z near plane further away Change camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight, 0.1, 3500000); to var zNear = 1000; var zFar = 3500000; camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight, zNear, zFar); Note: I don’t know if 1000 will work, if it doesn’t try 10000. A zBuffer, … Read more
Yes, in three.js you can create an object that is invisible, but still occludes other objects as if it were visible. To do that, you need to use two features available in three.js: Object3D.renderOrder and Material.colorWrite. You need to make sure the invisible object is rendered prior to the object(s) it must occlude. You control … Read more