JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.js"></script>
JavaScript
let camera, scene, renderer;
let meshPhong, meshShader;
function getEnvMap() {
const r = "https://threejs.org/examples/textures/cube/Bridge2/";
const urls = [r + "posx.jpg", r + "negx.jpg", r + "posy.jpg", r + "negy.jpg", r + "posz.jpg", r + "negz.jpg"];
textureCube = new THREE.CubeTextureLoader().load(urls);
textureCube.format = THREE.RGBFormat;
textureCube.mapping = THREE.CubeReflectionMapping;
textureCube.encoding = THREE.sRGBEncoding;
return textureCube;
}
function init() {
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.z = 1;
scene = new THREE.Scene();
light = new THREE.AmbientLight('#ffffff');
scene.add(light);
const envMap = getEnvMap();
const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
const materialPhong = new THREE.MeshPhongMaterial({
envMap,
color: '#aaaaaa',
});
const materialShader = new THREE.ShaderMaterial({
uniforms: THREE.UniformsUtils.clone(THREE.ShaderLib.phong.uniforms),
vertexShader: THREE.ShaderLib.phong.vertexShader,
fragmentShader: THREE.ShaderLib.phong.fragmentShader,
lights: true
});
materialShader.envMap = envMap;
materialShader.combine = THREE.MultiplyOperation;
materialShader.uniforms.envMap.value = envMap;
materialShader.uniforms.diffuse.value = new THREE.Color('#aaaaaa');
meshPhong = new THREE.Mesh(geometry, materialPhong);
meshPhong.position.setX(-0.5);
scene.add(meshPhong);
meshShader = new THREE.Mesh(geometry, materialShader);
meshShader.position.setX(0.5);
scene.add(meshShader);
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
meshPhong.rotation.x += 0.01;
meshPhong.rotation.y += 0.02;
meshShader.rotation.x += 0.01;
meshShader.rotation.y += 0.02;
renderer.render(scene,...