Hello everyone!
I have a three.js 8th Wall app. And I try to make a loaded to the scene GLTF model look more realistic. I do not use any three.js lights only an environment map. Eventually slightly metal materials of the GLTF model look missing any impact of an environment map. Otherwise, greatly metal materials look good.
Is there anything blocking usage of environment maps with three.js 8th Wall apps?
Please reference the sample project here:
Seems to be nothing blocking. And an issue was related to using of an outdated version of three.js
It would be great to update docs with a current three.js version. At least this one three.js: Face Effects Template | 8th Wall | 8th Wall. Not sure who Iām supposed to asking for it
Thank you for response. But I guess a real time feature is not exactly what I was looking for
You can use very similar logic to create a static cubemap. For example
// Define an 8th Wall XR Camera Pipeline Module that adds a cube to a threejs scene on startup.
export const initScenePipelineModule = () => {
let renderer_ = null
const camTexture_ = new THREE.Texture()
const loader = new THREE.GLTFLoader()
const cubeTextureLoader = new THREE.CubeTextureLoader()
const cubeTexture = cubeTextureLoader.load([
require('./assets/posx.jpg'), // PositiveX
require('./assets/negx.jpg'), // NegativeX
require('./assets/posy.jpg'), // PositiveY
require('./assets/negy.jpg'), // NegativeY
require('./assets/posz.jpg'), // PositiveZ
require('./assets/negz.jpg'), // NegativeZ
])
// Populates a cube into an XR scene and sets the initial camera position.
const initXrScene = ({scene, camera, renderer}) => {
// Enable shadows in the renderer.
renderer.shadowMap.enabled = true
renderer.outputEncoding = THREE.sRGBEncoding
// Add some light to the scene.
const directionalLight = new THREE.DirectionalLight(0xffffff, 1)
directionalLight.position.set(0, 10, 0)
directionalLight.castShadow = true
scene.add(directionalLight)
// Add some light to the scene.
const ambientLight = new THREE.AmbientLight(0xffffff, 1)
scene.add(ambientLight)
// GLTF Model
loader.load(
require('./assets/jini-ball.glb'),
(gltf) => {
gltf.scene.traverse((o) => {
if (o.isMesh) {
o.material.envMap = cubeTexture
o.castShadow = true
}
})
gltf.scene.position.set(0, 0.5, 0)
gltf.scene.scale.set(3, 3, 3)
scene.add(gltf.scene)
}
)
// Add a plane that can receive shadows.
const planeGeometry = new THREE.PlaneGeometry(2000, 2000)
planeGeometry.rotateX(-Math.PI / 2)
const planeMaterial = new THREE.ShadowMaterial()
planeMaterial.opacity = 0.5
const plane = new THREE.Mesh(planeGeometry, planeMaterial)
plane.receiveShadow = true
scene.add(plane)
// Set the initial camera position relative to the scene we just laid out. This must be at a
// height greater than y=0.
camera.position.set(0, 2, 2)
}
// Return a camera pipeline module that adds scene elements on start.
return {
// Camera pipeline modules need a name. It can be whatever you want but must be unique within
// your app.
name: 'threejsinitscene',
// onStart is called once when the camera feed begins. In this case, we need to wait for the
// XR8.Threejs scene to be ready before we can access it to add content. It was created in
// XR8.Threejs.pipelineModule()'s onStart method.
onStart: ({canvas}) => {
const {scene, camera, renderer} = XR8.Threejs.xrScene() // Get the 3js scene from XR8.Threejs
renderer_ = renderer
initXrScene({scene, camera, renderer}) // Add objects set the starting camera position.
// Sync the xr controller's 6DoF position and camera paremeters with our scene.
XR8.XrController.updateCameraProjectionMatrix(
{origin: camera.position, facing: camera.quaternion}
)
// prevent scroll/pinch gestures on canvas
canvas.addEventListener('touchmove', (event) => {
event.preventDefault()
})
// Recenter content when the canvas is tapped.
canvas.addEventListener(
'touchstart', (e) => {
e.touches.length === 1 && XR8.XrController.recenter()
}, true
)
},
onProcessCpu: ({frameStartResult}) => {
const {cameraTexture} = frameStartResult
// force initialization
const {scene, camera, renderer} = XR8.Threejs.xrScene() // Get the 3js scene from XR8.Threejs
const texProps = renderer.properties.get(camTexture_)
texProps.__webglTexture = cameraTexture
},
}
Then upload these files for cubemap
and these 3 as well. So 6 total
This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.