three.js

Threejs make a displaced mesh (terrain model) [closed]

梦想与她 提交于 2019-12-14 03:28:33
问题 Closed . This question is opinion-based. It is not currently accepting answers. Want to improve this question? Update the question so it can be answered with facts and citations by editing this post. Closed last year . So I have around 59k data points that I'm visualizing. Currently I'm making them into a texture, and then applying them to a plane geometry. Now the issue is that I need to show a heightmap, each datapoint has a height value, and I need to apply that to the mesh. How is the

Shadows not working in r72

心已入冬 提交于 2019-12-14 03:22:01
问题 http://jsfiddle.net/8e8mvx09/ I've looked at a few examples of how to implement shadows, but they all seem to use older versions of three.js. Using r72, I'm not able to make a simple example work. (Fiddle attached) Did I miss something silly or do they work in a different way now? Maybe something to do with perhaps? spotlight.shadowCameraNear 回答1: Add your spotlight to the scene: scene.add( spotlight ); Increase the shadow Camera far plane because your scene is huge: spotlight.shadowCameraFar

Add multiple spheres in a three.js scene

 ̄綄美尐妖づ 提交于 2019-12-14 03:14:14
问题 This is my first week dabbling in javascript and my 3d day with three.js so please bear with me, this may be possibly a dumb question. My problem is this: I have created a scene, in which I want to add small spheres -representing the joints of a skeleton from a kinect feed, coming as a json object. I have tried to create the scene, add an event listener and create the relevant geometries, but.. no go. Here is the relevant code: scene.addEventListener("skeletonEvent", function(e) { if (e

Trouble with THREE.CubeTextureLoader

不问归期 提交于 2019-12-14 02:56:53
问题 I'm trying to create 3d dice with texture maps on a cube. If I just load a single texture it displays fine (although, of course, I can't specify different images for each side). I tried using CubeTextureLoader but I get a totally garbled texture (Here's what I see). Any suggestions? // This doesn't work THREE.CubeTextureLoader().load(['/public/images/dice6-red.png', '/public/images/dice6-red.png', '/public/images/dice6-red.png', '/public/images/dice6-red.png', '/public/images/dice6-red.png',

Three.js - scale cylinder from point

落花浮王杯 提交于 2019-12-14 02:44:01
问题 Is it possible to increase the scale of a cylinder on the Y-axis from a specific point. As instead of the cylinder growing from its origin up and down to the new scale, growing from the top upwards/downwards only like a bar chart. Current code : function animate() { render(); cylinder.scale.y += 0.1; requestAnimationFrame(animate); } 回答1: You can create a intermediary Object3D to achieve this: var cylinder = new THREE.Object3D(); scene.add( cylinder ); var cylinderMesh = new THREE.Mesh

How can I match the rotation of one Object3D to another (different parents, different coords)?

大城市里の小女人 提交于 2019-12-14 02:27:07
问题 I want to match the rotation of a reference object in three.js. The object3d I want to rotate and the reference object might have different parents in different local transforms, but I want them to align rotation-wise in the global space. function matchRotationOfReference(myObj3D, referenceObj3D) { // what do I do here? } I know how to do this for position vectors like so: var pos = new THREE.Vector3(); function matchPositionOfReference(myObj3D, referenceObj3D) { referenceObj3D

Three.js rendering and bootstrap grids

不想你离开。 提交于 2019-12-14 01:04:37
问题 I am playing around with three.js and bootstrap. But, when using the bootstrap grids, my cube gets flattened like this: http://imgur.com/a/Ec2Rx Though when resizing the window, it works fine: http://imgur.com/a/xpmVu I have tried to fix this in css, but it didn't work: CSS @media(min-width:768px) { canvas { display: block; width: 100% !important; height: 33% !important; } } canvas { display: block; width: 100% !important; height: 100% !important; } Any ideas? EDIT: I also tried to work with

Three.js lookat seems to be flipped

人走茶凉 提交于 2019-12-14 00:32:45
问题 I have a demo of what I mean here: Test Site or (Backup) For some reason, even though the mouse vector is correct my object is rotated by 90 degrees always in favor of the positive Y axis. The only call that this could be going wrong, as far as I can tell, in is the call: ship.mesh.lookAt(mouse); , I call this every time the screen is animated. Can anyone tell me what to do to fix this and why it is doing it? 回答1: object.lookAt( position ) orients the object so that the object's local

Get euler rotation from Quaternion?

∥☆過路亽.° 提交于 2019-12-14 00:16:43
问题 I'm using FlyControls for moving and rotation my plane (I'm doing a flight sim), and it works pretty well. However now I have ran into a problem where one possible solution would be to know the euler angles of my plane. Unfortunately FlyControls is using Quaternion. Is there a possible way to get the angles somehow? Of course, I could rewrite the FlyControls module to use euler angles. But I would like to avoid that if possible. 回答1: var rotation = new THREE.Euler().setFromQuaternion(

Posting Three.js meshes to web worker using javascript

不羁岁月 提交于 2019-12-13 23:50:19
问题 I have an array on objects, meshes created with Three.js, that I want to do some operations in a web worker. So the questions is how do I post them to the worker? From what I understand there's something called transferable objects that uses something called ArrayBuffer but I can't find any info about how to convert my array of objects to that. Or is this perhaps not possible? 回答1: Unless your object is already in binary buffer format, there is not performance benefit in converting it into