Three.js TorusKnotGeometry Demo

结合教程,熟悉 three.js TorusKnotGeometry。

See the Pen torus knot geometry by Wen Yan (@yanwen) on CodePen.

https://static.codepen.io/assets/embed/ei.js


参考:

((window, document, THREE) => {
  window.main = () => {
    with (THREE) {
      const renderer = new WebGLRenderer({
        canvas: document.querySelector('#canvas'),
        antialias: true
      });
      renderer.setClearColor(0x000000);
      renderer.setSize(window.innerWidth, window.innerHeight);

      const camera = new PerspectiveCamera(35, window.innerWidth / window.innerHeight, .1, 3000);
      const scene = new Scene();

      const light = new AmbientLight(0xffffff, .5);
      scene.add(light);

      // Point light
      const pointLight = new PointLight(0xffffff, .5);
      scene.add(pointLight);

      /*
        TorusKnotGeometry(radius : Float, tube : Float, tubularSegments : Integer, radialSegments : Integer, p : Integer, q : Integer)
        · radius - Radius of the torus. Default is 1.
        · tube — Radius of the tube. Default is 0.4.
        · tubularSegments — Default is 64.
        · radialSegments — Default is 8.
        · p — This value determines, how many times the geometry winds around its axis of rotational symmetry. Default is 2.
        · q — This value determines, how many times the geometry winds around a circle in the interior of the torus. Default is 3.
      */
      const geometry = new TorusKnotGeometry(78, 28, 200, 40);
      const material = new MeshLambertMaterial({
        color: 0xf3ffe2
      });
      const mesh = new Mesh(geometry, material);
      mesh.position.set(0, 0, -800);
      scene.add(mesh);

      const animate = () => {
        requestAnimationFrame(animate);

        mesh.rotation.x += .01;
        mesh.rotation.y += .01;

        renderer.render(scene, camera);
      };
      animate();
    };
  };
})(window, document, THREE);

参考:

  1. https://threejs.org/docs/#api/geometries/TorusKnotGeometry

作者: YanWen

Web 开发者

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

You are commenting using your WordPress.com account. Log Out /  更改 )

Google photo

You are commenting using your Google account. Log Out /  更改 )

Twitter picture

You are commenting using your Twitter account. Log Out /  更改 )

Facebook photo

You are commenting using your Facebook account. Log Out /  更改 )

Connecting to %s