three.js

问题 I'm trying to to use raycasting to get the intersection between a sphere and a ray, both located at the center of the scene. It's a pretty simple scenario but I'm not being able to make it work. Relevant code: // renderer, camera, etc... var material = new THREE.MeshStandardMaterial(); material.opacity = 0.25; material.transparent = true; sphere = new THREE.Mesh(new THREE.SphereGeometry(100, 32, 32), material); scene.add(sphere); var start = new THREE.Vector3(0, 0, 0); var direction = new

问题 I have been working on this idea, and I found out that someone has already accomplished a similar idea that I have been working on. I'm looking to see if anyone can lead me in the right direct for what I am missing to create a similiar effect of the wave motion on the plane like this one : http://samsy.ninja/ Problem: I can get the shape, but I am having trouble changing the vertices to create a wave like effect similar to http://samsy.ninja/. I am trying to create the same effect, but I can

问题 This image is using perspective camera but sphere shape is distorted when it is moving away from the center. this image is using Orthographic camera but spheres and cuboid are not in 3D... can any one suggest possible solution for this to get 3D effect without sphere distorting its shape... 回答1: This is exactly correct. Spheres distortion and cuboid perspective effect are both caused by the same perspective projection properties. One possible solution would be to split your scene in two parts

问题 The interaction between pointlight and a plane seems to have changed from r.67 to r.68 I'm trying to learn three.js, going through a book that is a year old. I've stripped down the tutorial example to just a plane, a cube, and a pointlight and The "Shinyness" effect of the light on the plane goes away when i use r.68, which is the point of the light effect tutorial. I'm guessing it must have something to do with the material reflectivity of planes now? I didn't get any clues going through

问题 I'm trying to draw 2D objects in z=0 plane, now I want to convert screen mouse co-ordinates into 3D world co-ordinates. I used camera below: camera = new THREE.OrthographicCamera(SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, NEAR, FAR ); camera.position.set(0,0,500); camera.lookAt(scene.position); container = document.getElementById( 'ThreeJS' ); container.appendChild( renderer.domElement ); var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10); var

问题 I have a Three.js scene containing various objects and some text. It is viewed by a single camera, camera_A whose output goes to a viewport_A in one part of my browser webpage. Now I want a second camera (camera_B) to view the same scene and pass its output to a second viewport (viewport_B) on another part of the same webpage. Camera_B is the same as Camera_A in every respect except that the image it produces (in the second viewport_B) should be a mirror image of the image in (viewport_A). I

问题 I am trying to display images on each face of the polyhedron using three.js r71. I am making the geometry by loading a JSON file which holds the data that defines the shape. I set a plane below the polyhedron as well. I get an error and I'm wondering what this means or what I am doing wrong. Here is the error message I get in the JavaScript console: [.WebGLRenderingContext-0888D200]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1 WebGL:

问题 I've been trying to make this example work for me. I'm almost there. My problem is that I'm not using a full screen canvas. I'm using a smaller div that might be placed differently depending on resolution. What I have working is getting the coordinates of the mouse click inside this div, and clicking objects are working as well. But Everything is a little bit offset and the clickable area is bigger than the object itself. So my question is how I can make this more accurate. This code http:/

问题 Been working on a system to load document-specific scripts asynchronously into a Meteor template after it's been rendered: Template.postPage.onRendered(function(){ var post = Template.currentData(); if(post.libs) post.libs.forEach(function(e){ console.log(e); $.getScript(e, function(data, text, code){ console.log(text); }).done(threejs); function threejs(){ var scene = new THREE.Scene(); }; }); }); This pattern works with Chartist, Chart.js, and d3 but doesn't seem to be working with three.js

问题 Found a lot of physic engines out there but nothing that fit my needs directly. I try to to find a simple way to push and pull boxes including collision detection which respects the next neighboring mesh hit while moving. Some use cases to understand: All boxes except box 1 are moveable. Push or Pull box 4 to west: Should move box 3 to west on collision. Should make box 3 and 4 not able to move west when box 3 hits box 2. Push 2, 3 or 4 to north: Should stop when it hits box 2, because box 1