Question

处理一个项目，在该项目上，按钮单击脚本会获取.svg和.obj。目前按钮找到.svg和.obj但随后吐出此错误。

未捕获的TypeError：无法读取属性＆＃39;添加＆＃39;未定义的

以下是按钮的代码，所有其他ThreeJS变量和调用都在HTML中，并在单击按钮之前完成加载。

function item(section, callback){
    var tmp = itemName.split('-');
    var cut = tmp[tmp.length-2];
    var styleNo = tmp[tmp.length-1];
    var path;
    var model;
    var loader = new THREE.OBJLoader( manager );
    if (_product.svgPathAbsolute) {
        path = itemName + '.svg';
        model = styleCode + '.obj';
    } else {
        path = _product[section].svgPath + _product.name.toLowerCase() + '/' + cut.toLowerCase() + '/' + itemName + '.svg';
        model = _product[section].svgPath + _product.name.toLowerCase() + '/' + cut.toLowerCase() + '/' + styleCode + '.obj';
    }

    loader.load( model, function ( object ) {
            object.traverse(function(node){
                if(node.material){
                    node.material.side = THREE.DoubleSide;
                    node.material = material;
                }
            });
            object.position.y = -100;
            geometry = object;
            scene.add(geometry);
        });

    $.get(path, function (svg) {
        _html[section] = svgToString(svg);
        callback(section);
    });
}

包含在HTML

中

<script>
  var camera, scene, renderer, controls;
  var windowHalfX = window.innerWidth / 2;
  var windowHalfY = window.innerHeight / 2;
  var geometry;
  var material;
  var svg = document.getElementById("svg-holder").querySelector("svg");
  var img = document.createElement("img");
  var canvas = document.createElement("canvas");
  var svgSize = svg.getBoundingClientRect();
  canvas.width = svgSize.width;
  canvas.height = svgSize.height;
  var ctx = canvas.getContext("2d");
  var manager = new THREE.LoadingManager();
  manager.onProgress = function ( item, loaded, total ) {
    console.log( item, loaded, total );
  };
  var texture;

  var loader = new THREE.OBJLoader( manager );

  init();
  animate();
  function init() {
    container = document.createElement( 'div' );
    document.body.appendChild( container );
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
    camera.position.z = 150;
    // scene
    scene = new THREE.Scene();

    var ambientLight = new THREE.AmbientLight( 0xFFFFFF, 0.9 );
    scene.add( ambientLight );

    var directLight = new THREE.DirectionalLight( 0xFFFFFF, 0.2 );
    camera.add( directLight );
    scene.add( camera );

    controls = new THREE.OrbitControls( camera );
    controls.addEventListener( 'change', render );
    controls.minPolarAngle = 1.5;
    controls.maxPolarAngle = 1.5;

    var svgData = (new XMLSerializer()).serializeToString(svg);

    img.setAttribute("src", "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(svgData))) );
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
        var texture = new THREE.Texture(canvas);
        texture.needsUpdate = true;
        material = new THREE.MeshPhongMaterial({
        map: texture
        });
        material.map.minFilter = THREE.LinearFilter;
    };



    renderer = new THREE.WebGLRenderer({canvas:garmentOBJ,antialias:true});
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    //
    window.addEventListener( 'resize', onWindowResize, false );
  }
  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 animate() {
    requestAnimationFrame( animate );
    render();
  }
  function render() {
    camera.lookAt( scene.position );
    renderer.render( scene, camera );
  }
</script>

Answer 1

将场景对象设为全局或将其绑定到窗口对象，如下所示：window.scene = scene。

三个JS无法读取属性＆＃39;添加＆＃39;未定义的

1 个答案: