Articles of three.js所

如何管理平截头剔除

我有一个基于球形剪贴图的行星地形。 整个行星是由一个单位的环形几何形状组成,顶点着色器移动以覆盖整个600万单位半径的行星。 但是,只要这个几何体的起点不在相机的视野中(这是行星的99.9999%),就会被剔除。 什么是最好的解决scheme,以确保即使原来的网格是不可见的行星是可见的? 这是基于WebGL和Three.js 。

加载用Sketchup导出的collada模型时UV映射问题

我使用Three.js collada加载器将通过Google Sketchup导出的collada模型加载到Three.js(v63)场景中。 模型被加载,但有一些纹理没有很好的映射,如下图所示: 我的第一个问题是如何检测这种问题,然后,是否有办法利用sketchup导出的UV来正确映射纹理? sceenshot的模型来自: http : //sketchup.google.com/3dwarehouse/details? mid=557d5f1b5a076bdcf53b1b21212345ca&prevstart =0

用3D帆布球replace一个div(带有球形图片)

我想制作一个游戏,你必须把球保持在一个绿色的平台上。 在这一点上,球是一个球的形象。 你可以在球场上移动球,一切都很好。 在这里看到它(首先点击1)。 当你使用箭头键,你可以移动球(实际上你移动一个div )。 这看起来有点假,所以我想用一个真正的3D帆布球。 我在这里看到一个很好的例子。 (向下滚动到页面的一半,在标题上方会看到一个带有球的笑脸:平滑) 那么我怎么能用这个球进入我的比赛? 我有以下代码的球: // build the ball and draw its texture with a 2d canvas ——————————————- var buildBall = function() { // create a canvas to draw the ball's texture var ballCanvas = document.createElement('canvas'); ballCanvas.width = 64; ballCanvas.height = 64; var ballContext = ballCanvas.getContext('2d'); // draw 2 […]

如何在一个物体表面上定位一个3D十字准线,并从物体表面向外设置它的角度**

我现在所拥有的是光标在我的canvas上的光线追踪器,当我单击对象时,它将获得我select的vector在3D空间中的位置。 光线追踪器返回一个Vector3的point ,所以我把我的十字线( line )的位置设置为point ,唯一的问题是,我需要我的十字线从我的对象向外指向像这样:(示例) 这是我的问题在哪里…我需要得到我的光线跟踪器相交的脸的方向,但我不知道如何。 我可以得到物体本身的方向没有问题,但我不想要那个,我希望我的十字准线平躺在它的位置上。 这是不正确的位置在我的模型的一侧: 所以从十字指向外面的那条线应该从脸上指向外面,十字架在我点击的表面上是平的。 这是现在使用的代码: line.position.copy(intersects[0].point); var mx = new THREE.Matrix4().lookAt(intersects[0].point,new THREE.Vector3(0,0,0), intersects[0].normal); var qt = new THREE.Quaternion().setFromRotationMatrix(mx); line.rotation.copy(qt); 更新 我已经尝试了另一种方法在这里看到,但我仍然有麻烦得到它在网格上展平: var mat = intersects[0].object.matrixWorld; mat.setPosition(new THREE.Vector3(0, 0, 0)); var globalNormal = intersects[0].face.normal.clone().applyMatrix4(mat).normalize(); var lookAtTagret = new THREE.Vector3().addVectors(intersects[0].point.clone(), globalNormal); line.lookAt(lookAtTagret); var cPos = new THREE.Vector3().addVectors(intersects[0].point, globalNormal.multiplyScalar(0.05)) line.position.copy(cPos)

在three.js中的光线投射在ipad和触控设备上无法正常工作

我正在开发桌面和iPad的3D工具 。 除了两个问题,一切工作正常: 问题1 – 当我用鼠标select一个3D对象,并在iPad上移动它(而不是在桌面上,它工作的很好),它不会移动。 (您可以通过select右侧的橱柜面板来添加橱柜)。 问题2 – 我想通过点击这样的button来产生和拖动一个对象。 使用此工具,您可以通过select并将其拖到场景来添加对象。 提前致谢。 🙂

如何在THREE.JS中为三维模型的单独部分制作animation?

我是Three.js的新手。 我想导入一个爪机的模型 这里 : https : //poly.google.com/view/9aIHw7_MAZE 并animation模型的单独的片断,说爪子。 这可能是通过导入整个模型,还是我需要一块一块地导入它们?

在three.js渲染更多的3D模型,不减慢页面的最佳方式?

我正在使用threeJS库创建3D网页游戏。 这是一个多玩家游戏,玩家是3D人体模型的游戏,我需要为每个进入游戏的玩家添加一个人类3D模型。 另外,我想在走路的时候给人类设置animation,但是问题是,添加3D模型并为每个玩家设置animation会减慢游戏速度,或者导致浏览器崩溃。 问题:展示和animation玩家模型的更好方法是什么,不会减慢游戏速度?

如何概述javscript和/或php中的alpha透明图层?

我只是想要一个大纲/边缘检测被选中的字符/项目/对象或做某事。 我看到了不同语言的这个问题的很多版本,但我将不胜感激可以在Web上下文中实现的一种方法。 我不知道这是更好的处理在服务器或可以在客户端完成。 我不知道如何访问任何语言的alpha透明图层。 请指教。 对不起,缺乏特异性,只是得到我想要的东西。 这将在2d的上下文中。 这幅画大纲的对象效果显示了我要去的东西。 不知道这个问题的答案是否适用于我的问题。

三维中的粒子运动

我已经创建了一个粒子系统,运动是通过perlin噪声的stream场来控制的 – 可以在这里find 。 我会非常感谢任何想法和技巧,如何控制他们在Z平面上的运动(噪声是3d),因为我的3D知识还很差。 如何描述三维噪声值控制的运动? 我想这个位移必须用一个指向运动的vector来描述,并加到当前的位置上,但是如何确定z分量呢? 3D示例video在这里可用

第一人称相机世界matrix问题(在THREE.js和webGL中)

我正在尝试在使用THREE.js的webGL中创建一个类似Portal的效果。 我有两个场景由一对门户连接。 在第一个门户内使用模板和一些matrixmath渲染的第二个场景的视图 这是我用来确定门户中的视图的代码: function getPortalViewMatrix(cam, src, dst) { var inverseCamToSrc = new THREE.Matrix4().getInverse(cam.matrixWorld).multiply(src.matrix); var rot = new THREE.Matrix4().makeRotationY(Math.PI); var portalViewMatrix = dst.matrix.clone().multiply(inverseCamToSrc).multiply(rot); return portalViewMatrix; } 这个设置按照预期工作,直到我添加了第一人称摄像头控制,从这个例子中 。 现在,当我旋转摄像头时,第二个场景的视图是错误的(但是如果你只是走动的话,仍然是正确的),正如你在这里看到的(只在Chrome中可用)。 完整的源代码也可以在那里find。 我使用的PointerLockControls类将相机放置在一个“装备”中以避免万向节locking: yawObject – > pitchObject – >相机 yawObject在y轴上旋转。 pitchObject在x轴上旋转。 照相机本身仍然是pitchObject的孩子。 PointerLockControls工作得很好,但是由于这种设置,相机的matrixWorld属性看起来并不像自由浮动相机那样具有相同的值。 而我对matrixmath的理解还不足以解决这个问题。 我已经尝试了不同的东西,例如使用四元数(decomposing camera.matrixWorld)来颠倒不同的matrix,但这只是我随机试错的练习。 任何人都可以帮助我理解这个问题,也许提供一个解决scheme? 任何帮助将不胜感激。