使用一个three.js场景的rendertarget数据作为另一个场景的贴图输入

render scene as texture of a cube in another webgl renderer context

webgl, texture, share

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1221
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var camera, scene, renderer, geometry, material, mesh, light, lightHelper;

var scene2, cam2, renderer2, canvas2Tex

// var renderTarget

init();
animate();

function init() {

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);

scene2 = new THREE.Scene()
    cam2 = new THREE.PerspectiveCamera(50, 1 / 1, 0.1, 10000);
    cam2.position.z = 20
    innerObj = new THREE.Mesh(
        new THREE.PlaneGeometry(100, 100),
        new THREE.MeshBasicMaterial({
            color: 'green'
        })
    )
    scene2.add(innerObj)
    renderer2 = new THREE.WebGLRenderer()
    renderer2.setSize(512, 512)
        // renderTarget = new THREE.WebGLRenderTarget(512, 512)
        // renderer2.setRenderTarget()
    canvas2Tex = new THREE.CanvasTexture(renderer2.domElement)

geometry = new THREE.CubeGeometry(200, 200, 200);
    material = new THREE.MeshPhongMaterial({
        // map: renderTarget.texture,
        map: canvas2Tex
            // color: 'deeppink'
    });
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

light = new THREE.PointLight
    light.color = new THREE.Color('pink')
    light.position.x = 100
    light.position.z = 160
    scene.add(light)

lightHelper = new THREE.PointLightHelper(light, 10)
    scene.add(lightHelper)

renderer = new THREE.WebGLRenderer();
    resize()
    window.addEventListener('resize', resize)

document.body.appendChild(renderer.domElement);
    // document.body.appendChild(renderer2.domElement);

}

function resize() {

renderer.setPixelRatio(window.devicePixelRatio)
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()

}

function animate() {

requestAnimationFrame(animate);
    render();

}

function render() {

mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

// renderer.setRenderTarget(renderTarget)
    // renderer.render(scene2, cam2)
    // renderer.setRenderTarget(null)
    renderer2.render(scene2, cam2)

renderer.render(scene, camera);

}

编译

CSS

HTML

render scene as texture of a cube in another webgl renderer context

webgl, texture, share

编辑器支持Emmet

快捷键

render scene as texture of a cube in another webgl renderer context

webgl, texture, share

three.js使用renderTarget实现离屏渲染并输出为canvas预览图片

使用three.js和PlaneBufferGeometry构建的3d交互波浪背景动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：