Questions tagged «three.js»


8
学习WebGL和three.js [关闭]
已关闭。这个问题是基于观点的。它当前不接受答案。 想改善这个问题吗?更新问题,以便通过编辑此帖子以事实和引用的形式回答。 4年前关闭。 改善这个问题 我是新手,开始学习Web浏览器中的3D计算机图形。我对在浏览器中制作3D游戏感兴趣。对于同时学习WebGL和three.js的任何人... 使用three.js是否需要WebGL知识? 使用three.js与WebGL相比有什么优势?
142 webgl  three.js 

6
将three.js背景更改为透明或其他颜色
我一直在尝试将画布的默认背景颜色从黑色更改为透明/其他任何颜色-但没有运气。 我的HTML: <canvas id="canvasColor"> 我的CSS: <style type="text/css"> #canvasColor { z-index: 998; opacity:1; background: red; } </style> 正如您在下面的在线示例中看到的那样,我在画布上附加了一些动画,因此不能仅执行不透明度:0; 在id上。 实时预览:http: //devsgs.com/preview/test/particle/ 任何想法如何覆盖默认黑色?

1
透明背景与three.js
代码可以工作,但是我在使用three.js为画布设置透明背景时遇到了问题。我用: Background.renderer.setClearColor(0xffffff, 0); 但随后背景变黑。如何将其更改为透明的? 代码: var camera, scene, renderer; var mouseX = 0, mouseY = 0; var p; var windowHalfX = site.Width / 2; var windowHalfY = site.Height / 2; Background.camera = new THREE.PerspectiveCamera( 35, site.Width / site.Height, 1, 2000 ); Background.camera.position.z = 300; //camera.position.y = 200; // scene Background.scene …

6
在THREE.js中使用纹理
我从THREE.js开始,我试图绘制一个带有纹理的矩形,并用单个光源照明。我认为这很简单(为简洁起见,省略了HTML): function loadScene() { var world = document.getElementById('world'), WIDTH = 1200, HEIGHT = 500, VIEW_ANGLE = 45, ASPECT = WIDTH / HEIGHT, NEAR = 0.1, FAR = 10000, renderer = new THREE.WebGLRenderer(), camera = new THREE.Camera(VIEW_ANGLE, ASPECT, NEAR, FAR), scene = new THREE.Scene(), texture = THREE.ImageUtils.loadTexture('crate.gif'), material = new THREE.MeshBasicMaterial({map: …

9
鼠标/画布X,Y到Three.js世界X,Y,Z
我到处搜索了一个与我的用例匹配但找不到的示例。我正在尝试将摄像头的屏幕鼠标坐标转换为3D世界坐标。 解决方案我发现所有方法都可以进行射线相交以实现对象拾取。 我想做的是将Three.js对象的中心定位在鼠标当前“在”上方的坐标上。 我的相机位于x:0,y:0,z:500(尽管它会在模拟过程中移动),并且我的所有对象都位于z = 0,且x和y值不同,所以我需要了解基于X,Y的世界假设将跟随鼠标位置的对象的az = 0。 这个问题看起来像一个类似的问题,但没有解决方案:在THREE.js中获取鼠标相对于3D空间的坐标 给定鼠标在屏幕上的位置,其范围为“左上= 0,0 |右下= window.innerWidth,window.innerHeight”,任何人都可以提供一种将Three.js对象移动到鼠标坐标的解决方案沿着z = 0?

6
如何停止requestAnimationFrame递归/循环?
我将Three.js与WebGL渲染器一起使用,以制作一个在play单击链接时全屏显示的游戏。对于动画,我使用requestAnimationFrame。 我这样启动它: self.animate = function() { self.camera.lookAt(self.scene.position); self.renderer.render(self.scene, self.camera); if (self.willAnimate) window.requestAnimationFrame(self.animate, self.renderer.domElement); } self.startAnimating = function() { self.willAnimate = true; self.animate(); } self.stopAnimating = function() { self.willAnimate = false; } 在需要时,我调用该startAnimating方法,是的,它确实按预期工作。但是,当我调用该stopAnimating函数时,事情就坏了!不过,没有报告的错误... 设置基本上是这样的: play页面上有一个链接 用户单击链接后,渲染器domElement应全屏显示,并且 的 startAnimating调用方法,渲染器开始渲染东西 单击转义后,我注册一个fullscreenchange事件并执行stopAnimating方法 该页面尝试退出全屏显示,但确实如此,但是整个文档完全空白 我很确定我的其他代码还可以,并且我以某种requestAnimationFrame错误的方式停止了。我的解释可能很烂,所以我将代码上传到了我的网站,您可以在这里看到它的发生:http : //banehq.com/Placeholdername/main.html。 这是我不尝试调用动画方法的版本,并且全屏输入和输出均可使用:http : //banehq.com/Correct/Placeholdername/main.html。 第一次play单击后,游戏将初始化并start执行其方法。全屏退出后,将stop执行游戏的方法。每隔一次play单击一次,游戏将仅执行其start方法,因为无需再次对其进行初始化。 外观如下: var playLinkHasBeenClicked = …

1
如何使纹理始终面对相机..?
更新5 创建了另一个小提琴以显示预期的外观。添加了不可见的穹顶和魔方相机,并使用了环境贴图;就我而言,由于已经提到的原因,不应使用这些技术。 显示代码段 var MatcapTransformer = function(uvs, face) { for (var i = uvs.length; i-- > 0;) { uvs[i].x = face.vertexNormals[i].x * 0.5 + 0.5; uvs[i].y = face.vertexNormals[i].y * 0.5 + 0.5; } }; var TransformUv = function(geometry, xformer) { // The first argument is also used as an array …
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.