Javascript 初始渲染帧后，Three.js程序纹理消失
我正在使用three.js并尝试创建程序纹理，该纹理可以存储，然后在以后的会话中应用于对象 理想情况下，我只想创建这些纹理一次 我希望能够从现有的资源采样，以创建新的纹理 在three.js示例中，显示了一个版本，其中纹理每帧都会重新渲染 我在这里创建了一个我希望实现的示例： 不幸的是，为了实现这一点，我必须在每一帧重新渲染纹理 有没有一种方法可以执行此渲染，使纹理在多个帧上保持不变，直到我告诉它释放为止？来源于我的主程序如下Javascript 初始渲染帧后，Three.js程序纹理消失,javascript,three.js,webgl,textures,procedural,Javascript,Three.js,Webgl,Textures,Procedural,我正在使用three.js并尝试创建程序纹理，该纹理可以存储，然后在以后的会话中应用于对象 理想情况下，我只想创建这些纹理一次 我希望能够从现有的资源采样，以创建新的纹理 在three.js示例中，显示了一个版本，其中纹理每帧都会重新渲染 我在这里创建了一个我希望实现的示例： 不幸的是，为了实现这一点，我必须在每一帧重新渲染纹理 有没有一种方法可以执行此渲染，使纹理在多个帧上保持不变，直到我告诉它释放为止？来源于我的主程序如下 <html> <head>
<html>
<head>
<title>Render Test</title>
</head>
<style>
#mycontainer {
background: #000;
width: 800px;
height: 600px;
}
</style>
<body>
<div id="mycontainer"></div>
</body>
<script src="js/three.min.js"></script>
<script src="js/TrackballControls.js"></script>
<script src="js/stats.min.js"></script>
<script src="js/PlaneGeomUV.js"></script>
<script type="text/javascript">
var Renderer, Container, Scene, Camera, Quad1, Quad2, Plane, MaterialRTT, TextureRTT, LightAmb;
var SceneRTT, CameraRTT, Q1RTT, Q2RTT, Q3RTT, Q4RTT, MaterialFromFile, TextureFromFile;
var isRenderingTex = true;
var WidthWin = 800;
var HeightWin = 640;
var WidthTile = 428;
var HeightTile = 683;
Init();
Animate();
function Init(){
var CAngle = 45;
var CAspect = WidthWin / HeightWin;
var CNearCut = 0.1;
var CFarCut = 10000;
// Set up the main rendering object and attach it to an element on the page
Renderer = new THREE.WebGLRenderer();
Renderer.setSize( WidthWin, HeightWin );
Container = document.getElementById( "mycontainer" );
Container.appendChild( Renderer.domElement );
// Set up the textures and materials for rendering
TextureFromFile = THREE.ImageUtils.loadTexture( "Assets/Map_Tiles.png" );
TextureRTT = MakeTex( Renderer, TextureFromFile, WidthTile, HeightTile );
MaterialFromFile = new THREE.MeshBasicMaterial( { color: 0xffffff, map: TextureFromFile } );
MaterialRTT = new THREE.MeshBasicMaterial( { color: 0xffffff, map: TextureRTT } );
MaterialFromFile.side = THREE.DoubleSide;
MaterialRTT.side = THREE.DoubleSide;
// Set up the main renderable scene
Scene = new THREE.Scene();
Plane = new THREE.PlaneGeometry( WidthTile, HeightTile );
Quad1 = new THREE.Mesh( Plane, MaterialFromFile );
Quad1.position.x = WidthTile*0.5;
Scene.add( Quad1 );
Quad2 = new THREE.Mesh( Plane, MaterialRTT );
Quad2.position.x = -WidthTile*0.5;
Scene.add( Quad2 );
LightAmb = new THREE.AmbientLight( 0xffffff );
Scene.add( LightAmb );
Camera = new THREE.PerspectiveCamera( CAngle, CAspect, CNearCut, CFarCut );
Camera.position.z = 1200;
Scene.add( Camera );
// Create controls using the TrackballControls library to easily manipulate our camera
Controls = new THREE.TrackballControls( Camera );
Controls.target = new THREE.Vector3( 0, 0, 0 );
Controls.rotateSpeed = 4.0;
Controls.zoomSpeed = 6.0;
Controls.panSpeed = 1.0;
Controls.noZoom = false;
Controls.noPan = false;
Controls.staticMoving = true;
Controls.dynamicDampingFactor = 0.3;
Controls.keys = [ 65, 83, 68 ];
// Add the Three.js stats object so we can track fps
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
Container.appendChild( stats.domElement );
}
function MakeTex( Renderer_in, Texture_in, Width_in, Height_in ){
var ParamsTex = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
var Tex_out = new THREE.WebGLRenderTarget( WidthWin, HeightWin, ParamsTex );
var tMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff, map: Texture_in } );
// Set up the scene for rendering to texture
SceneRTT = new THREE.Scene();
var tPlane = new THREE.PlaneGeometry( WidthTile*0.5, HeightTile*0.5 );
Q1RTT = new THREE.Mesh( tPlane, tMaterial );
Q1RTT.position.x = WidthTile*0.25;
Q1RTT.position.y = HeightTile*0.25;
SceneRTT.add( Q1RTT );
Q2RTT = new THREE.Mesh( tPlane, tMaterial );
Q2RTT.position.x = -WidthTile*0.25;
Q2RTT.position.y = HeightTile*0.25;
SceneRTT.add( Q2RTT );
Q3RTT = new THREE.Mesh( tPlane, tMaterial );
Q3RTT.position.x = -WidthTile*0.25;
Q3RTT.position.y = -HeightTile*0.25;
SceneRTT.add( Q3RTT );
Q4RTT = new THREE.Mesh( tPlane, tMaterial );
Q4RTT.position.x = WidthTile*0.25;
Q4RTT.position.y = -HeightTile*0.25;
SceneRTT.add( Q4RTT );
tLightAmb = new THREE.AmbientLight( 0xffffff );
SceneRTT.add( tLightAmb );
CameraRTT = new THREE.OrthographicCamera( -Width_in / 2, Width_in / 2, Height_in / 2, -Height_in / 2, 0.1, 10000 );
CameraRTT.position.z = 600;
SceneRTT.add( CameraRTT );
//Renderer.clear();
//Renderer.render( SceneRTT, CameraRTT, Tex_out, true );
return Tex_out;
}
function Animate(){
requestAnimationFrame( Animate );
Controls.update();
stats.update();
Render();
}
function Render(){
Renderer.clear();
if( isRenderingTex ){
Renderer.render( SceneRTT, CameraRTT, TextureRTT, true );
//isRenderingTex = false;
}
Renderer.render( Scene, Camera );
}
</script>
</html>
渲染测试
#霉菌容器{
背景：#000；
宽度：800px；
高度：600px；
}
var渲染器、容器、场景、摄影机、Quad1、Quad2、平面、材质RTT、纹理RTT、LightAmb；
var SceneRTT、CameraRTT、Q1RTT、Q2RTT、Q3RTT、Q4RTT、MaterialFromFile、TextureFromFile；
var isRenderingTex=真；
var=800；
var HeightWin=640；
var=428；
var-HeightTile=683；
Init（）；
制作动画（）；
函数Init（）{
var-CAngle=45；
var CAspect=宽度/高度；
var CNearCut=0.1；
var CFarCut=10000；
//设置主呈现对象并将其附加到页面上的元素
Renderer=new THREE.WebGLRenderer（）；
设置大小（WidthWin、HeightWin）；
容器=document.getElementById（“mycontainer”）；
Container.appendChild（Renderer.doElement）；
//设置用于渲染的纹理和材质
TextureFromFile=THREE.ImageUtils.loadTexture（“Assets/Map_Tiles.png”）；
TextureRTT=MakeTex（渲染器、TextureFromFile、WidthTile、HeightTile）；
MaterialFromFile=new THREE.MeshBasicMaterial（{color:0xffffff，map:TextureFromFile}）；
MaterialRTT=new THREE.MeshBasicMaterial（{color:0xffffff，map:TextureRTT}）；
MaterialFromFile.side=3.DoubleSide；
材料rtt.side=3.DoubleSide；
//设置主可渲染场景
场景=新的三个。场景（）；
平面=新的三个平面几何图形（宽度平铺、高度平铺）；
Quad1=新的三点网格（平面、材质文件）；
Quad1.position.x=WidthTile*0.5；
场景。添加（1）；
Quad2=新的三个网格（平面、材料RTT）；
Quad2.position.x=-WidthTile*0.5；
场景。添加（四元2）；
LightAmb=新的三个环境光（0xffffff）；
场景。添加（LightAmb）；
摄像机=新的三个透视摄像机（CAngle、CAspect、CNearCut、CFarCut）；
摄像机位置z=1200；
场景。添加（摄影机）；
//使用TrackballControls库创建控件，以便轻松操作我们的相机
控件=新的三个轨迹球控件（摄像头）；
Controls.target=新的三个向量3（0,0,0）；
Controls.rotateSpeed=4.0；
Controls.zoomSpeed=6.0；
Controls.panSpeed=1.0；
Controls.noZoom=false；
Controls.noPan=false；
Controls.staticMoving=true；
Controls.dynamicDampingFactor=0.3；
Controls.keys=[65,83,68]；
//添加Three.js stats对象，以便跟踪fps
统计数据=新统计数据（）；
stats.domElement.style.position='绝对'；
stats.domElement.style.top='0px'；
Container.appendChild（stats.domeElement）；
}
函数MakeTex（渲染器英寸、纹理英寸、宽度英寸、高度英寸）{
var ParamsTex={minFilter:THREE.LinearFilter，magFilter:THREE.LinearFilter，format:THREE.RGBFormat，stencilBuffer:false}；
var Tex_out=new THREE.WebGLRenderTarget（WidthWin、HeightWin、ParamsTex）；
var tMaterial=new THREE.MeshBasicMaterial（{color:0xffffff，map:Texture_in}）；
//设置场景以渲染为纹理
scenert=new-THREE.Scene（）；
var t平面=新的三个平面几何图形（宽砖*0.5，高砖*0.5）；
Q1RTT=新的三网格（T平面、T材料）；
Q1RTT.position.x=WidthTile*0.25；
Q1RTT.位置y=高度瓦片*0.25；
场景添加（Q1RTT）；
Q2RTT=新的三网格（T平面、T材料）；
Q2RTT.position.x=-WidthTile*0.25；
Q2RTT.position.y=高度瓦*0.25；
场景添加（Q2RTT）；
Q3RTT=新的三网格（t平面，t材料）；
Q3RTT.position.x=-WidthTile*0.25；
Q3RTT.position.y=-HeightTile*0.25；
场景添加（Q3RTT）；
Q4RTT=新的三网格（t平面，t材料）；
Q4RTT.position.x=宽度瓦片*0.25；
Q4RTT.position.y=-HeightTile*0.25；
场景添加（Q4RTT）；
tLightAmb=新的三个环境光（0xffffff）；
气味添加（tLightAmb）；
cameraratt=新的三轴正交摄影机（-Width_in/2，Width_in/2，Height_in/2，-Height_in/2，0.1，10000）；
摄像机位置z=600；
场景添加（CameraRTT）；
//.clear（）；
//render.render（scenert、CameraRTT、Tex_out、true）；
返回Tex_out；
}
函数Animate（）{
请求动画帧（动画）；
控件更新（）；
stats.update（）；
Render（）；
}
函数Render（）{