CubeCamera

Description

The CubeCamera object, can be used to create more realistic reflections on volumetric objects such as spheres, cubes and other objects.

The steps to use the THREE.CubeCamera,

• Create a THREE.WebGLCubeRenderTarget
• Create a THREE.CubeCamera
• Create a Material that uses the CubeRenderTargets Texture
• Create a Mesh
• Add the Material to the Mesh
• Add the CubeCamera to the Mesh so that its position always reflects the correct mesh it is projecting from.
• Add the Mesh to the Scene
• In the Render loop, update the CubeCamera. Hide its parent mesh, in case the parent mesh gets picked up in its own render pass.

Code

./src/server/server.ts

import express from "express"
import path from "path"
import http from "http"

const port: number = 3000

class App {
    private server: http.Server
    private port: number

    constructor(port: number) {
        this.port = port
        const app = express()
        app.use(express.static(path.join(__dirname, '../client')))
        app.use('/build/three.module.js', express.static(path.join(__dirname, '../../node_modules/three/build/three.module.js')))
        app.use('/jsm/controls/OrbitControls', express.static(path.join(__dirname, '../../node_modules/three/examples/jsm/controls/OrbitControls.js')))
        app.use('/jsm/libs/stats.module', express.static(path.join(__dirname, '../../node_modules/three/examples/jsm/libs/stats.module.js')))

        this.server = new http.Server(app);
    }

    public Start() {
        this.server.listen(this.port, () => {
            console.log( `Server listening on port ${this.port}.` )
        })
    }
}

new App(port).Start()

./src/client/client.ts

import * as THREE from '/build/three.module.js'
import { OrbitControls } from '/jsm/controls/OrbitControls'
import Stats from '/jsm/libs/stats.module'

const scene: THREE.Scene = new THREE.Scene()
scene.background = new THREE.Color(0x87ceeb)

const ambientLight = new THREE.AmbientLight(0xaaaaaa);
scene.add(ambientLight);

const light1 = new THREE.PointLight();
light1.position.set(10, 10, 10)
light1.castShadow = true
light1.shadow.bias = -0.0002
light1.shadow.mapSize.height = 1024
light1.shadow.mapSize.width = 1024
scene.add(light1);

const camera: THREE.PerspectiveCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 100)
camera.position.set(1.75, 1.75, 3.5)

const renderer: THREE.WebGLRenderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.shadowMap.enabled = true
document.body.appendChild(renderer.domElement)

const orbitControls = new OrbitControls(camera, renderer.domElement)
orbitControls.dampingFactor = .1
orbitControls.enableDamping = true

const planeGeometry: THREE.PlaneGeometry = new THREE.PlaneGeometry(25, 25)
const texture = new THREE.TextureLoader().load("img/grid.png")
const plane: THREE.Mesh = new THREE.Mesh(planeGeometry, new THREE.MeshPhongMaterial({ map: texture }))
plane.rotateX(-Math.PI / 2)
plane.receiveShadow = true
scene.add(plane)

window.addEventListener('resize', onWindowResize, false)
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
    render()
}

const cubeRenderTarget1: THREE.WebGLCubeRenderTarget = new THREE.WebGLCubeRenderTarget(128, { format: THREE.RGBFormat, generateMipmaps: true, minFilter: THREE.LinearMipmapLinearFilter });
const cubeRenderTarget2: THREE.WebGLCubeRenderTarget = new THREE.WebGLCubeRenderTarget(128, { format: THREE.RGBFormat, generateMipmaps: true, minFilter: THREE.LinearMipmapLinearFilter });
const cubeRenderTarget3: THREE.WebGLCubeRenderTarget = new THREE.WebGLCubeRenderTarget(128, { format: THREE.RGBFormat, generateMipmaps: true, minFilter: THREE.LinearMipmapLinearFilter });
const cubeCamera1: THREE.CubeCamera = new THREE.CubeCamera(.1, 1000, cubeRenderTarget1);
const cubeCamera2: THREE.CubeCamera = new THREE.CubeCamera(.1, 1000, cubeRenderTarget2);
const cubeCamera3: THREE.CubeCamera = new THREE.CubeCamera(.1, 1000, cubeRenderTarget3);

const pivot1 = new THREE.Object3D();
scene.add(pivot1);
const pivot2 = new THREE.Object3D();
scene.add(pivot2);
const pivot3 = new THREE.Object3D();
scene.add(pivot3);

const material1 = new THREE.MeshPhongMaterial({
    shininess: 100,
    color: 0xffffff,
    specular: 0xffaa00,
    envMap: cubeRenderTarget1.texture
});
const material2 = new THREE.MeshPhongMaterial({
    shininess: 100,
    color: 0xffffff,
    specular: 0xffaa00,
    envMap: cubeRenderTarget2.texture
});
const material3 = new THREE.MeshPhongMaterial({
    shininess: 100,
    color: 0xffffff,
    specular: 0xffaa00,
    envMap: cubeRenderTarget3.texture
});

const ball1 = new THREE.Mesh(new THREE.SphereGeometry(1, 32, 32), material1);
ball1.position.set(1, 1.1, 0);
ball1.castShadow = true;
ball1.receiveShadow = true;
ball1.add(cubeCamera1);
pivot1.add(ball1);

const ball2 = new THREE.Mesh(new THREE.SphereGeometry(1, 32, 32), material2);
ball2.position.set(3.1, 1.1, 0);
ball2.castShadow = true;
ball2.receiveShadow = true;
ball2.add(cubeCamera2);
pivot2.add(ball2);

const ball3 = new THREE.Mesh(new THREE.SphereGeometry(1, 32, 32), material3);
ball3.position.set(5.2, 1.1, 0);
ball3.castShadow = true;
ball3.receiveShadow = true;
ball3.add(cubeCamera3);
pivot3.add(ball3);




const stats = Stats()
document.body.appendChild(stats.dom)

const clock: THREE.Clock = new THREE.Clock()

var animate = function () {
    requestAnimationFrame(animate)

    const delta = clock.getDelta();
    ball1.rotateY(-0.2 * delta);
    pivot1.rotateY(0.2 * delta);
    ball2.rotateY(-0.3 * delta);
    pivot2.rotateY(0.3 * delta);
    ball3.rotateY(-0.4 * delta);
    pivot3.rotateY(0.4 * delta);

    orbitControls.update()

    render()

    stats.update()
};

function render() {
    ball1.visible = false
    cubeCamera1.update(renderer, scene);
    ball1.visible = true
    ball2.visible = false
    cubeCamera2.update(renderer, scene);
    ball2.visible = true
    ball3.visible = false
    cubeCamera3.update(renderer, scene);
    ball3.visible = true

    renderer.render(scene, camera)
}
animate();