three.js

问题 just yesterday i started to tried the InstancedBufferGeometry method because i want to render thousand of objects with a good performance. In my case i want to instance cube geometries with different heights of each other. At moment i tried this code AFRAME.registerComponent('instancing', { schema: { count: {type: 'int', default: 10000} }, init: function () { this.count = this.data.count; this.model = null; }, update: function () { if (this.model !== null) { return; } var data = this.data;

问题 I'm writing and animation loop using three.js and all the examples (mrdoob, stemkoski) I see online use unprotected globals at the beginning of the script. I tried to enclose these in the init() function and then pass them as arguments through the animation loop. However, the renderer is coming up undefined. I'm not sure what I'm missing below. My primary question is how to understand best practice for setting up an animation loop with good closure (protecting variables that would otherwise

问题 I have a mesh that i am loading from 3d studio max into three.js. I modified three.js to hold another typed array for the binormal data. It all seems to be working fine and dandy until shadows are involved. For some reason, the shadow map is wrong, and it seems as if its rendering the mesh with faces flipped. In this example, the shadows are showing up correctly on the floor, because the renderer has .shadowMapCullFace = THREE.CullFaceBack http://dusanbosnjak.com/test/webGL/new/StojadinCeo

问题 I have a custom object which is a subtraction of two meshes. This subtraction creates a frame-like object. createFrame (x, y, z) { const frameMesh = new THREE.Mesh(new THREE.BoxGeometry(1,1,1)); frameMesh.scale.set(x, y, z); const smallerFrameMesh = frameMesh.clone() smallerFrameMesh.scale.set(x - 4, y - 4, z); // subtraction const frameGeometry = fromCSG(toCSG(frameGeometry).subtract(toCSG(smallerFrameMesh))); const frame = new THREE.Mesh(frameGeometry, new THREE.MeshStandardMaterial

问题 This code should produce a mesh of a torus in three js. I'm pretty sure the maths are correct. However it renders only a piece of torus, or stranger things if I change some parameters. Is there something bad with my practice of THREE.Mesh ? // the vertices of the mesh and the vertex normals ---------------- var nx = 64; var ny = 32; var R = 10; var r = 3; var Vertices = new Array(nx); var Normals = new Array(nx); for (var i = 0; i < nx; i++) { Vertices[i] = new Array(ny); Normals[i] = new

问题 I have two separate obj.s - a sink and a board (the top of a bathroom-cupboard). The sink needs to be placed on top of the board, like this: http://www.farline.cz/orig-image/364470b4db.jpg?c=NS0xNDkzMjk2MjIy (just an examle from image-search) However, of course, both objects overlap, so the board is still there where the hole of the sink is supposed to be. Using a boolean to subtract the sink from the cupboard isn't enough, because it won't cut out the hollow space. What options do I have to

问题 I'm trying to convert the lighting on a MeshPhongMaterial: So that the visible portion is transparent to the dom element beneath it. I just want to keep the shadows. If I use a ShadowMaterial, I lose the radial lighting effect and just get the shadows from the objects: I tried applying a transparent png texture as the map to the MeshPhongMaterial but it shows as fully transparent with no shadows. Here is the effect I am trying to recreate (produced using html5 canvas drawing): Thank you in

问题 I have an issue with anti aliasing when i spin model with orbiter i am using renderer = new THREE.WebGLRenderer({ preserveDrawingBuffer: true, antialias: true }); it is helping but not resolving the issue fully. in this position it looks ok: Does anyone know how to resolve this? or have any idea what else can i try? ( code sample would be appreciated ) Thanks EDIT: Ok i have added this: renderer.setPixelRatio(2); and it has improved a LOT ( see result bellow ), but still shows a bit, anyone

问题 I am loading SVG images on to the mesh basic material of BoxBufferGeometry(cube) using SVGLoader. I want to trigger mouse events when user hovers/clicks on specific element of SVG which is loaded on the specific side of the cube. I tried adding events into the .svg file before loading it but once it get loaded on the material it doesn\'t show any changes caused by the events. Is there any other possible way to select the elements of loaded svg image and apply events on it? For better

问题 I am working on a three.js application where I have to create a building structure (all on ground floor), the height, width, length will be specified by user. User can change wall and roof color (which are applied using texture, as I have images for each color with some texture). They can also add any accessory on a selected wall (like a window or a door), which can be then dragged and dropped on that same selected wall. After deciding where they want to put the window (for eg.) they will