three.js

问题 I'm working on a WebGL game using Three.js & I've decided to switch to a THREE.BufferGeometry implementation from my (working) regular THREE.Geometry solution. I'm messing something up, because the mesh does not draw. I've given the relevant parts of my code below. If I switch to a regular geometry, everything works fine. It's a voxel based game and I've pre-created each face of each cube as a regular THREE.Geometry . The positionVertices function takes the vertices and faces from each face

问题 I'm rewriting this question since I understand more about the bug now. It looks like when using the JSONLoader in r74, the first named bone in an exported Maya scene gets a duplicate of all the geometry. EDIT: Here's a JSFiddle In this example I have 2 boxes. Each box is bound to a single bone, and each of those bones has keyframes that animate the position and rotation. There is another bone that has no geometry bound to it, and has keyframes that make no change to its position or rotation.

问题 I'm writing an export script (ruby) in SketchUp, and I'm having trouble applying the same transformation in Three.js side, so that objects have the same rotation in Three.js as they appear in SketchUp. I can read the rotation using the SketchUp Transformation class: http://www.sketchup.com/intl/en/developer/docs/ourdoc/transformation.php I can get these kind of values from a rotated component that I pass to my Three.js code. All are Vectors in the form of X, Y, Z xaxis: 0.0157771536190692,-0

问题 I'm using a circle texture to render particles: The circle has transparent pixels. I'm using ShaderMaterial and BufferGeometry to provide custom size, color for each node. However I'm stuck with proper z-index rendering. In the image below: The white particle is the nearest to the camera, the cyan ( 0x00ffff ) is the second, and hibiscus color on the top right ( 0xC3206F looks pinkish) is the farthest. As you can see the order is not correct. Ideally white circle should fully override cyan,

问题 I'm using three.js to make some solar system, all my objects are sphere (suns and planets), but I found this really weird and ghosty square shadow: Another ghost shadow seems to be that, the shadow that sphere A casts on sphere B, appears on both the front and back side of sphere B, like this: I am so confused since I don't really remember create any square stuff and I've checked my code for like million times without any finding. Finally, I dismissed all the lights in the world, and set the

问题 I googled far and wide but I haven't found the solution to what I think to actually be a pretty common situation. Say I have a THREE.PerspectiveCamera initialized to look at a certain point in space: var camera = new THREE.PerspectiveCamera(45, 2, 0.1, 100); var target = new THREE.Vector3(1, 2, 3); camera.lookAt(target); Now, later on in the code I'd like to be able to find out the coordinates of target by simply querying camera . I tried what suggested in this question, adapting it to my own

问题 I'm trying to customize a mesh and then export it by using gltfExporter from Threejs, however it still exports with all morph/shape keys attached, I would like to remove them in the final export mesh. Cloning the scene / mesh didn't work. function exportModel() { var exporter = new THREE.GLTFExporter(); if (!gltfExportEnabled) gltfExporterConfig.binary = false; var finalRenderModel = mainScene.children[2]; // Remove Morph Targets if (!!removeExportMorphs) { // finalRenderModel.children[0]

问题 So I am using DeviceOrientationControls from THREE.js to rotate the object around in VR, similar to how google cardboards app does in the exhibit experience. I have partially succeeded in doing this by replacing "camera" in THREE.DeviceOrientationControls(camera) with "scene". However, the scene also contains edges around the cube with the help EdgesHelper. var edges = new THREE.EdgesHelper(mesh, 0x000000); What happens is the Edges are seperate from the rest of the object, so when I use it

问题 I load a glb model in Three.js generated in SketchUp. The file can be found here https://www.graviditetsberegner.dk/bpnew.skp The model contains a group called text with a mesh. I want to display a texture containing text here. I use the below code: var modelLoader = new THREE.GLTFLoader(); modelLoader.load("https://www.graviditetsberegner.dk/bpnew.glb", function (gltf) { model = gltf.scene.clone(); model.scale.set(50,50,50) scene.add(model); //Use canvas to draw texture and add it to the

问题 I'm trying to load a model I got from 3DWarehouse into three.js. I was unable to get the Collada Loader to work, so instead I imported it into THREEJS Editor and exported it using the "export object" function. When I loaded the object into my app using the following code: var kiss = new THREE.Object3D(), loader = new THREE.JSONLoader(true); loader.load("model/kiss/kiss.js", function (geometry, meshKiss) { meshKiss = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial()); kiss.addChild