three.js

问题 I try to implement a way to prevent the updating of values with mouse (actually when the three.js animation has started, launched with a click on button). For the moment, I have the following dat.GUI menu : Once "start" button is clicked, I would like to prevent user from modifying with mouse the parameters " Rotation x " and " Rotation y ". Here is the concerned part of code for this menu : // Create GUI var gui = new dat.GUI({ autoplace: false, width: 350, height: 9 * 32 - 1 }); var params

问题 When applying a large texture image to a Mesh for a noticeable period of time Three.js locks-up browser's main thread. Let's consider the following example: var texLoader = new THREE.TextureLoader(); texLoader.load('someLargeTexture.jpg', function(texture) { var geometry = new THREE.SphereGeometry(10, 32, 32); var material = new THREE.MeshBasicMaterial({map: texture}); var sphere = new THREE.Mesh(geometry, material); // adding the object to the scene will lock up the browser's main thread

问题 I'm working on a three.js scene that renders some textured point sprites. Those sprites get their textures from a single uniform , and that uniform is a 2D canvas on which I've drawn the letters of the alphabet: While all the letters are rendered on this canvas in black, points in the three.js scene that are far from the camera appear quite faintly in my scene: // aliases var BA = THREE.BufferAttribute, IBA = THREE.InstancedBufferAttribute, ARR = Float32Array; function Wordmap() { // config

问题 I found some of the examples enable this property, but there're not enough comments to make me understand what it matters. Could you please tell me what's the best practice of this property? 回答1: EDIT: PointCloud is now Points , and the .sortParticles property has been removed. That means the points are rendererd in the order they exist in the buffer. The answer below is outdated. three.js r.73 This is a perfect example of why it is important to understand at least the basic concepts of webGL

问题 I have been able to create a particle system for canvas, which was simple and effective. Here is a demo: https://awingit.github.io/particles/ Now what I would like to do is create the same thing in Threejs. However, I have not yet found any examples out there to reference from and I have not been able to create the same as my 2D canvas particle system in 3D. Can anyone give me some direction with regards to how I can do this in Threejs? I know how to work with particles, but what I am

问题 I'm trying to update an arrowHelper. I've tried manipulating the vertices in the arrow object's line, setting everything dynamic = true and so on, but the only way I can seem to do it is by removing the old line and drawing a new one. Is there a way to update an arrowHelper? 回答1: So you can't update an arrowHelper per se in the usual way you update something, by changing the values you used to create the object. However: you can move the arrow's position, which moves its apparent start point,

问题 The goal is to turn any transparent PNG into a 3D card with a slight thickness and the geometry of the image minus transparency. For example, I'd like to take an image like this one: http://findicons.com/files/icons/730/soft/128/user_male.png and turn it into a card object with a slight thickness. However, the card should not be rectangular - its edges should follow the shape of the transparency in the image. Is there any simple procedural way to accomplish this on any given PNG? Thanks. 来源：

问题 We have a webgl/three.js application that makes extensive use of texture buffers for passing data between passes and for storing arrays of data. None of these has any use for mipmaps. We are easily able to prevent mipmap generation: at the three.js level we set min and mag filters to NearestFilter, and set generateMipmaps false. However, the shaders do not know at compile time that there is no mipmapping. When compiled using ANGLE we get a lot of warning messages: warning X4121: gradient

问题 I'm trying to make a React component that renders a three.js scene. However, whenever I try mounting the component instead of seeing any sort of scene being rendered, I just see the text [object HTMLCanvasElement] being shown. Here's my component: import React from 'react'; import * as THREE from 'three'; class Cube extends React.Component { constructor() { super(); this.animate = this.animate.bind(this); this.scene = new THREE.Scene(); this.geometry = new THREE.BoxGeometry(200, 200, 200);

问题 I am trying to understand the co-ordinate spaces of three.js, I understand that there is object.matrix and object.matrixWorld. After stumbling upon this blog post Matrix Basics. How to step away from storing an orientation as ’3 angles’, I decided to try to learn how to manipulate properties of the Matrix4 manually thus avoiding using Euler rotations. All I am trying to do is translate my cube away from the origin 0,0,0 then rotate it in world space. The result in my mind would be that the