three.js

Three.js How do you get a Plane from a vector and a constant?

由 安稳与你 提交于 2019-12-22 00:22:18
问题 In three.js, the constructor for the Math Plane takes 2 inputs: normal -- (Vector3) normal vector defining the plane pointing towards the origin constant -- (Float) the negative distance from the origin to the plane along the normal vector Can someone provide an illustration or explain how this works? I can understand given a point and normal how to construct a plane, or 3 co-planar points, but can't figure out how a normal vector and constant can be used. 回答1: TL:DR? Mathy-ness and linear

Extrude 3d shape from THREE.Line object in three.js

由 非 Y 不嫁゛ 提交于 2019-12-22 00:11:27
问题 In three.js I have created an ellipseCurve for which I want to extrude and make 3d. CODE USE TO MAKE THIS: var curve = new THREE.EllipseCurve( 0, 0, // ax, aY 10, 13.3, // xRadius, yRadius 0, 2 * Math.PI, // aStartAngle, aEndAngle false, // aClockwise 0 // aRotation ); var path = new THREE.Path( curve.getPoints( 100 ) ); var geometrycirc = path.createPointsGeometry( 50 ); var materialcirc = new THREE.LineBasicMaterial( { color : 0xff0000 } ); // Create the final object to add to the scene var

Three.js raycaster intersection empty when objects not part of scene

由 安稳与你 提交于 2019-12-22 00:08:54
问题 I've tried improving rendering time on my project by creating meshes and putting them as part of a larger geometry, and having just that single geometry as the object I add to the scene. I thought that I would still be able to manage picking of objects by having an array of the original meshes, and pass those to the raycaster. I used the following code: var vector = new THREE.Vector3( ( loc_x / window.innerWidth ) * 2 - 1, - ( loc_y / window.innerHeight ) * 2 + 1, 0.5 ); projector

Accurate Mouse Picking on Skinned mesh (bones)

由 回眸只為那壹抹淺笑 提交于 2019-12-21 22:34:11
问题 We are using Skinned meshes (with bones to deform it), and are looking to implement face accurate mouse picking for the faces on the SkinnedMesh. ( so we can pick a face and get it's coordinates ) . The mesh skin deformation is done on the GPU - which presents an issue reading transformed vertices back out - and for accurate mouse picking. has anyone got any pointers to implement this functionality ? or is there a solution for this somewhere ( I have been looking for a while ) ? We are using

Serve three.js?

由 孤人 提交于 2019-12-21 22:12:12
问题 I'm trying to serve the example found here over a [Node] http server with socket.io. The example runs just fine. The code below... var app = require('http').createServer(handler) , io = require('socket.io').listen(app) , fs = require('fs') app.listen(8086); function handler (req, res) { fs.readFile(__dirname + '/spinnycube.html', function (err, data) { if (err) { res.writeHead(500); return res.end('Error loading spinnycube.html'); } res.writeHead(200); res.end(data); }); } io.sockets.on(

How can I create a 3D cubic-bezier curved triangle from 3D points in Three.js?

由 跟風遠走 提交于 2019-12-21 21:54:10
问题 Following this topic, I am trying to generate a 3D curved triangle as a NURBS surface, but I don't understand how to set up my 3D points to do that. Here is the current implementation : var edges = this.getEdges(), // An edge is a line following 4 dots as a bezier curve. dots = self.getDotsFromEdges(edges), // Get all dots in order for building the surface. ctrlPoints = [ // Is generated only once before, but copy-pasted here for this sample code. [ new THREE.Vector4(0, 0, 0, 1), new THREE

Threejs Custom Shader - Screen Tearing

由 让人想犯罪 __ 提交于 2019-12-21 21:25:33
问题 So to implement a tilemap using Threejs and Brandon Jone's tilemap method (found here) I am using a THREE.Plane geometry for each layer, and painting the face with the following custom shaders: Vertex Shader: var tilemapVS = [ "varying vec2 pixelCoord;", "varying vec2 texCoord;", "uniform vec2 mapSize;", "uniform vec2 inverseTileTextureSize;", "uniform float inverseTileSize;", "void main(void) {", " pixelCoord = (uv * mapSize);", " texCoord = pixelCoord * inverseTileTextureSize *

Issue in loading the .obj using three.js

由 ￣綄美尐妖づ 提交于 2019-12-21 20:22:15
问题 I am trying to load .obj file using three.js, but unfortunately it's say the error that "Failed to load resource: the server responded with a status of 404 (Not Found)" Below is the example link I am using view-source:http://mrdoob.github.io/three.js/examples/webgl_loader_obj.html CODE is as follows <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - loaders - OBJ loader</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum

three.js rotate camera in plane

由 倖福魔咒の 提交于 2019-12-21 20:01:31
问题 I have a camera in my app: camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.z = 1; camera.position.y = -5; camera.rotateOnAxis(new THREE.Vector3(1, 0, 0), degInRad(90)); camera.up = new THREE.Vector3(0, 0, 1); Those code in render function must rotate the camera while I'm pressing the keys: if (leftPressed) { camera.rotateOnAxis((new THREE.Vector3(0, 1, 0)).normalize(), degInRad(1)); } else if (rightPressed) { camera.rotateOnAxis(

Loading multiple objects in Three.js from Blender

由 女生的网名这么多〃 提交于 2019-12-21 18:30:44
问题 I have a quite complex shape (dressed girl) that in Blender is broken down into different objects and it's loaded into Three.js with the JSON loader (with a little hack I made, that uses zipped files instead of just JSON files, as there are a lot of vertices). As I want to change dynamically the style of the dress from a Web page, I was wondering how I can show/hide different pieces (e.g. sleeves) in the scene. I tried traversing the THREE.Mesh , but there are no children. When I export from
订阅 three.js