About TextureLoader and MeshPhongMaterial in three.js in JaveScript

I am trying to paste the image into the box with three.js in JaveScript, but the image does not stick and only the box is drawn.

<script src="three.min.js"></script>

abbreviation

var renderer = new THREE.WebGLRender();
render.setSize(waku.clientWidth, waku.clientHeight);
waku.appendChild(render.domElement);

varscene=new THREE.Scene();

/////// Camera
varcamera = new THREE. PerspectiveCamera (60, waku.clientWidth/waku.clientHeight, 0.1,1000);
camera.position.set(0,0,50);

////// Light source
var directionalLight = new THREE.DirectionalLight (0xffffff, 10);
directionalLight.position.set(0,0.7,0.7);
scene.add(directionalLight);

/////// Box
vartexture=new THREE.TextureLoader().load('./BRS_PUCHI_01.jpg');
varmaterial = new THREE.MeshPhongMaterial ({color:0xffffff, map:texture});
vargeometry=new THREE.CubeGeometry(30,30,30);
varmesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

render.render(scene, camera);

javascript php html

2022-09-30 17:11

1 Answers

Self-resolved.

Problem -
new THREE.TextureLoader().load is asynchronous

Modified -

////// Box
    var loader = new THREE.TextureLoader();
// load a resource
    loader.load(
        'BRS_PUCHI_01.jpg',

        function(texture){
            varmaterial = new THREE.MeshPhongMaterial ({color:0xffffff, map:texture});
            vargeometry=new THREE.CubeGeometry(30,30,30);
            varmesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);
            render.render(scene, camera);
        }
    );

2022-09-30 17:11

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656