How to flip a Three.js texture horizontally
To flip a texture horizontally, you can do the following: texture.wrapS = THREE.RepeatWrapping; texture.repeat.x = – 1; three.js r.147
three.js
Threejs: assign different colors to each vertex in a geometry
It has to be geometry.vertexColors instead of geometry.colors (push a colour per vertex). And the material: material = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors });
Three.js add an object to a group but keep global position/rotation/scale as it was
EDIT: You can use the built-in method Object3D.attach(): // add object as a child of parent, while maintaining the object’s world transform parent.attach( object ); three.js r.109
How to render clipped surfaces as solid objects
You want to render a clipped surface as if it were a solid — i.e., not hollow. You can achieve that effect with MeshPhongMaterial — or any three.js material for that matter — with a simple hack to the material shader. material.onBeforeCompile = function( shader ) { shader.fragmentShader = shader.fragmentShader.replace( ‘#include <output_fragment>’, ` vec3 backfaceColor … Read more
Determine if a mesh is visible on the viewport according to current camera
This is the code you’re after: var frustum = new THREE.Frustum(); var cameraViewProjectionMatrix = new THREE.Matrix4(); // every time the camera or objects change position (or every frame) camera.updateMatrixWorld(); // make sure the camera matrix is updated camera.matrixWorldInverse.getInverse( camera.matrixWorld ); cameraViewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse ); frustum.setFromMatrix( cameraViewProjectionMatrix ); // frustum is now ready to check all … Read more
Three.js: What Is The Exact Difference Between Lambert and Phong?
Shane, it’s not your fault that you’re confused. Lambert is an illumination model (with a physical basis) for the light reflected off a surface, expressed in terms of the incoming illumination’s direction with respect to the surface normal at the point of incidence. Phong is a more nuanced shading model (albeit a more hacky one) … Read more
Detect clicked object in THREE.js
Depends on what kind of camera are you using. 1) PerspectiveCamera: is ok link that Mr.doob provides. 2) OrthographicCamera: is quite different: var init = function() { camera = new THREE.OrthographicCamera( SCREEN_WIDTH / – 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / – 2, NEAR, FAR); document.addEventListener( ‘mousedown’, onDocumentMouseDown, false ); } function onDocumentMouseDown( … Read more
Antialiasing not working in Three.js
The property name you are using in the argument object of the WebGLRenderer constructor is incorrect. According to the documentation, the name of the property should be ‘antialias’, not ‘antialiasing’. I tested it in Google Chrome for Mac OS and there was a noticeable smoothing in the rendering of edges in a demo featuring a … Read more
How to connect Threejs to React?
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
How to create a custom mesh on THREE.JS?
You’ve added vertices, but forgot to put those vertices into a face and add that to the geometry: geom.faces.push( new THREE.Face3( 0, 1, 2 ) ); so your snippet becomes: var geom = new THREE.Geometry(); var v1 = new THREE.Vector3(0,0,0); var v2 = new THREE.Vector3(0,500,0); var v3 = new THREE.Vector3(0,500,500); geom.vertices.push(v1); geom.vertices.push(v2); geom.vertices.push(v3); geom.faces.push( new … Read more