キャッシュ関係であることはわかるのですが…
hoge.html
<script src="/javascripts/three.min.js" type="text/javascript"></script>
<script src="/javascripts/three/EditorControls.js" type="text/javascript"></script>
<div id="canvas-frame"></div>
<script>
var ModelRender = function(texture, scene) {
this.scene = scene;
this.texture = texture;
this.boxes = [];
this.addBox = function(boxSize, boxPos, texPos) {
var box = new ModelBox(boxSize, boxPos, texPos, true, this);
this.boxes.push(box);
return box;
};
this.addLine = function(a,b,color) {
var geometry = new THREE.Geometry();
geometry.vertices.push(a);
geometry.vertices.push(b);
var material = new THREE.LineBasicMaterial({color: color});
var line = new THREE.Line(geometry, material);
this.scene.add(line);
};
this.addLine(new THREE.Vector3(0,0,0),new THREE.Vector3(200,0,0),0xff0000);
this.addLine(new THREE.Vector3(0,0,0),new THREE.Vector3(0,200,0),0x00ff00);
this.addLine(new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,200),0x0000ff);
};
var ModelBox = function(boxSize, boxPos, texPos, transparent, render) {
this.render = render;
this.texture = this.render.texture.clone();
this.texture.needsUpdate = true;
this.material = new THREE.MeshPhongMaterial({ map:this.texture });
this.material.transparent = transparent;
this.geometry = new THREE.CubeGeometry(boxSize.x, boxSize.y, boxSize.z, 0, 0, 0);
this.mesh = new THREE.Mesh(this.geometry, this.material);
this.render.scene.add(this.mesh);
};
// (1)レンダラの初期化
var renderer = new THREE.WebGLRenderer({ antialias:true });
renderer.setSize(500, 500);
renderer.setClearColor( new THREE.Color(0x000000) );
document.getElementById('canvas-frame').appendChild(renderer.domElement);
// (2)シーンの作成
var scene = new THREE.Scene();
// (3)カメラの作成
var camera = new THREE.PerspectiveCamera(15, 500 / 500);
camera.position = new THREE.Vector3(0, 0, 8);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);
// (4)ライトの作成
var ambient = new THREE.AmbientLight(0xffffff);
scene.add(ambient);
// (5)表示する物体の作成
var texture = THREE.ImageUtils.loadTexture('/images/char.png')
texture.magFilter = THREE.NearestFilter;
texture.minFilter = THREE.NearestFilter;
var modelRender = new ModelRender(texture, scene);
modelRender.addBox({x:1, y:1, z:1}, 0, 0);
var controls = new THREE.EditorControls(camera, renderer.domElement);
controls.pan = function(){};
// (6)レンダリング
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
renderer.render(scene, camera);
console.log("render")
};
animate();
</script>
よろしくおねがいします