JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/stats.js/r17/build/stats.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<span>Pick NPOT texture eg 1600 x 1200 to start :</span>
<br/>
<input type="button" id="button" value="Disable Mipmaping" />
<br/>
CSS
body {
padding: 0;
margin: 0;
background-color: white;
}
JavaScript
var texture;
var camera, scene, renderer, mesh, material;
var input = document.createElement('input');
input.type = 'file';
input.addEventListener('change', function(event) {
loadFile(event.target.files[0]);
});
var loadFile = function(file) {
if (file.type.match('image.*')) {
var reader = new FileReader();
reader.addEventListener('load', function(event) {
var image = document.createElement('img');
image.addEventListener('load', function(event) {
texture = new THREE.Texture(this);
texture.sourceFile = file.name;
texture.needsUpdate = true;
material.map = texture;
material.needsUpdate = true;
}, false);
image.src = event.target.result;
}, false);
reader.readAsDataURL(file);
}
};
$('#button').click(function() {
if(texture) {
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.needsUpdate = true;
}
});
document.body.appendChild(input);
init();
animate();
//init();
//animate();
function init() {
// Renderer.
renderer = new THREE.WebGLRenderer();
//renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
// Add renderer to page
document.body.appendChild(renderer.domElement);
// Create camera.
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 600;
// Create scene.
scene = new THREE.Scene();
// Create material
material = new THREE.MeshPhongMaterial({
//map: texture
});
// Create cube and add to scene.
var geometry = new THREE.BoxGeometry(200, 200, 200);
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// Create ambient light and add to scene.
var light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);
// Create directional light and add to scene.
var directionalLight = new THREE.DirectionalLight(0xffffff);
...