Result is below.
main.js 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566window.onload =
function
() {
// Canvas size
var
width = 640;
var
height = 480;
// Cube Size
var
geometry =
new
THREE.CubeGeometry(100, 100, 100);
// Cube Material Info(not metal)
var
texture =
new
THREE.ImageUtils.loadTexture(
'./img/tex.jpg'
);
var
material =
new
THREE.MeshLambertMaterial({map: texture});
// Create Cube
var
mesh =
new
THREE.Mesh(geometry, material);
// Rotate Cube
mesh.rotation = {x: 0.5, y: 0.5, z: 0.0};
// Setting Camera
var
camera =
new
THREE.PerspectiveCamera(40, width / height, 1, 1000);
// Camera Position
camera.position.z = -400;
// Camera Angle
camera.lookAt(mesh.position);
// Create Space
var
scene =
new
THREE.Scene();
// Add cube to Space
scene.add(mesh);
// Create Light element
var
light =
new
THREE.DirectionalLight(0xffffff, 1.5);
// Light element position
light.position = {x: 0, y: 0.2, z: -1};
// Add light element to the space
scene.add(light);
// Create renderer
var
renderer =
new
THREE.WebGLRenderer();
// Set canvas size
renderer.setSize(width, height);
// Set canvas to div element
document.getElementById(
'canvas'
).appendChild(renderer.domElement);
var
mousedown =
false
;
renderer.domElement.addEventListener(
'mousedown'
,
function
(e) {
mousedown =
true
;
prevPosition = {x: e.pageX, y: e.pageY};
},
false
);
renderer.domElement.addEventListener(
'mousemove'
,
function
(e) {
if
(!mousedown)
return
;
moveDistance = {x: prevPosition.x - e.pageX, y: prevPosition.y - e.pageY};
mesh.rotation.x += moveDistance.y * 0.01;
mesh.rotation.y -= moveDistance.x * 0.01;
prevPosition = {x: e.pageX, y: e.pageY};
render();
},
false
);
renderer.domElement.addEventListener(
'mouseup'
,
function
(e) {
mousedown =
false
;
},
false
);
function
render(){
renderer.render(scene, camera);
}
}
It’s interesting. Please try drag. The cube will rotate. I’ll make something with it in the future.
Demo