You could just change the camera rather than the entire coordinate system. For example: var WIDTH = 1024; var HEIGHT = 768; var VIEW_ANGLE = 45; var ASPECT = WIDTH / HEIGHT; var NEAR = 0.1; var FAR = 10000; camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); camera.position.z = 300; camera.up = new THREE.Vector3( 0, … Read more
In modern browsers you can use a conjunction of the MediaRecorder API and the HTMLCanvasElement.captureStream method. The MediaRecorder API will be able to encode a MediaStream in a video or audio media file on the fly, resulting in far less memory needed than when you grab still images. const ctx = canvas.getContext(‘2d’); var x = … Read more
Object3D has some handy methods for that. object.translateZ( 10 );
You’re using Link from react-router-dom 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’) )
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
To explain Darius’ answer more clearly (as I struggled with it, while trying to update a version of Mr Doob’s procedural city to work with the Face3 boxes): Essentially you are merging all of your Meshes into a single Geometry. So, if you, for instance, want to merge a box and sphere: var box = … Read more
The dragging will be a bit more tricky because you need to work out where would the x/y positions of the mouse on the screen (screen space) will be in the 3D world, then you will need to cast a ray and check if it intersects the object you want to drag. I presume this … Read more
I’ve written for my project the following function; it receives an THREE.Object3D instance and a camera as a parameters and returns the position on the screen. function toScreenPosition(obj, camera) { var vector = new THREE.Vector3(); var widthHalf = 0.5*renderer.context.canvas.width; var heightHalf = 0.5*renderer.context.canvas.height; obj.updateMatrixWorld(); vector.setFromMatrixPosition(obj.matrixWorld); vector.project(camera); vector.x = ( vector.x * widthHalf ) + widthHalf; … 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
var vector = new THREE.Vector3( 1, 0, 0 ); var axis = new THREE.Vector3( 0, 1, 0 ); var angle = Math.PI / 2; vector.applyAxisAngle( axis, angle );