Question

我有一个用Blender制造的简单方形盘子。

我正在尝试向该对象添加简单的纹理。我尝试了很多在网上找到的教程和代码，但我无法实现

我的代码是

<html>

<style>
    body{
        margin: 0;
        overflow: hidden;
    }
</style>

<canvas id="myCanvas"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.min.js"></script>
<script src="http://threejs.org/examples/js/loaders/MTLLoader.js"></script>
<script src="http://threejs.org/examples/js/loaders/OBJLoader.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="UnpackDepthRGBAShader.js"></script>
<script src="ShadowMapViewer.js"></script>

<script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45 ,window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.set(0, 5, 14);
    var renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setClearColor(0xededed);
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    var loader = new THREE.TextureLoader();
    var texture = loader.load( "./2.jpg" );

    // it's necessary to apply these settings in order to correctly display the texture on a shape geometry

    //texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    texture.repeat.set( 0.05, 0.05 );

    var controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.25;
    controls.enableZoom = true;

    var keyLight = new THREE.DirectionalLight(new THREE.Color('hsl(30, 100%, 75%)'), 1.0);
    keyLight.position.set(-100, 0, 100);

    var fillLight = new THREE.DirectionalLight(new THREE.Color('hsl(240, 100%, 75%)'), 0.75);
    fillLight.position.set(100, 0, 100);

    var backLight = new THREE.DirectionalLight(0xffffff, 1.0);
    backLight.position.set(100, 0, -100).normalize();


    var manager = new THREE.LoadingManager();
    manager.onProgress = function ( item, loaded, total ) {
        console.log( item, loaded, total );
    };
    var textureLoader = new THREE.TextureLoader( manager );
    var textureOBJ = textureLoader.load( './1.jpg' );

    var onProgress = function ( xhr ) {
                if ( xhr.lengthComputable ) {
                    var percentComplete = xhr.loaded / xhr.total * 100;
                    console.log( Math.round(percentComplete, 2) + '% downloaded' );
                }
            };

    var onError = function ( xhr ) {
        console.log(xhr);
    };



    var roundedRectShape = new THREE.Shape();

    ( function roundedRect( ctx, x, y, width, height, radius ) {

        ctx.moveTo( x, y + radius );
        ctx.lineTo( x, y + height - radius );
        ctx.quadraticCurveTo( x, y + height, x + radius, y + height );
        ctx.lineTo( x + width - radius, y + height );
        ctx.quadraticCurveTo( x + width, y + height, x + width, y + height - radius );
        ctx.lineTo( x + width, y + radius );
        ctx.quadraticCurveTo( x + width, y, x + width - radius, y );
        ctx.lineTo( x + radius, y );
        ctx.quadraticCurveTo( x, y, x, y + radius );

    } )( roundedRectShape, 0, 0, 18.5, 18.5, 2 );



    addShape( roundedRectShape, 0x008000, -1.41,  0.5, 1, Math.PI / -2, 0, 0, 0.1 );


    scene.add(keyLight);
    scene.add(fillLight);
    scene.add(backLight);


    var loader = new THREE.OBJLoader( manager );
            loader.load( './3.obj', function ( object ) {
                object.traverse( function ( child ) {
                    if ( child instanceof THREE.Mesh ) {
                        child.material.map = textureOBJ;
                    }
                } );
                object.position.y = -0.01;
                object.position.x = 0;
                object.position.z = 0;
                scene.add( object );
            }, onProgress, onError );



    controls.update();

    var animate = function () {
        requestAnimationFrame( animate );
        renderer.render(scene, camera);
    };

    animate();


function addShape( shape, color, x, y, z, rx, ry, rz, s ) {

    var geometry = new THREE.ShapeBufferGeometry( shape );

    var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { side: THREE.DoubleSide, map: texture } ) );
    mesh.position.set( x, y, z );
    mesh.rotation.set( rx, ry, rz );
    mesh.scale.set( s, s, s );
    scene.add( mesh );

}

</script>

我正在尝试添加此简单的 png作为纹理。有人可以帮助吗？

标牌-示例-> http://37.59.53.90:8080/test1.html

我设法创建了一个带有纹理的杯子-> http://37.59.53.90:8080/test.html

Answer 1

您似乎错误地使用了directory/folder: package.json { "devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "webpack": "^4.16.0", "webpack-dev-server": "^3.1.4" }, "name": "", "version": "1.0.0", "main": "index.js", "license": "MIT", "description": "", "author": "", "private": false, "scripts": { "start": "webpack-dev-server --open --watch" }, "dependencies": { "webpack-cli": "^3.0.8" } }。

纹理加载器的THREE.TextureLoader方法带有两个参数； -要加载的图片的网址，以及 -回调

当纹理已加载并且可以使用时，将调用回调。

您应该重组代码，以便可以将load()方法回调中返回的纹理应用于您的对象。

为了说明这一点，一种快速的方法可以使纹理加载并显示在对象上，如下所示：

load()

THREE.JS导入搅拌机OBJ-添加材料

1 个答案: