Cube Shader problem
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.js"></script>
<div id="stats"></div>
CSS
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
JavaScript
/*
First test:
near line 60 -> comment out both lines applying texture to the objectMaterial
-> cuberoom shader will stop working
Second test:
change threejs reference from r120 to r121
-> cuberoom shader will not work wheter objectMaterial texture is set or not
*/
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, 1500);
camera.position.set(-400, 200, 400);
controls = new THREE.OrbitControls(camera, renderer.domElement);
scene.add(new THREE.HemisphereLight(0xffffff, 0x080808, 1));
let objectMaterial = new THREE.MeshStandardMaterial();
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: roomShader.uniforms,
depthWrite: false,
depthTest: false,
fog: false,
side: THREE.BackSide
});
let roomGeometry = new THREE.BoxBufferGeometry(50000, 2500, 50000);
let room = new THREE.Mesh(roomGeometry, roomMaterial);
room.position.set(0,800,0);
var loader = new THREE.CubeTextureLoader();
loader.setPath( 'https://threejs.org/examples/textures/cube/Park3Med/' );
loader.load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'], texture => {
roomMaterial.envMap = texture;
scene.add(room);
//1 Test: comment out these 2 lines -> room cube shader will stop working
objectMaterial.envMap =...