Fatal编程技术网
  • three.js/
  • THREE.JS导入搅拌机OBJ-添加材料

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

three.js

THREE.JS导入搅拌机OBJ-添加材料,three.js,Three.js,我有一个用搅拌机做的简单的方形盘子 我正在尝试向这个对象添加一个简单的纹理。我在网上找到了这么多的教程和代码，我就是做不到 我的代码是 <html> 身体{ 保证金：0； 溢出：隐藏； } var scene=new THREE.scene（）； var摄像机=新的三透视摄像机（45，window.innerWidth/window.innerHeight，11000）； 摄像机位置设置（0,5,14）； var renderer=new THREE.WebGLRe

我有一个用搅拌机做的简单的方形盘子

我正在尝试向这个对象添加一个简单的纹理。我在网上找到了这么多的教程和代码，我就是做不到

我的代码是

<html>





身体{
保证金：0；
溢出：隐藏；
}



var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（45，window.innerWidth/window.innerHeight，11000）；
摄像机位置设置（0,5,14）；
var renderer=new THREE.WebGLRenderer({
反别名：对
});
渲染器.setClearColor（0xededed）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var loader=new THREE.TextureLoader（）；
var texture=loader.load（“./2.jpg”）；
//为了在形状几何体上正确显示纹理，必须应用这些设置
//texture.wrapps=texture.wrapT=THREE.RepeatWrapping；
纹理。重复。设定（0.05,0.05）；
var controls=新的三个.OrbitControls（摄影机、渲染器.doElement）；
controls.enableDamping=true；
控制。阻尼系数=0.25；
controls.enableZoom=true；
var keyLight=新三点方向光（新三点颜色（'hsl（30,100%，75%）），1.0）；
按键灯。位置。设置（-100，0，100）；
var fillLight=新三点方向光（新三点颜色（'hsl（240,100%，75%）），0.75）；
fillLight.position.set（100,0100）；
var背光=新的三方向光（0xffffff，1.0）；
backLight.position.set（100,0，-100）.normalize（）；
var-manager=new-THREE.LoadingManager（）；
manager.onProgress=功能（项目、已加载、总计）{
控制台日志（项目、已加载、总计）；
};
var textureLoader=新的三个。textureLoader（管理器）；
var textureOBJ=textureLoader.load（'./1.jpg'）；
var onProgress=函数（xhr）{
if（xhr.Length可计算）{
var percentComplete=xhr.loaded/xhr.total*100；
log（Math.round（完成百分比，2）+'%download'）；
}
};
var onError=函数（xhr）{
console.log（xhr）；
};
var roundedRectShape=new THREE.Shape（）；
（函数roundedRect（ctx、x、y、宽度、高度、半径）{
ctx.移动到（x，y+半径）；
ctx.lineTo（x，y+高度-半径）；
ctx.直角曲线（x，y+高度，x+半径，y+高度）；
ctx.lineTo（x+宽度-半径，y+高度）；
ctx.直角曲线（x+宽度，y+高度，x+宽度，y+高度-半径）；
ctx.lineTo（x+宽度，y+半径）；
ctx.四次曲线（x+宽度，y，x+宽度-半径，y）；
ctx.lineTo（x+半径，y）；
ctx.四次曲线（x，y，x，y+半径）；
}）（圆形，0,0,18.5,18.5,2）；
addShape（roundedRectShape，0x008000，-1.41,0.5,1，Math.PI/-2,0,0,0.1）；
场景。添加（关键灯光）；
场景。添加（fillLight）；
场景。添加（背光）；
var装入器=新的三个。对象装入器（管理器）；
loader.load（'./3.obj'，函数（对象）{
遍历（函数（子对象）{
if（三个.Mesh的子实例）{
child.material.map=textureOBJ；
}
} );
object.position.y=-0.01；
object.position.x=0；
object.position.z=0；
场景。添加（对象）；
}，onProgress，onError）；
控件更新（）；
var animate=函数（）{
请求动画帧（动画）；
渲染器。渲染（场景、摄影机）；
};
制作动画（）；
函数addShape（形状、颜色、x、y、z、rx、ry、rz、s）{
var几何=新的三个。ShapeBufferGeometry（形状）；
var mesh=new THREE.mesh（几何体，new THREE.MeshPhongMaterial（{side:THREE.DoubleSide，map:texture}））；
网格位置设置（x，y，z）；
网格旋转设置（rx，ry，rz）；
网格.比例.集（s，s，s）；
场景。添加（网格）；
}

我试图添加这个简单的png作为纹理。有人能帮忙吗

板-示例->

我已成功创建了一个带有纹理的杯子->

看起来您使用的是
THREE.TextureLoader

纹理加载器的
load（）
方法采用两个参数； -要加载的图像的URL，以及 -回拨

当纹理已加载并准备好使用时，将调用回调

您应该重新构造代码，以便将
load（）
methods回调中返回的纹理应用于对象

为了说明这一点，在对象上加载和显示纹理的快速解决方案可能如下所示：

var loader = new THREE.OBJLoader( manager );

// Use a callback, in a similar way to your THREE.OBJLoader
new THREE.TextureLoader( manager ).load( './1.jpg' , function(texture) {

  loader.load( './3.obj', function ( object ) {

      object.traverse( function ( child ) {
          if ( child instanceof THREE.Mesh ) {

              // Assign the loaded texture from the enclosing THREE.TextureLoader to the child material

              child.material.map = texture;
          }
      });

      object.position.y = -0.01;
      object.position.x = 0;
      object.position.z = 0;
      scene.add( object );

  }, onProgress, onError );
})

<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>

var loader = new THREE.OBJLoader( manager );

// Use a callback, in a similar way to your THREE.OBJLoader
new THREE.TextureLoader( manager ).load( './1.jpg' , function(texture) {

  loader.load( './3.obj', function ( object ) {

      object.traverse( function ( child ) {
          if ( child instanceof THREE.Mesh ) {

              // Assign the loaded texture from the enclosing THREE.TextureLoader to the child material

              child.material.map = texture;
          }
      });

      object.position.y = -0.01;
      object.position.x = 0;
      object.position.z = 0;
      scene.add( object );

  }, onProgress, onError );
})