three.js

问题 I'm currently exploring methods of optimising the time taken to load / generate a large number of objects in Three.js. The input for these objects are individual vertex points that make up a 2D footprint. The initial method I used is to create THREE.Shape objects from the individual vertex points and then use THREE.ExtrudeGeometry to pull the 2D shape into a 3D object. Doing this for all objects takes around 3500ms. A second method I've explored is to pre-export the generated 3D objects (from

问题 In BufferGeometry, is there a way to access face indices and normals without converting to Geometry? The geometry at hand is a SphereBufferGeometry created by the threejs editor. I only need to read face indices and normals, not modify them. 回答1: BufferGeometry is either "indexed" or "non-indexed". SphereBufferGeometry is of the indexed type. You can access the face normals in the geometry data structure like so: var normal = new THREE.Vector3(); // create once and reuse ... // specify the

问题 After making a house model in blender I've exported it to three.js json format as a single object, but when adding it to scene I got half textures displayed and another half are just grey meshes. JSON URL (with absolute texture images links): http://pobegushki.meetroll.net/inn1.js Screenshot of what I get in blender and what I get in production: Also there are two instances of a barrel model which both has a perfectly mapped material. I tried setting barrel image as a material to floor

问题 I'm trying to load a model into my scene. I've included these files at the top of my project: <script src="js/build/three.min.js"></script> <script src="js/loaders/OBJLoader.js"></script> This is my code var loader = new THREE.OBJLoader(); loader.load( "res/rose/ModelsAndTextures/rose.obj", function ( object ) { scene.add( object ); } ); But I get error: OBJLoader.js:46 Uncaught TypeError: THREE.FileLoader is not a constructor(…) I looked in the OBJLoader.js file and to find THREE.FileLoader

问题 I'm experiencing a graphical glitch with an imported model while using JSONLoader. I can't really explain it, you'll have to see it. It may have something to do with the different materials and the camera POV. You can find the plunk here: http://plnkr.co/edit/0VjHiGNmWFHxdoMWC3GV?p=info JSONLoader part of the code: var loader = new THREE.JSONLoader(); loader.load( 'tv.js', function ( geometry, materials ) { var tv = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial(materials) ); glScene

问题 I created a scene with multiple objects in the canvas element with ThreeJS. I now want to change the material color of an object if the user clicks on it. Excerpt of my Angular 5 component, which holds all the ThreeJS content: public onMouseDown(event: MouseEvent) { console.log("onMouseDown"); event.preventDefault(); var rayCaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); mouse.x = (event.clientX / this.renderer.domElement.clientWidth) * 2 - 1; mouse.y = -(event.clientY / this

问题 I have built a ThreeJS app using the canvas renderer (due to project requirements) that I've run into a memory/garbage collection issue with. Part of the application logic creates a lot of meshes to achieve animations on segments of a flat 2d donut/ring. On each animation pass, we are removing all the previous meshes and generating new ones. When objects are removed from the scene, they're not deleted from memory but instead, moved to an array called __objectsRemoved. This is kept around

问题 image does not load by my domain Other domain no problem. it is working it just doesn't load my domain var textureLoader = new THREE.TextureLoader(); textureLoader.crossOrigin = ''; var map = textureLoader.load('https://MY-DOMAIN.com/upload/01.png'); Error : GET https://MY-DOMAIN.com/upload/01.png net::ERR_FAILED Note : I'm working on localhost. I taking pictures from remote server 回答1: From the response header your server sends I can see that it doesn't return a Access-Control-Allow-Origin

问题 In object picking from small three.js viewport I was given a way to mouse-pick objects from a small (not fullscreen) canvas. But now I want to display N different views of the same scene and also be able to do object picking. To avoid complexity:- I prefer not to have N viewports on one canvas (as per http://webglsamples.googlecode.com/hg/multiple-views/multiple-views.html) and I prefer not to do canvas copying (as per gman's nice method in Display different scenes sharing resources on

问题 In the code below, cubes sometimes move with animation and sometimes without. How can I fix it ? Also, how should I set rotation speed ? new Vue({ el: '#app', data () { return { camera: null, scene: null, renderer: null, cube: null, angle: null } }, methods: { init: function () { this.camera = new THREE.PerspectiveCamera(1, 1); this.camera.position.z = 200; // Make a scene this.scene = new THREE.Scene(); this.clock = new THREE.Clock(); // this.renderer = new THREE.WebGLRenderer({ antialias: