我正在使用托管在node.js上的three.js。我将它与一个可以生成opengl纹理作为输出帧的相机一起使用。我想在three.js中使用这个实时的纹理流。我已经能够在相机和three.js之间创建共享上下文,并且我可以确认在相机上下文和three.js上下文中都存在纹理。我不太确定如何让three.js尊重外部维护的纹理。现有的videotexture对象不是正确的方式,它从浏览器dom对象复制帧数据,我想直接使用相机生成的纹理。
由于这类似于threejs的render- to -texture支持,只是渲染发生在threejs之外,所以我尝试修改该代码以支持外部纹理,但这看起来有点繁
我正在尝试将3D网格展平为2D形状。我想要实现的是像这样的东西
基本上,你在图像中看到的是一个给定的网格及其沿不同视图的轮廓。我想用Three.js为任何给定的网格做同样的事情,但我不知道如何才能得到轮廓。
我想到了两种可能的解决方案:
1)复制网格并沿给定轴进行缩放,使其变平(例如,如果我想获得从正Z到负的形状的轮廓,我只需像这样缩放它:
myMesh.scale.z = 0.001 // Small value to make it "2D-like"
问题:我正在复制和重新绘制一个可能非常大的网格,所以效率不是很高。
2)将网格的顶点投影到2D平面,使它们都在同一级别,然
我目前正在尝试将一个网格从Maya传输到three.js。我已经将Maya文件转换为.obj,并且可以在加载页面时看到网格。但是,将图像作为其纹理的材质(所有图像均为1024x1024且为.tga格式)显示为黑色,而仅为纯色的材质最终显示为纯色。请参见图像:
请注意,球体是青色的(其材质只是纯色),而其余球体是黑色的(这些材质附加了纹理文件)。
下面是我是如何加载网格/纹理的:
var loader = new THREE.JSONLoader();
loader.load(
'RoboticArm2.js',
function (geometry, mat
我有一个3D模型与UV映射创建搅拌机。我应用UV映射的方式,纹理只适用于模型的一侧。我将模型导出为obj和mtl。当我在three.js上导入这个模型时,它按预期工作,加载程序会自动将mtl文件中定义的图像作为纹理应用。
现在,我想在three.js中通过编程改变这个纹理。模型有多种材料(我认为是因为多张脸)。我如何重新应用的材料,保持UV映射和只是改变纹理应用?我想将map和envMap应用到模型中。
var m = new THREE.MeshPhongMaterial({
envMap:
我正在用three.js做一个简单的演示,我对来自Unity Game引擎背景的THREE.MeshPhongMaterial的行为感到困惑。 ? create_ring() {
// creates a ring mesh per inputed class data
const material = new THREE.MeshPhongMaterial({
color: this.color,
emissive: this.color,
emissiveIntensity: 1.6
});
const ri
我正在尝试使用从blender导出的.obj和.mtl文件创建一个场景。该对象从字面上看只是一个矩形(它需要是一个.obj文件。将添加更多的对象来创建场景)我可以看到材质加载,但无法看到在chrome或firefox中应用的纹理。
以下是javascript代码:
const obj_loader = new THREE.OBJLoader(),
mtl_loader = new THREE.MTLLoader();
// uses example of OBJ + MTL from three.js/examples
mtl_loader
.setTextureP
我目前正在使用three.js进行我的小项目,但是我很难在THREE.OBJLoader加载的对象上映射纹理。对于构建在几何学中的three.js,没有这样的问题。我现在真的很困惑..。
// Load the model from obj file [teapot, 74KB]
var onProgress = function ( xhr ) {
};
var onError = function ( xhr ) {
};
//var oCubeMap = THREE.ImageUtils.loadTexture(imageNames);
var objTexture = new
我正在使用three.js做动画。我想动态更新一个立方体网格的材质。下面是一个例子:
// create cube geometry
var material1 = [new THREE.MeshBasicMaterial({color:0xBEE2FF}),.....];
var geometry = new THREE.CubeGeometry(50, 50, 50,0,0,0,material1 );
var cube = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial());
// ...
var material2 = [
我试图在一个Angular应用程序中重现,但我得到了一个黑脸的立方体。控制台中没有错误。
使用法线网格材质(var material = new THREE.MeshNormalMaterial();)时,效果良好。
角度: 7.0.4,three.js: 0.99
import { Component, OnInit } from '@angular/core';
import * as THREE from 'three';
@Component({
selector: 'app-cube',
templateUrl: '.
我试图使用Three.js沿着弧线打印文本。在的帮助下,我得到了旋转的数学。但是,正如你会看到的,文本本身是乱七八糟的。我怎样才能使它正确地将自身空间隔开呢?Codepen是。
var container, camera, scene, renderer;
function init() {
container = document.getElementById( 'canvas' );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth/win