Cube Shader problem
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
<div id="stats"></div>
CSS
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
JavaScript
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.121.1/build/three.module.js';
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.121.1/examples/jsm/controls/OrbitControls.js';
import Stats from 'https://cdn.jsdelivr.net/npm/three@0.121.1/examples/jsm/libs/stats.module.js';
var renderer, scene, camera, controls, container, stats;
init();
animate();
function init() {
stats = new Stats();
container = document.getElementById('stats');
container.appendChild(stats.domElement);
console.log(THREE.REVISION);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 10, 100000);
camera.position.set(-400, 200, 400);
controls = new OrbitControls(camera, renderer.domElement);
scene.add(new THREE.HemisphereLight(0xffffff, 0x080808, 1));
var loader = new THREE.CubeTextureLoader();
loader.setPath( 'https://threejs.org/examples/textures/cube/Park3Med/' );
var envMap = loader.load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
let objectMaterial = new THREE.MeshStandardMaterial( { envMap: envMap } );
scene.add(new THREE.Mesh(new THREE.CubeGeometry(50, 50, 50), objectMaterial));
let roomShader = THREE.ShaderLib.cube;
let roomMaterial = new THREE.ShaderMaterial( {
fragmentShader: roomShader.fragmentShader,
vertexShader: roomShader.vertexShader,
uniforms: THREE.UniformsUtils.clone( roomShader.uniforms ),
depthWrite: false,
depthTest: false,
fog: false,
side: THREE.BackSide
});
Object.defineProperty( roomMaterial, 'envMap', {
get: function () {
return this.uniforms.envMap.value;
}
} );
roomMaterial.uniforms.envMap.value = envMap;
let roomGeometry = new THREE.BoxBufferGeometry(50000, 50000, 50000);
let room = new...