three.js

How do I load multiple textures with the new THREE.TextureLoader

若如初见. 提交于 2020-01-01 11:46:10
问题 How do I load multiple textures with the new THREE.TextureLoader from Three.js ? At the moment I'm loading my textures like this: var texture1 = THREE.ImageUtils.loadTexture('texture1.jpg'); var texture2 = THREE.ImageUtils.loadTexture('texture2.jpg'); var texture3 = THREE.ImageUtils.loadTexture('texture3.jpg'); var texture4 = THREE.ImageUtils.loadTexture('texture4.jpg'); var texture5 = THREE.ImageUtils.loadTexture('texture5.jpg'); ... And Google chrome's developer tool give the following

Creating a cube with rounded corners in Three.js

耗尽温柔 提交于 2020-01-01 04:36:10
问题 Is it possible to create a cube with rounded corners of custom radius in three.js and then be able to texture that cube with an image? 回答1: You can round the corners of a cube using the Loop subdivision algorithm implemented in THREE.SubdivisionModifier . Here it is in action: http://threejs.org/examples/webgl_modifier_subdivision.html. You can texture this geometry just as you would texture any other geometry. three.js r.70 回答2: For a simple and straightforward example of subdivision

Threejs/ WebGL: Most performant way for just cubes?

可紊 提交于 2020-01-01 03:34:05
问题 In Threejs, what is the most performant way to display a large number of cubes on an xyz grid for the WebGL renderer, in terms of which rendering methods/ lights/ settings/ material to use? The cubes should support receiving and casting shadows based on a directionLight -- or I can precalculate the side colors if that helps and is possible -- but they don't have any texture or special rotation. Thanks! 回答1: Be sure to merge your geometry. It helps a LOT. up to 60times more code. here is a

Three.js browser compatibility

此生再无相见时 提交于 2020-01-01 01:18:11
问题 I was reading the Three.js wikipedia page and it states "Three.js runs in all browsers supported by WebGL." If you use canvas renderer will the application/game created with Three.js run in browsers that support canvas but not webGL. Also are there any know issues with Three.js and mobile browsers. 回答1: Actually all browsers are supported which have support for canvas. We do not support polyfilled canvas. Mainly because most of the time, we use other things beside the canvas that are not

Putting three.js animation inside of div

醉酒当歌 提交于 2019-12-31 20:34:50
问题 This is three.js animation code example: <script defer="defer"> var angularSpeed = 0.2; var lastTime = 0; function animate(){ var time = (new Date()).getTime(); var timeDiff = time - lastTime; var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000; plane.rotation.z += angleChange; lastTime = time; renderer.render(scene, camera); requestAnimationFrame(function(){ animate(); }); } var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document

Three js memory management

陌路散爱 提交于 2019-12-31 13:08:12
问题 I have a large scene with a lot of Mesh and MorphAnimMesh. I want to free memory when the meshes are removed. If i know right this is the best way to do: for ( var i = scene.children.length - 1; i >= 0 ; i -- ) { var obj = scene.children[i]; scene.remove(obj); obj.deallocate(); obj.geometry.deallocate(); obj.material.deallocate(); obj.material.map.deallocate(); } if i check the memory usage at task manager after this, nothing changes. ( tried to wait a few min for GC but nothing. ) Google

Convert an animated maya model to JSON for use with three js

↘锁芯ラ 提交于 2019-12-31 10:53:30
问题 I have a maya model done in maya 2008. I need to be able to convert it a JSON format for use with three js. So far , I have tried 1) threeJsFileTranslator.py which is a maya plugin to export a model and is provided as a part of the threejs package. 2) MDD-OBJ-EXPORTER - with this , I was successfully able to import the animated model into blender but when I tried to export it to threejs , the js file didn't work. I am breaking my head over this from the past 2 weeks. So please bear with me if

Three.js - billboard effect, maintain orientation after camera pans

百般思念 提交于 2019-12-31 10:04:06
问题 I have a plane geometry that is always set to face the camera via: plane.lookAt(camera.position); in the update loop. I am using OrbitControls to control the camera. When rotating or zooming the scene, the plane continues to face the camera as expected. However, after panning the scene, while the plane continues to face the camera, rotating the camera appears to rotate the plane as well, so that for example if the plane were to contain text, the text could appear rotated or even upside down

Anaglyph or stereo views and picking

风格不统一 提交于 2019-12-31 05:23:10
问题 I tested the anaglyph effect. And my picking no more work properly. Is this normal ? If yes is there a way to have the picking working when using 3D effects ? 回答1: I said that the picking works but it is not true. By reducing the eye separation I reduced the difference between the 2 images. So I reduced the problem. As the mouse pointer is not rendered in green and red it is not possible to pick with it. 来源: https://stackoverflow.com/questions/26676450/anaglyph-or-stereo-views-and-picking

Three.js calculate object distance required to fill screen

社会主义新天地 提交于 2019-12-31 05:22:17
问题 I've seen lots of questions on how to zoom the camera so an object fills the screen, but I'm trying to move the object to fill the screen. I've been trying something like this using the original photos pixel size, and these objects have been scaled: var dist = object.originalSize.height > $(window).height() || object.originalSize.width > $(window).width() ? ( $(window).height() / object.originalSize.height ) * 100 : 10; var pLocal = new THREE.Vector3( 0, 0, -dist); var target = pLocal