在React上从零开始搭建Three.js

1,805 阅读2分钟

根据官方文档,学习如何在React上,从头开始创建一个会活动的Three.js场景动画

参考源码链接:github.com/SHENLing062…

  1. 安装node.js和create-react-app脚手架 - 具体参考官方文档

  2. 打开一个文件夹,利用create-react-app创建新项目 create-react-app <--project name-->

  3. 进入创建的文件夹 cd <--project name-->

  4. 安装THREE包 npm install three

  5. 在src目录新建cube.js,用以创建cube组件 echo cube.js

  6. 将src目录下的app.js修改,使其引入cube组件

  7. 进入cube.js,创建Three.js内容

    (1)创建componentDidMount()用以调用执行初始化函数

    (2)在initThree()中创建内容 A. 初始化并new照相机(camera)、场景(scene)

      //create scene
      scene = new THREE.Scene();
      scene.background = new THREE.Color(0x515151);
      group = new THREE.Group();
      scene.add(group);

      //create camera
      camera = new THREE.PerspectiveCamera( 60, window.innerWidth/window.innerHeight, 1, 2000 );
			camera.position.x = -10;
      camera.position.y = 15;
			camera.position.z = 500;

B. 创建要旋转的立方体

      //create the cube
      let geometry = new THREE.BoxGeometry(100, 100, 100); //create BoxGeometry object
      let material = new THREE.MeshBasicMaterial({ color: 0xffffff}); //set the material of the cube
      let cube = new THREE.Mesh( geometry, material); //Mesh contains the cube and the material, we can push the mesh object into our scenerio, and make it moves freely in the scene
      group.add(cube);

C. 创建渲染器

      //create renderer
      renderer = new THREE.WebGLRenderer();
      renderer.setClearColor( 0xffffff );
			renderer.setPixelRatio( window.devicePixelRatio );
      renderer.setSize( window.innerWidth, window.innerHeight);//渲染器大小尺寸
      container.appendChild( renderer.domElement );

D. 创建动画效果

    function animate () {
      requestAnimationFrame(animate);
      group.rotation.x += 0.01;
      group.rotation.y += 0.01;

      renderer.render( scene, camera);
    }

initThree中完整代码:

initThree = () => {
    let camera, scene, renderer, group;
    let container = document.getElementById('cube');
    init();
    animate();
    
    function init() {
      //create scene
      scene = new THREE.Scene();
      scene.background = new THREE.Color(0x515151);
      group = new THREE.Group();
      scene.add(group);

      //create camera
      camera = new THREE.PerspectiveCamera( 60, window.innerWidth/window.innerHeight, 1, 2000 );
			camera.position.x = -10;
      camera.position.y = 15;
			camera.position.z = 500;

      //create the cube
      let geometry = new THREE.BoxGeometry(100, 100, 100); //create BoxGeometry object
      let material = new THREE.MeshBasicMaterial({ color: 0xffffff}); //set the material of the cube
      let cube = new THREE.Mesh( geometry, material); //Mesh contains the cube and the material, we can push the mesh object into our scenerio, and make it moves freely in the scene
      group.add(cube);

      let geo2 = new THREE.SphereGeometry()

      //create renderer
      renderer = new THREE.WebGLRenderer();
      renderer.setClearColor( 0xffffff );
			renderer.setPixelRatio( window.devicePixelRatio );
      renderer.setSize( window.innerWidth, window.innerHeight);//渲染器大小尺寸
      container.appendChild( renderer.domElement );

    }

    function animate () {
      requestAnimationFrame(animate);
      group.rotation.x += 0.01;
      group.rotation.y += 0.01;

      renderer.render( scene, camera);
    }
  }
  1. 运行React.app: 在http://localhost:3000 中查看 npm start