个人中心
文章发布
退出
作者热门文章
- iOS/Objective-C 元类和类别
- objective-c - -1001 错误，当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
25
4
我想开始使用 EffectComposer 对我的渲染进行一些后处理，但我无法获得最基本的设置来渲染到屏幕上。它只是保持空白。我一定是在看什么东西。有人有想法吗？
<!doctype html>
<html>
<head>
<title>game</title>
<style type="text/css">
html, body {
margin: 0px;
width: 100%;
height: 100%;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="viewport"></canvas>
<script type="text/javascript" src="three.js"></script>
<script type="text/javascript" src="CopyShader.js"></script>
<script type="text/javascript" src="ShaderPass.js"></script>
<script type="text/javascript" src="EffectComposer.js"></script>
<script type="text/javascript" src="RenderPass.js"></script>
<script type="text/javascript" src="MaskPass.js"></script>
<script type="text/javascript">
var width = document.body.clientWidth;
var height = document.body.clientHeight;
var canvas = document.querySelector('#viewport');
var renderer = new THREE.WebGLRenderer({canvas: canvas});
renderer.setSize(width, height);
var scene = new THREE.Scene();
var cube = new THREE.Mesh(
new THREE.CubeGeometry(30, 30, 30),
new THREE.MeshPhongMaterial({color: 0xFF0000}));
scene.add(cube);
var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
camera.position = new THREE.Vector3(60, 60, 60);
camera.lookAt(cube.position);
camera.updateMatrix();
scene.add(camera);
var pointLight = new THREE.PointLight(0xFFFFFF);
pointLight.position = new THREE.Vector3(100, 80, 20);
scene.add(pointLight);
var renderPass = new THREE.RenderPass(scene, camera);
renderPass.renderToScreen = true;
var composer = new THREE.EffectComposer(renderer);
composer.addPass(renderPass);
renderer.clear();
composer.render();
//renderer.render(scene, camera);
</script>
</body>
</html>
如果我取消注释最后一行，我会在屏幕上看到一些东西。
最佳答案
首先，EffectComposer 不是库的一部分——它是示例的一部分。所以它没有得到官方支持。
所以，是的，您必须“知道它在幕后是如何工作的。”
您可以通过添加额外的 CopyPass 来解决您的问题，如下所示:
var renderPass = new THREE.RenderPass( scene, camera );
var copyPass = new THREE.ShaderPass( THREE.CopyShader );
copyPass.renderToScreen = true;
var composer = new THREE.EffectComposer( renderer );
composer.addPass( renderPass );
composer.addPass( copyPass );
composer.render( 0.05 );
关于javascript - 无法让 three.js EffectComposer 工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13350084/
25
4
0
未创建大纲。我也尝试了 BloomFilter，它看起来和我没有添加任何过滤器一样。 这里可能是什么问题？ // in global scope const clock = new THREE.Clo
当使用来自three.js 的EffectComposer 时，原生抗锯齿功能似乎丢失了。渲染器设置为 antialiasing: true;然而，结果充满了笨拙的边缘。 我尝试使用 FXAA 着色器
我想要一个带有透明背景的 Threejs Canvas 。我正在创建一个这样的渲染器: # coffeescript r = new THREE.WebGLRenderer alpha: true 当
我是 three.js 的新手，我在实现以下效果时遇到了问题:渲染 2 个场景并将它们与混合着色器混合。第一个 TexturePass 没问题，但第二个像频闪仪一样闪烁。结果可以在这里看到:https
我一生都无法弄清楚出了什么问题(尤其是这两个 .js 文件没有文档记录)，但我已将 EffectComposer 和 BloomPass 包含在我的项目中，并尝试像这样调用它: parameters
我有一个渲染设置，在调整浏览器窗口大小时出现调整大小问题。 我渲染了两个场景，其中一个用于应用了后处理效果的对象。对于效果，我使用示例目录中的 THREE.EffectComposer 和着色器。 然
因此，我尝试使用 EffectComposer 动态屏蔽 UnrealBloomPass，但我得到了意想不到的结果。我不确定我是否在这里遗漏了一个关键概念，或者我是否应该尝试以不同的方式实现这一点。任
我正在尝试以某种方式组合纹理 channel 以保留 Alpha channel 。我已经尝试过或确信这一点。 渲染器将 alpha 设置为 true 渲染器具有许多不同的 setClearColor
我想开始使用 EffectComposer 对我的渲染进行一些后处理，但我无法获得最基本的设置来渲染到屏幕上。它只是保持空白。我一定是在看什么东西。有人有想法吗？ game
我最近创建了一个 Three.js 演示，它渲染一个场景，然后将视口(viewport)设置为窗口的较小部分，并从头顶摄像头渲染场景，创建迷你 map 样式效果；该代码位于: http://stemk
我正在处理的页面有 ajax 导航，所以当用户导航离开我使用 WebGL 的部分时，我停止我的 RequestAnimationFrame 循环，然后当用户重新访问页面时我重新运行所有 WebGL设置
这是我的代码: renderTargetParametersRGBA = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter,
我正在使用 three.js 中的 Composer 创建复杂场景。我想知道是否可以在具有不同 Composer 效果的两个场景之间切换。为了获得某种视角，我创建了一个示例，允许您在两个正常渲染的场景
我目前正在尝试设置 earlier post 中描述的技术我已经创建了。 ShaderPass 使用 readBuffer 中的纹理来填充 tDiffuse 制服。你可以在第 49 行 on gith
我是一名优秀的程序员,十分优秀！