LoginSignup
0
1

More than 5 years have passed since last update.

three.jsでテクスチャがうまくロードできないのですが、どう直せばいいでしょう?

Posted at

キャッシュ関係であることはわかるのですが…

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>

よろしくおねがいします

0
1
8

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1