0

three.js を使用して、インポートした .obj オブジェクトにシェーダー マテリアルを追加しようとしています。単純な球にマテリアルを追加できますが、それをカスタム オブジェクトに追加しようとすると、どちらのオブジェクトもロードされません。コンソール エラーが undefined として返されます。単一の画像を読み込むことで通常のテクスチャを追加できますが、レイヤード シェーダーの画像を読み込むことはできません。コードには現在、オブジェクトにマップされている「テクスチャ」があり、これは単一の読み込まれたテクスチャです。作成した球体にマップされているため、代わりに「material_shh」をマップしようとしています。child.material.map = texture; を単に交換するだけです。child.material.map = material_shh; に 動作しません。行 127 は、カスタム オブジェクトが読み込まれる場所です。何卒よろしくお願い申し上げます。

<html>
<head>
    <title>Web GL test 2</title>
</head>
<body style="overflow: hidden; background: black;">
    <div id="container"></div>
    <script src="three.min.js"></script>
    <script src="OBJLoader.js"></script>
</body>

<script id="fragment_shh" type="x-shader/x-fragment">
    #ifdef GL_ES
    precision highp float;
    #endif

    uniform sampler2D tOne;
    uniform sampler2D tSec;

    varying vec2 vUv;

    void main(void)
    {
    vec3 c;
    vec4 Ca = texture2D(tOne, vUv);
    vec4 Cb = texture2D(tSec, vUv);
    c = Ca.rgb * Ca.a + Cb.rgb * Cb.a * (1.0 - Ca.a);
    gl_FragColor= vec4(c, 1.0);

    }

</script>

<script id="vertex_shh" type="x-shader/x-vertex">

    varying vec2 vUv;

    void main()
    {
    vUv = uv;
    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
    gl_Position = projectionMatrix * mvPosition;
    }

</script>

<script type="text/javascript">
    var container;
    var targetRotation = 0;
    var targetRotationOnMouseDown = 0;
    var scene = new THREE.Scene();
    var geometry = new THREE.Geometry();
    var object = new THREE.Mesh(geometry, material_shh);
    var mouseX = 0;
    var mouseXOnMouseDown = 0;
    var windowHalfX = window.innerWidth / 2;
    var windowHalfY = window.innerHeight / 2;

    window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame    || 
    window.oRequestAnimationFrame      || 
    window.msRequestAnimationFrame     || 
    function(/* function */ callback, /* DOMElement */ element){
    window.setTimeout(callback, 1000 / 60);
    };
    })();

    // RENDERER
    // --------------------------------------------
    var WIDTH = window.innerWidth, HEIGHT = window.innerHeight;

    var renderer = new THREE.WebGLRenderer({ clearAlpha: 1, clearColor: 0x222222, antialias: false });
    renderer.setSize( WIDTH, HEIGHT );

    var container = document.createElement( 'div' );
    document.body.appendChild( container );
    container.appendChild( renderer.domElement );

    // CAMERA
    // --------------------------------------------
    var camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 20000);
    camera.position.z = 400;
    scene.add(camera);

    // LIGHT
    // --------------------------------------------
    var pointLight = new THREE.PointLight(0xFFFFFF);
    pointLight.position.set( 100, 100, 150);
    scene.add(pointLight);


    // OBJECTS
    // --------------------------------------------

    var geom = new THREE.SphereGeometry( 30, 90, 90 );

    var vertShader = document.getElementById('vertex_shh').innerHTML;

    var fragShader = document.getElementById('fragment_shh').innerHTML;

    var attributes = {};

    var tex1 = THREE.ImageUtils.loadTexture("IDF_AF_MA_H_CB0002.png", {}, function() { renderer.render(scene, camera);});
    var tex2 = THREE.ImageUtils.loadTexture("IDF_AF_MA_F_CB0001.png", {}, function() { renderer.render(scene, camera);});

    var uniforms = {

    tOne: { type: "t", value: THREE.ImageUtils.loadTexture( "IDF_AF_MA_H_CB0002.png" ) },
    tSec: { type: "t", value: THREE.ImageUtils.loadTexture( "IDF_AF_MA_F_CB0001.png" ) }

    };



    var material_shh = new THREE.ShaderMaterial({

    uniforms: uniforms,

    attributes: attributes,

    vertexShader: vertShader,

    fragmentShader: fragShader

    });
    var loader = new THREE.OBJLoader();
    loader.addEventListener( 'load', function ( event ) {

    object = event.content;
    object.traverse( function ( child ) {

    if ( child instanceof THREE.Mesh ) {

    child.material.map = texture;

    }

    } );

    object.position.y = 100;

    scene.add( object );
    });
    loader.load( 'Try1.obj' );

    var texture = THREE.ImageUtils.loadTexture('face.gif');
    texture.needsUpdate = true;

    var me = new THREE.Mesh( geom, material_shh );
    //me.doubleSided = true;
    scene.add(me);
    // Resize + listeners
    //--------------------------------------------
    function onWindowResize() {

    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

    }


    function onDocumentMouseDown( event ) {

    event.preventDefault();

    document.addEventListener( 'mousemove', onDocumentMouseMove, false );
    document.addEventListener( 'mouseup', onDocumentMouseUp, false );
    document.addEventListener( 'mouseout', onDocumentMouseOut, false );

    mouseXOnMouseDown = event.clientX - windowHalfX;
    targetRotationOnMouseDown = targetRotation;

    }

    function onDocumentMouseMove( event ) {

    mouseX = event.clientX - windowHalfX;

    targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;

    }

    function onDocumentMouseUp( event ) {

    document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
    document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
    document.removeEventListener( 'mouseout', onDocumentMouseOut, false );

    }

    function onDocumentMouseOut( event ) {

    document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
    document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
    document.removeEventListener( 'mouseout', onDocumentMouseOut, false );

    }

    function onDocumentTouchStart( event ) {

    if ( event.touches.length === 1 ) {

    event.preventDefault();

    mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
    targetRotationOnMouseDown = targetRotation;

    }

    }

    function onDocumentTouchMove( event ) {

    if ( event.touches.length === 1 ) {

    event.preventDefault();

    mouseX = event.touches[ 0 ].pageX - windowHalfX;
    targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;

    }

    }


    // ANIMATION
    // --------------------------------------------
    var t = 0;
    function animate() 
    {
    document.addEventListener( 'mousedown', onDocumentMouseDown, false );
    document.addEventListener( 'touchstart', onDocumentTouchStart, false );
    document.addEventListener( 'touchmove', onDocumentTouchMove, false );
    window.addEventListener( 'resize', onWindowResize, false );
    object.rotation.y += ( targetRotation - object.rotation.y ) * 0.05;
    me.rotation.y += ( targetRotation - me.rotation.y ) * 0.05;
    renderer.render( scene, camera );
    requestAnimFrame(animate);
    } 

    requestAnimFrame(animate);

</script>

4

0 に答える 0