javascript - 三.js 我想对象子分配变量和循环列表但不工作

Question

我想绑定变量 object3D（用于 url）文件。所以我将数组列表映射到孩子的名字。

你可以看到渲染方法，我想 ul 标记孩子名单，但是这个组件没有渲染任何数据

和按钮单击事件，状态为子列表分配的数组。并且 console.log(vis) 没问题。

但是渲染方法 {thsi.state.vis.length > 0 ？...} 不管用

我想分配变量并且选中的复选框是孩子可见的真或假。

let scene;
let viscera = [];

function loadObj(url) {
  const objLoader = new THREE.OBJLoader();
  objLoader.load(
    url,
    function(object) {
      console.log(object);
      let mesh = object;
      scene.add(object);
      mesh.position.set(0, 2, 0);
      mesh.scale.set(2, 2, 2);

      object.traverse(child => {
        if (child instanceof THREE.Object3D) {
          viscera.push(child);
          const liver = child.getObjectByName('Liver_Liver.001');
          const stomach = child.getObjectByName('Stomach_Stomach.001');
          // if (liver && stomach) {
          //   liver.visible = false;
          //   stomach.visible = false;
          // }
        }
      })
      console.log(viscera);
    },
    function(xhr) {
      console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
    },
    // called when loading has errors
    function(error) {
      console.log("An error happened" + error);
    });
}

class ObjectLoader extends Component {
  constructor(props) {
    super(props);
    this.state = {
      vis: viscera,
      get: false
    }
  }

  componentDidMount() {  
    const width = this.mount.clientWidth;
    const height = this.mount.clientHeight;
    scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 2000);
    this.camera.position.z = 8;

    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    this.renderer.setClearColor("#263238");
    this.renderer.setSize(width, height);
    this.mount.appendChild(this.renderer.domElement);
    // const geometry = new THREE.BoxGeometry(5, 5, 5);
    // const material = new THREE.MeshBasicMaterial({
    //   color: "#0F0",
    //   wireframe: true
    // });
    // this.cube = new THREE.Mesh(geometry, material);
    // scene.add(this.cube);

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


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

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

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

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

    // load Object
    this.animate();
    loadObj(this.props.url);
}

  componentWillUnmount() {
    this.stop();
    this.mount.removeChild(this.renderer.domElement);
  }

  getViscera = (vis) => {
    this.props.getViscera(vis);
  }

  start = () => {
    if (!this.frameId) {
      this.frameId = requestAnimationFrame(this.animate);
    }
  };

  stop = () => {
    cancelAnimationFrame(this.frameId);
  };

  animate = () => {
    this.renderScene();
    this.frameId = window.requestAnimationFrame(this.animate);
  };

  renderScene = () => {
    if (this.renderer) this.renderer.render(scene, this.camera);
  };

  // handleViscera = () => {
  //   for (let i = 0; i < viscera.length; i++) {
  //     console.log(viscera[i].name);
  //   }
  // }

  onLoad = () => {
    this.renderScene();
    //start animation
    this.start();
  };

  onProgress = xhr => {
    console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
  };

  // Function called when download errors
  onError = error => {
    console.log("An error happened" + error);
  };

  // getChildren = () => {
  //   this.setState({
  //     get: true
  //   })
  //   if (this.state.vis && this.state.get === true) {
  //     return (
  //       <ul>
  //         {this.state.vis.map(item => {
  //           console.log(item);
  //           <li key={item}>{item.name}</li>
  //         })}
  //       </ul>
  //     )
  //   }
  // }


  render() {
    return (
      <div className="objLoader">
        <div
          style={{ width: "500px", height: "500px" }}
          ref={mount => {
            this.mount = mount;
          }}
        />
        <h2>Children</h2>
        <button className="children-btn" onClick={() => this.getViscera(this.state.vis)}>Get Children</button>
        {
          this.state.vis.length > 0 ? 
          <ul>
            {this.state.vis.map(v => {
              <li>{v.name}</li>
            })}
          </ul>
          : <div>no data</div>
        }
      </div>
    )
  }
}

标签： javascripthtmlreactjsthree.js