Articles of three.js

three.js definir e ler o vetor de aparência de câmera

Em vez de girar a câmera com camera.rotation ou com a function lookAt (), eu gostaria de passar um vetor visual diretamente para a câmera … É possível definir um vetor de aparência de câmera diretamente e é possível ler o visual vetor da câmera?

Replicando MeshLambertMaterial Usando ShaderMaterial ignora texturas

Notei que o THREE.js usa shaders internamente para criar material de núcleo “por exemplo, MeshLambertMaterial”, então decidi copiar o lambert shader do código Three.js para um novo shader e construir nele. Este é o código que obtive (copiado fielmente do Three.js r66) THREE.MyShader = { uniforms: THREE.UniformsUtils.merge( [ THREE.UniformsLib[ “common” ], THREE.UniformsLib[ “fog” ], THREE.UniformsLib[ […]

Como você salva uma imagem de uma canvas Three.js?

Como você salva uma imagem de uma canvas Three.js? Estou tentando usar o Canvas2Image, mas não gosto de jogar com o Threejs. Já que a canvas não é definida até que tenha uma div para append o object de canvas. Canvas2Image: Save out your canvas data to images

Como obter a posição absoluta de um vértice em three.js?

Tanto quanto eu sei var point = object.geometry.vertices[i]; retornará com a posição relativa para x , y do ponto dentro da geometry do object. Como obter a posição absoluta, se o object foi movido, girado ou dimensionado?

Usando texturas em THREE.js

Estou começando com THREE.js e estou tentando desenhar um retângulo com uma textura, iluminado por uma única fonte de luz. Eu acho que isso é tão simples quanto possível (HTML omitido por brevidade): function loadScene() { var world = document.getElementById(‘world’), WIDTH = 1200, HEIGHT = 500, VIEW_ANGLE = 45, ASPECT = WIDTH / HEIGHT, NEAR […]

Várias texturas transparentes na mesma face de malha em Three.js

É possível colocar várias texturas umas sobre as outras na mesma face em Three.js para que a mistura alfa seja feita com GPU acelerada em webGL? As texturas são (ou devem ser) aplicadas à mesma face, de modo que a textura inferior (textura 1) não tenha canal alfa e as texturas acima sejam canalizadas por […]

Convertendo coordenadas mundiais para coordenadas da canvas em Three.js usando a projeção

Há várias perguntas excelentes sobre stack ( 1 , 2 ) sobre a desprojetação em Three.js, que é como converter as coordenadas do mouse (x, y) no navegador para as coordenadas (x, y, z) no espaço de canvas Three.js. Principalmente eles seguem esse padrão: var elem = renderer.domElement, boundingRect = elem.getBoundingClientRect(), x = (event.clientX – […]

Three.js Collada – Qual é a maneira correta de dispor () e liberar memory (garbage collection)?

Eu importei com sucesso uma cena .dae via ColladaLoader. O problema é que eu preciso alternar entre vários arquivos .dae. Eu não consigo implementar o método de descarte corretamente. dae.traverse(function(obj) { console.log(‘unloading ‘ + obj.id); scene.remove(obj); if(obj.geometry) obj.geometry.dispose(); if(obj.material) obj.material.dispose(); if(obj.mesh) obj.mesh.dispose(); if(obj.texture) obj.texture.dispose(); }); scene.remove(dae); O que eu poderia possivelmente estar fazendo errado? Muito […]

Câmera Three.js inclina para cima ou para baixo e mantém o nível do horizonte

O camera.rotate.y se move para a esquerda ou para a direita de uma maneira previsível. O camera.rotate.x olha para cima ou para baixo previsivelmente quando o camera.rotate.y está em 180 graus. mas quando eu mudo o valor de camera.rotate.y para algum novo valor, e então mudo o valor de camera.rotate.x, o horizonte gira. Eu procurei […]

Convertendo a posição 3D para a posição de canvas 2d

Eu preciso do código Three.js para converter coordenadas de object 3D para 2d em um elemento ‘div’ para que eu possa colocar labels de texto onde eles precisam estar (sem que esses labels sejam dimensionados / movidos / girados junto com o movimento 3D). Infelizmente, todos os exemplos que vi e tentei até agora parecem […]