three.js | 易学教程

Display scene at lower resolution in three.js

阅读更多关于 Display scene at lower resolution in three.js

问题 I am looking for a way to display a three.js viewport at half resolution (or double size depending on how you look at it). Three.js documentation states that [Y]ou can also give setSize smaller values, like window.innerWidth/2 and window.innerHeight/2, for half the resolution. This does not mean that the game will only fill half the window, but rather look a bit blurry and scaled up. The actual result, however, is that the viewport is sclaed to half size. This jsfiddle shows the non-expected

Drop down menu not work

阅读更多关于 Drop down menu not work

问题 I'm developing an easy web application, and I'm using two js libraries: dat.gui and three.js. My problem is the drop down menu is locked. I can't open it. // gui initialization (dat.gui) function initGui() { var Options = function() { this.tenda = 'bar'; }; config = new Options(); var gui = new dat.GUI(); var subGui = gui.addFolder('Setting'); subGui.open(); // callbacks subGui.add( config, 'tenda', ['bar', 'pie', 'area']). onChange( function() { if (config.tenda === 'bar') { ... } else if

Optimal way to render multiple scenes with large numbers of objects in Three.js

阅读更多关于 Optimal way to render multiple scenes with large numbers of objects in Three.js

问题 Imagine that you want to draw two scenes, each with hundreds of spheres, and provide the ability to switch between these scenes. What is an optimal way to do this? Currently a switch takes about 4 to 5 seconds because I am deleting, creating, and drawing all of the spheres on each switch. Below is an example of the code that runs on a scene switch. clearObjects(); resetCamera(); for(var i = 0; i < 500; i++) { var geometry = new THREE.SphereGeometry(radius, 50, 50); var material = new THREE

How to load json models in three.js properly?

阅读更多关于 How to load json models in three.js properly?

问题 I'm having a hard time loading JSON models in three.js. I'v made a very simple tube-like model and textured it in blender. The issue is that whenever i try to load the json model in three.js, the vertexes looks weird. I'v tried exporting model with different settings but got always the same problem, so i think the problem is within my code. EDIT: Negative. I loaded buffalo model and it looked like it should. Any idea what i'm doing wrong inside blender? <html> <head> <style> canvas { width:

Can a Three.js raycaster intersect a group?

阅读更多关于 Can a Three.js raycaster intersect a group?

问题 I want to know if my raycaster is looking at an OBJ that I've loaded. Due to the way exported from Cinema4D, I believe the OBJ is a THREE.Group with 3 children, instead of a THREE.Object. Can I just change my raycaster line of code to look for this group instead of an object? raycaster.set(controls.getObject().position, controls.getDirection(), 0, 40) var intersects = raycaster.intersectObjects(scene.children, true); if (intersects.length > 0) { //CURRENTLY INTERSECTING SOMETHING for (var i =

What does Material.alphaTest mean?

阅读更多关于 What does Material.alphaTest mean?

问题 I've been having major issues with transparency of non-intersecting objects for the last few days. I've come across the suggestion to set the alphaTest of the material to 0.5, which solved the problem. That's great, but I'd like to understand better what it means and how come it solved the issues so elegantly. Can anyone advise? 回答1: From a brief experiment: it appears to be a threshold for rendering. Meshes disappear abruptly when opacity falls below alphaTest . If an object is not turning

THREE js imported OBJ model [.CommandBufferContext]RENDER WARNING: Render count or primcount is 0

阅读更多关于 THREE js imported OBJ model [.CommandBufferContext]RENDER WARNING: Render count or primcount is 0

问题 I get thousands of errors (google chrome): [.CommandBufferContext]RENDER WARNING: Render count or primcount is 0. OBJ and MTL files exported from Bledner, using OBJMTLLoader.js as loader After moving to R73. Any experience? 回答1: This happens when the low level render call was told to draw zero vertices/faces. It is because you have one or more meshes with a polygon that has zero faces/vertices, so on each draw call this error piles up. The problem could be your model or it could be the export

Three.js shape from random points

阅读更多关于 Three.js shape from random points

问题 I have a N number of random points (in this case 20), with a X,Y and Z constrains. How can I create ANY (preferably closed) shape (using Three.js library) , given and starting only from N random points. There are probably many variants, please share yours. var program = new Program(reset,step) program.add('g',false) function reset() { scene.clear() scene.add(new THREE.GridHelper(100,1)) } function step() { } program.startup() var numpoints = 20; var dots = []; //If you want to use for other

ThreeJS SSAO with SSAA

阅读更多关于 ThreeJS SSAO with SSAA

问题 i'd like to integrate the SSAO-Shader (Screen Space Ambient Occlusion) into my antialiasing render stack (Super Sampling Anti-Aliasing). The AA is necessary for high-quality rendering, the default antialiasing delivered by my gpu isn't always sufficient. Now i've already integrated SSAO into the usual render process, but my new goal is to combine both techniques. For this, i've set up a fiddle. The first EffectComposer renders the scene onto a renderTarget with twice the resolution of the

How to change one texture image of a 3d model(maya ) in three.js at runtime

阅读更多关于 How to change one texture image of a 3d model(maya ) in three.js at runtime

问题 This site is loading a maya model using three.js. This model has Below texture pictures Here is the JS var SCREEN_WIDTH = window.innerWidth; var SCREEN_HEIGHT = window.innerHeight; var container; var camera, scene; var canvasRenderer, webglRenderer; var mesh, zmesh, geometry, materials; var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; var meshes = []; function init() { container = document.createElement('div'); document.body.appendChild(container); camera =