我正在使用THREE.js OBJ加载器将模型导入场景.
我知道我可以很好地导入几何体,因为当我为它指定一个MeshNormalMaterial时,它显示出很棒的效果.但是,如果我使用任何需要UV坐标的东西,它会给我错误:
[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1
我知道这是因为加载的OBJ没有UV坐标,但我想知道是否有任何方法可以生成所需的纹理坐标.我试过了
material.needsUpdate = true;
geometry.uvsNeedUpdate = true;
geometry.buffersNeedUpdate = true;
......但无济于事.
有没有办法使用three.js自动生成UV纹理,还是我必须自己分配坐标？
所以我在遵循一个非常简单的d3教程时遇到了问题.本质上我试图通过将数据绑定到当前的svg圈元素然后调用enter.append来添加SVG圈元素如下所示:
var svg =d3.select("body").selectAll("svg");
var circle = svg.selectAll("circle");
var w=window.innerWidth;
console.log(circle);
circle.data([500,57,112,200,600,1000]);
circle.enter().append("circle")
.attr("cy",function(d) {
return (d)
})
.attr("cx", function(i){
return (i*100)
})
.attr("r", function(d) {
return Math.sqrt(d);
})
这似乎会增加3个新的圆形元素(因为我已经创建了3个).但是,我没有添加这3个新的圆形元素,而是遇到了这个错误:
未捕获的TypeError:对象[对象SVGCircleElement],[objectSVGCircleElement],[对象SVGCircleElement]没有方法'enter'
我用段落做了基本相同的事情,它似乎工作正常:
var p =d3.select("body").selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.text(function(d) { return "I'm number " + d + "!"; });
//Enter
p.enter().append("p")
.text(function(d) { return "I'm number " + d + "!"; })
.style("color", function(d, i) {
return i % 2 ? "#000" : "#eee";
});
但是,只要我尝试将SVG元素添加到其中,我就会继续得到相同的错误.
看起来应该只是语法错误或其他什么,但我已经完成了5万亿次代码,并且找不到任何东西. …
我正在使用THREE.JS和Web Audio API创建一个3D游戏.我遇到的一个问题是我想使用网络音频监听器方向,并将监听器定义为摄像头,其位置和方向不断更新
我的问题是,无论如何要轻松获得三个相机的矢量方向？
我试图通过使用旧的相机位置来计算它,并使用速度矢量来计算它面向哪个方向,但是当相机静止时这不起作用...
通过使用camera.rotation.x,camera.rotation.y,camera.rotation.z来创建单位向量是否可行？
还是有更简单的方法？
非常感谢你的时间!
所以我正在尝试制作我自己的d3所做的华丽可视化版本:
http://mbostock.github.com/d3/talk/20111116/bundle.html
我所做的只是将整个图表向左移动,然后尝试在右侧显示不同的关系,因此每次将鼠标悬停在左侧的名称上时,您不仅会看到不同类型的连接更改颜色,在图表中,您还可以在右侧看到这些连接的名称.
我遇到的问题是访问连接的实际名称.我是javascript的新手,甚至更新到d3,并且在理解如何访问这些SVG元素的实际名称时遇到问题到目前为止,我只是在console.log()中使用两行代码来完成它:
var targetTest = d3.selectAll("path.link.target-" + d.key);
console.log(targetTest);
在控制台中,这将给我一个我想要的所有SVG对象的日志,但它为我提供了每个元素的完整信息.像这样的东西:
0: SVGPathElement
__data__: Object
animatedNormalizedPathSegList: null
animatedPathSegList: SVGPathSegList
attributes: NamedNodeMap
baseURI: "http://localhost/mbostock-d3- 544addb/examples/bundle2/bundle.html"
childElementCount: 0
childNodes: NodeList[0]
className: SVGAnimatedString
clientHeight: 0
clientLeft: 0
clientTop: 0
clientWidth: 0
dataset: DOMStringMap
externalResourcesRequired: SVGAnimatedBoolean
farthestViewportElement: SVGSVGElement
firstChild: null
firstElementChild: null
id: ""
lastChild: null
lastElementChild: null
localName: "path"
namespaceURI: "http://www.w3.org/2000/svg"
nearestViewportElement: SVGSVGElement
nextElementSibling: SVGPathElement
nextSibling: SVGPathElement
nodeName: "path"
nodeType: 1
nodeValue: null
normalizedPathSegList: null
offsetHeight: 0
__proto__: SVGPathElement
length: 1
parentNode: …所以我在尝试从标签创建Web音频源节点时遇到问题.守则看起来像这样:
OBJECT.musicContext= new webkitAudioContext();
OBJECT.audio = new Audio();
OBJECT.audio.src = self.file;
OBJECT.source = OBJECT.musicContext.createMediaElementSource(OBJECT.audio);
var analyser= OBJECT.musicContext.createAnalyser();
analyser.fftSize=1024;
OBJECT.analyser=analyser
OBJECT.gain = self.musicContext.createGain();
OBJECT.gain.gain.value = .01
OBJECT.source.connect(OBJECT.gain)
OBJECT.gain.connect(OBJECT.analyser)
OBJECT.analyser.connect(OBJECT.musicContext.destination)
OBJECT.play = function(){OBJECT.source.play();}
OBJECT.stop = function(){OBJECT.source.stop();}
问题在于最后两行.我似乎无法通过webkit音频上下文播放音频...
如果我做
OBJECT.play = function(){OBJECT.audio.play();}
声音将开始播放,但不会通过音频节点(这是有意义的)
我也试过了
OBJECT.play = function(){OBJECT.source.noteOn(0);}
OBJECT.stop = function(){OBJECT.source.noteOff(0);}
无济于事......
任何帮助或建议都会受到极大的赞赏,并提前感谢您的时间!
艾萨克
编辑:当console.logging OBJECT.source声称有零输入和1输出时.这对于源节点是否正确？
因此，我正在一个项目中使用多个不同的摄像机将场景渲染到不同的画布。本质上，我正在做这个例子：
http://threejs.org/examples/webgl_multiple_canvases_grid.html
我发现这样做的问题是，不同场景的剪切平面在边缘处确实有些奇怪。如示例所示，使用Big Objects可以很好，但是如果较小，则可以修剪一些边缘。我已经在下面举例说明了这个问题。
我想知道是否有解决此问题的方法。我尝试尝试的几种不同方法如下：
是我缺少的简单事物，还是我必须更深入地研究。
非常感谢您抽出宝贵的时间！以撒
我目前正在开展一个项目,涉及在大小为10 - 1000000的对象中进行操作.我一直有在那里,当我在大范围的这些尺寸,物体开始"微光"的问题,这只有当对象相交情况,然后它得到越来越多的"暴力"作为相机对象移开.
我在这里上传了一个问题图片:http://imgur.com/SOeemng
虽然我不知道是什么导致了这种情况,但我对可能导致它的原因有一些可能的想法:
首先,我是否正在处理对于three.js/webgl来说太大的尺寸
我想到的第二种可能性是使用我制作的相机控件,如下所示:
if(mouseIsDown == true){
if(this.movementSpeed < this.maxSpeed){
this.movementSpeed += this.acceleration
}else{
this.movementSpeed = this.maxSpeed
}
}else{
if(this.movementSpeed > this.minSpeed){
this.movementSpeed = this.movementSpeed/this.deceleration
}else{
this.movementSpeed = this.minSpeed
}
}
this.minSpeed = 0,this.movementSpeed用于移动相机,如下所示:
var actualSpeed = delta * this.movementSpeed;
this.object.translateZ( -actualSpeed * forwardOrAuto );
this.object.translateX( actualSpeed * sideSpeed );
this.object.translateY( actualSpeed * upSpeed );
我不认为这会是问题,但由于移动速度实际上从未等于零,因此可能是一个问题.即使移动速度为10 ^ -20或-30,闪烁仍然会发生.
如果重要的话,我也在55号.
我遇到一个非常有趣的问题，当我向 div 添加新的 SVG 元素时，只有第一次调用追加时才会显示新的 svg 元素。它们在硬编码时可以工作，但是当它们被添加到 onmousedown 时，即使它们被添加到 HTML 文件中，它们也不会显示。我假设这是我对 SVG 理解的问题，并且元素无法动态添加，但我一直在互联网上查找，但找不到任何有关该主题的内容。
您可以看到在 $(document).mousedown 函数上，一个新的圆圈被附加到 svg 容器中，但是即使它被添加到 SVG 容器中，它也不会显示在网页上。
代码：
HTML：
<div id="svgHolder">
<!--THIS CIRCLE SHOWS UP-->
<svg><circle cx='50' cy='50' r='40' stroke='black' stroke-width='1' fill='red' /></svg>
</div>
jQuery/JavaScript：
$(document).ready(function(){
var mouse={
x:0,
y:0,
drawing:false,
lastX:0,
lastY:0,
}
$(document).mousedown(function(e){
console.log('md')
mouse.x=e.clientX
mouse.y=e.clientY
mouse.drawing=true
//THIS CIRCLE WILL BE ADDED TO THE SVGHOLDER, BUT WILL NOT SHOW UP
$("#svgHolder").append("<svg><circle cx='"+mouse.x+"' cy='"+mouse.y+"' r='40' stroke='black' stroke-width='1' fill='red' /></svg>");
});
$(document).mouseup(function(e){
console.log('mu')
mouse.x=e.clientX
mouse.y=e.clientY
mouse.drawing=false
}); …所以我正在使用three.js示例中的webgl_interactive_cubes.html,我有一个相对简单的问题:是否可以测试光线与对象子节点的交集.
例如,如果我做了类似的事情:
for ( var i = 0; i < 2000; i ++ ) {
var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
scene.add( object );
}
我打电话的时候
var intersects = raycaster.intersectObjects( scene.children );
它将与这些对象相交.但是,如果我首先创建一个'subScene',如下所示:
var subScene = new THREE.Object3D();
scene.add(subScene);
然后将所有这些对象添加到subScene而不是场景,将不再发生交集.
是否可以在场景和子场景中交叉所有对象(在最终项目中我希望有多层嵌套的subScenes)或者如果我使用光线投射,我应该尝试将所有对象保留在同一场景中吗？
提前感谢您的时间,
艾萨克