three.js

问题 I am using a Three js Draggable cubes example which is this. I want to replace the internally created cubes with the obj files. Here is what I am doing. I have added the obj model(a human face) to the objects[], so I think now it is a part of all the objects and should be intersected by a ray. I am not able to drag the 3D obj model but I am able to drag the other cubes. Does the Raycaster not intersect 3d obj Model? How can I drag the obj model in this? 回答1: Try to make through this example.

问题 I have a WebGl/ThreeJS application, where I have 3 WebGL Renderers, 1 Scene and 1 Canvas for each renderer . The first 2 Canvases are ok, they work fine. The other canvas, is divided in 3 equal-dimension viewports and in each viewport I have added an orthographic camera in a different position. So I want to be able to detect mouse events on the objects that there in this Scene. I want to detect them in all of the viewports independently. All this, because I want to create a drag and drop

问题 I am using Three.js (r64) to render some models. I am using the included THREE.OBJMTLLoader. I am trying to render a chair by providing the .obj and .mtl to the loader. I also have a png of a normal map I'd like to apply to it. Below are two screen shots of what I am experiencing. Screenshot of model if no normal map is applied, notice the color is as expected but shows the lo-res quality since normal mapping isn't applied: Screenshot of model if normal mapping is applied to the "map" field

问题 i want to add wireframe for an object onClick the button, so am using traverse to do it, it is working fine in the OBJMTLLoder, if a try it with the separate function like below onclick the button it cause object is undefined function wireframe(object){ //alert('hhhhhh'); object.traverse( function ( child ) { if ( child instanceof THREE.Mesh ) { //child.geometry.computeFaceNormals(); var geometry = child.geometry; //console.log(geometry); //geometry.dynamic = true; material = child.material;

问题 I would like to know how threejs ordering multiple matrix? For instance , ...... var mesh = new THREE.Mesh( geometry, material ); mesh.position.set( 0, 20, 0 ); // T , transform matrix mesh.rotation.set( 0, Math.PI, 0 );//R , rotation matrix mesh.scale.set( 1, 1, 10 );//S , scale matrix So , how threejs to combine three matrix? It will according my set value order(In my example , it is TRS , so final matrix should T*R*S ) or fixed order (For instance, it is always using SRT ordering , the

问题 I am trying to put this image -- https://hdfreefoto.files.wordpress.com/2014/09/bright-milky-way-over-the-lake-at-night.jpg -- as a panorama background in my three.js scene. I have the following code: var sphere = new THREE.SphereGeometry(200, 200, 32); sphere.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1)); var sphereMaterial = new THREE.MeshBasicMaterial(); sphereMaterial.map = THREE.ImageUtils.loadTexture(<path to above image>); var sphereMesh = new THREE.Mesh(sphere, sphereMaterial);

问题 I have some problem freeing memory in threejs when i remove a mesh using scene.remove(mesh) the mesh is removed but seems that memory used from js is not released. I'm using webglrenderer with buffergeometry for the mesh and windows. 回答1: This can be dark side of the js memory usage. First try to setup primitive value to your objects. mesh.geometry.dispose(); mesh.geometry = null; // or undefined . //also cool delete mesh.geometry Another way (try some hack) : mesh.geometry = VerySmallmesh

问题 I have a complex model loaded with OBJLoader. I want to move and rotate its center to let the user ( the user of my application ) to place the center point where he/she wants. I'm aware of this: old question, but for me does not work. This is a test in fiddle : fiddle example Pressing the button in the example I expect that the center is moved. The code in the button is : objMesh.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(new THREE.Vector3(1, 0.1, 0.1))); 回答1: I found the

问题 Essentially, I am generating a static scene using the three.js module with node.js. Unfortunately, as the scene is being rendered without a browser, I can not use THREE.ImageUtils.loadTexture . I am given an error when using this - I understand that document does not exist as I am rendering it server side. var materials = [ new THREE.MeshLambertMaterial({map: THREE.ImageUtils.loadTexture('url here'')}), new THREE.MeshLambertMaterial({map: THREE.ImageUtils.loadTexture('url here'')}), new THREE

问题 I'm creating a 3D product configurator. First , I load the .gltf model and render it with Threejs. Then , I print a svg to a Fabricjs canvas and use that canvas to make a THREE.CanvasTexture and update the model with this canvas. The problem I allow people to upload text and images. Those images are added to the Fabric canvas as new objects. While the main svg is locked at the background, these uploaded images can be dragged and resized in the canvas. Screenshot canvas object Goal So my goal