Question

我有一个从three.js / editor导出的基本json场景。我想在这个场景中为一个对象添加一个重复的纹理包裹，但我不知道怎么做，因为我发现的唯一例子是在对象的创建中添加了包裹。

我已经尝试访问纹理并给它一个换行，但我想我可能需要从JavaScript中添加一个纹理然后声明纹理换行，而不是尝试将它添加到已加载的纹理中。 / p>

<script>
    var camera, scene, renderer;
    var mesh;
    init();
    animate();
    function init() {
        camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
        camera.position.z = 400;
        scene = new THREE.Scene();

        var objectLoader = new THREE.ObjectLoader();

        objectLoader.load( "models/cube.json", function ( obj ) {

            scene.add( obj )

            obj.traverse(function(child) {
                if (child instanceof THREE.Mesh) {
                    child.castShadow = true;
                    child.receiveShadow = true;
                }
            });

                obj.name = "cube";
                obj.position.set(0,0,0);
                obj.scale.set(200,200,200);
            });

            renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );
            //
            window.addEventListener( 'resize', onWindowResize, false );

            while (scene.getObjectByName('Box 1')){
                var texture = scene.getObjectByName('Box 1').material;
                texture.wrapS = THREE.RepeatWrapping;
                texture.wrapT = THREE.RepeatWrapping;
                texture.repeat.set( 2, 2 );
            }
        }
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
                renderer.setSize( window.innerWidth, window.innerHeight );
        }
        function animate() {
            requestAnimationFrame( animate );

            if (scene.getObjectByName('Box 1')  ){
                scene.getObjectByName('Box 1').material.map.offset.x += 0.001;
            }           
            renderer.render( scene, camera );
        }
</script>

Answer 1

您需要设置纹理/贴图的包装和重复属性，而不是材质。文档还说，如果换行设置更改，将needsUpdate设置为true很重要。并且您正在尝试在加载json之前设置属性（在while循环中？）。您应该在load回调中执行此操作。

objectLoader.load( "models/cube.json", function ( obj ) {

    scene.add( obj )

    obj.traverse(function(child) {
        if (child instanceof THREE.Mesh) {
            child.castShadow = true;
            child.receiveShadow = true;
        }
    });

    obj.name = "cube";
    obj.position.set(0,0,0);
    obj.scale.set(200,200,200);

    var box1 = scene.getObjectByName('Box 1');
    if (box1) {
        var texture = box1.material.map;
        texture.wrapS = THREE.RepeatWrapping;
        texture.wrapT = THREE.RepeatWrapping;
        texture.repeat.set( 2, 2 );
        texture.needsUpdate = true;
    }
});

Three.js将重复纹理应用于JSON场景对象

1 个答案: